htmlファイルを新規作成して、「!」や「html:5」を入力して「Enter」すると、自動で基本となるhtmlがマークアップされる。このように、HTMLやCSSを省略記法で入力できるのは、emmet というプラグインのおかげ。便利でありがたい。
ただ、「!」や「html:5」で表示されるhtmlタグは、lang属性をjaにしたり、その後のチューニングが必要なのが面倒。とくに「X-UA-Compatible」の記述があるのは残念すぎる。個人的にはInternet Explorerの時代から「X-UA-Compatible」を記述しないと直せないコードは、ただのバグ、という認識で、「X-UA-Compatible」なしで解決できる手法に修正してきた。そもそも今やどのブラウザもWHATWGのWeb標準準拠レベルは高い。
前置きはさておき。
Macで「!」や「html:5」で表示されるhtmlタグを変更する方法
- メニュー「Code」の「基本設定」の「ユーザースニペット」を選択する
- エクスプローラーが表示されるので、検索ボックスに「html.json」を選択する
オブジェクトを追加する。
prefixの値には、ショートカットしたいキー。複数ある場合は配列で、一つの場合は文字列でセットする。
bodyの値には、自動セットしたいコードをセットする。
"html5": {
"prefix": ["!", "html:5"],
"body": "<!doctype html>\n<html lang=\"ja\" prefix=\"og:http://ogp.me/ns#\">\n<head>\n <meta charset=\"utf-8\">\n <title></title>\n <meta name=\"robots\" content=\"ALL\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n <meta name=\"format-detection\" content=\"telephone=no\">\n</head>\n<body>\n\n</body>\n</html>"
}ちなみに、とりあえずこんな感じでセットしているが、あとでブラッシュアップしておこうと思う。
さて。実際に正常に動くか確認する。
「!」と入力すると、選択肢が増えていることを確認できる。それを選択する。
できた！
補足すると、実際には上書きしたわけではなく、同じショートカットキーに、異なる情報が表示されるようにセットしたことになる(ユーザースニペット)。
あとは内容をブラッシュアップして、デフォルト、WordPress用、〇〇プロジェクトのように、それぞれのショートキーを用意しておきたい。同様の手順で、HTMLだけでなく、css.json ではCSSのスニペットを設定できたりと他のプログラム言語にも対応しているとのこと。「vscode ユーザースニペット」でググるといろいろな情報を見つけることができる。