VSCodeのHTML使いの人々へ…
@corone422と申します。これを書いている現在、沖縄でプログラミングスクールを受講している感じです。
これにたどり着いた人は僕と同じく、emmetで出るHTMLのテンプレートに煩わしさを感じている…そうではないでしょうか？
ユーザースニペットを編集する
VSCodeでHTMLを書く人で、このコードは普通に!+Tabで出てきますよね。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
この雛形のlang="en"をlang="ja"にしたいとか、<link rel="stylesheet" type="text/css" href="./css/style.css">は常に使うので追加したいといった人が少なからずいるのではないでしょうか。
見出しでも書きましたがスニペットの編集により追加可能です。自分が追加したいものを追加したいだけ追加できます。
1. まずjsonファイルを開く
Windowsならファイル＞基本設定＞ユーザースニペットを、MacならCode＞基本設定＞ユーザースニペットを開きます。すると検索窓が開くのでhtmlと入力してください。するとhtml.jsonが候補に出てくるのでクリックして開きます。
ここまでは簡単ですね！
2. jsonファイルに書き足していこう
開かれたファイルはなにやら色々英語で書いてあるはずです。
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
これらはスニペットの書き方のルールです。
日本語の参考記事を置いておきますので、書き方などこちらを参照してください。
ではここに書き足していきます。
ですが…見づらいですよね?
そのような方はコメントアウトされているところ全部消してもらっても問題ありません。
{
}
ほら見やすい！
今度こそ書いていきましょう。
基本的にはemmetのタグの出し方と同じですが、書くものはそもそも変わらないので、以下のコードをコピペしてもいいですし、自分でわかる方はカスタマイズして自分のテンプレートにしていきましょう。
コピペしたら保存を忘れずに！
{
"html5": {
"prefix": "!",
"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>${1:Document}</title>\n <link rel=\"stylesheet\" type=\"text/css\" href=\"${2:./css/style.css}\">\n</head>\n<body>\n $0\n</body>\n</html>"
}
}
"prefix": "!"は、Tabで出すときのトリガーとなる文字列の指定をしています。今回は!で出したいのでこのように記述します。
bodyは、!+Tabで出したときに自動で挿入する文字列の指定を行っています。JSの書き方でHTMLの構造を書き表しているようなものなのでややこしいですが、改行は\n、ダブルクォーテーションは\"、あとは半角スペースとTabの組み立てだけ意識しながら自分の欲しいものを追加していきましょう。
上記ユーザースニペットは以下のように挿入されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
</body>
</html>
今回は私の欲しいものだけを挿入するようにしたので、先ほどの注意事項といっしょに見比べて自分の物も作ってみましょう！
最後に一つ
このように設定が完了しましたが、1つだけトラップが…
実は!+Tabをしても設定前の物が出てくることがあります。実はユーザースニペット、標準の物を書き換えているわけではなくカスタム設定を追加する機能なのです。ですので!を打ってすぐにTabを押さずに、下に表示されるものから初めのうちの数回は自分で選択しなければいけません。
なのでちょっとだけ選びやすくしておきましょう。
Windowsの方はファイル＞基本設定＞設定もしくはCtrl+,、Macの方はCode＞基本設定＞設定もしくは⌘+,で設定を開いてください。
次に検索窓にSnippet Suggestionsと入れてください。そうするとEditor: Snippet Suggestionsと書かれた設定が出てきて、初期状態でinlineになっていますので、これをtopに変えましょう。
これによって、ユーザースニペットがemmetの一番上に表示されるようになりますので、初めてスニペットを使うときにマウスでクリックしてください。次からは、最後に使用されたものが!+Tabで自動で入力されます。
言語設定だけ変更したい人へ
余談なのですが、テンプレートはデフォルトのものでいいから、言語設定だけJapaneseにしたい！って方もいるでしょう。
ここで朗報です。
できます！
ちょっと上でお話しした、基本設定＞設定に進み、検索窓にVariablesと入力してください。Variablesの設定が出てくるのでsettings.jsonで編集するをクリックして、jsonファイルに以下のように追加してください。
{
"emmet.variables": {
"lang" : "ja"
}
}
すでに何か書かれていた場合は、上記コードの一番上と一番下の波括弧{}を削除してコロンで区切って改行してからコピペしてね！
あと忘れずに上書き保存！
それでは良きコーディングライフを！