Visual Studio CodeとEmmet
Visual Studio Code、通称VScodeは、拡張機能を追加することで、自分が使いやすいようにしていけるコードエディタアプリだ。MicroSoft製。
そして、その拡張機能のひとつに”Emmet”というパッケージがあり、これは「コード補完機能」の代表格である。
コード補完機能とは
たとえば、
divとだけ打ち、Tabを押すと、
<div></div>と変換してくれる。
かつ、カーソルは気が利くことに、
<div>と</div>の間にセットしてくれるので、
そのまま続けて
ul>liと打ち、Tabを押すと、
<div>と</div>の間に、
<ul>
<li></li>
</ul>を作成してくれる。
結果、
<div>
<ul>
<li></li>
</ul>
</div>このようなコードになる。
さらに、もし、
ul>liではなく、
ul>li*4というふうに、
*4（4回繰り返す）という記号をliにくっつけてTabを押すと、
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>と作成してくれる。
ほかにも色々な記述ルールで、爆速かつローコストで、複雑なコードを記述できるので、脳で描いているイメージをいかに高速に記述できるかを生業にしているようなエンジニアにとっては天下の宝刀である。
これがコード補完機能だ。
Emmetの問題
このように、業務を効率化したいコーダーは必須のツールの組み合わせなのだが、このEmmet、デフォルトだと、
使っていくうちに、
なぜこれが予測変換で出ない…？
という不満がどんどん積もってくることになる。
（もちろん予測変換されないので、直に打つか、どこかに置いておいたコードをコピペしてくることになる）
たとえば、cssファイル内で、レスポンシブ対応のためにメディアクエリの指定をしたい時、
@media screen and (max-width: 480px) { }というような、そらで打ったらなんともどこかでスペルミスをしそうな長い定型分を打つ必要があるのだが、
これを
@mと打ったらコード補完で
@media screen and (max-width: 480px) { }が予測変換できるようにしたい。
または、以下のどれを出力するかをカーソルで選択し、Enterキー押下で出力できるようにしたい。
@media screen and (max-width: 480px) { }
@media screen and (max-width: 768px) { }
@media screen and (max-width: 1024px) { }
解決方法：自分で予測変換の辞書にワードを追加する
原始的だが一番手っ取り早い方法。
参考記事
cssのスニペットの参考にできるかと思ったgitコード
（結局、なぜかこのJSONファイルの記述内容では動かなかったが、「やりつくしたらこのくらいのボリュームになる」ということがわかる参考にはなった）
自作したJSONコード
見るとわかるかもしれないが、
結局
!important;もemmetのデフォルトになかったので、
これも自作で
!か
!iを打った時点でサジェストされるように追加した。
css.json
{
"@media screen and (max-width: 767px)": {
"prefix": "@m",
"body": [
"@media screen and (max-width: 767px) {\n $0\n}"
]
},
"@media screen and (min-width: 768px)": {
"prefix": "@m",
"body": [
"@media screen and (min-width: 768px) {\n $0\n}"
]
},
"!important;": {
"prefix": "!i|!",
"body": [
"!important;"
]
}
}
html.json
{
"html(カスタマイズ済)": {
"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<meta name=\"description\" content=\"検索結果でサイト名の下に表示される「サイトの説明文」\">\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"アップルタッチ用のファビコン(相対パスOK）.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"32サイズのファビコン画像(相対パスOK）.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"16サイズのファビコン画像(相対パスOK）.png\">\n<link rel=\"manifest\" href=\"PWA化のためのマニフェストファイル.webmanifest\">\n<meta name=\"msapplication-TileColor\" content=\"Windowsピン留めのテーマカラーを設定→#ffffff\">\n<meta name=\"theme-color\" content=\"theme-colorを設定→#ffffff\">\n<meta name=\"msapplication-TileImage\" content=\"Windowsピン留め時の画像(絶対パス）.png\" />\n<meta property=\"og:description\" content=\"SNSでシェアされたときに表示するサイトの説明文\">\n<meta property=\"og:title\" content=\"SNSでシェアされたときに表示するサイトのタイトル\">\n<meta property=\"og:image\" content=\"SNSでシェアされたときに表示する画像※かならず絶対パスを記載（相対パス不可）https://....../img/icons/logo.png\">\n<meta property=\"og:image:width\" content=\"画像の幅px\">\n<meta property=\"og:image:height\" content=\"画像の高さpx\">\n<meta property=\"og:type\" content=\"urlがトップページの場合→website、トップページ以外の場合→article\">\n<meta property=\"og:url\" content=\"https://........\">\n<title>${1:Document}</title>\n<link rel=\"stylesheet\" href=\"${2:css/style.css}\">\n<link rel=\"stylesheet\" href=\"https://nanaironanaoto.github.io/tailwind_mini/assets/my_tailwind_mini_minified.css\">\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js\">\n</head>\n<body>\n $0\n</body>\n</html>"
]
}
}
いかがでしたか？
VScodeでは、Emmet意外にも、コーディングを効率化できる拡張機能がたくさんあります。
例えば、ローカル開発から、Webサーバーへコマンドでファイルをアップロードしたいとか、gitリポジトリにプッシュしたいときなどに、VScode内の分割ウィンドでターミナルを実行できたり、また、cssなどをminify(半角スペースや改行を全て排除して長ーい一本のcssコードをボタン一発で出力してくれるものもあります。
ぜひ、まだ活用していないコーダーさまはお試しください！