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、デフォルトだと、
使っていくうちに、
なぜこれが予測変換で出ない…？
という不満がどんどん積もってくることになる。
（もちろん予測変換されないので、直に打つか、どこかに置いておいたコードをコピペしてくることになる）
たとえば、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ファイルの記述内容では動かなかったが、「やりつくしたらこのくらいのボリュームになる」ということがわかる参考にはなった）
見るとわかるかもしれないが、
結局
;もemmetのデフォルトになかったので、
これも自作で
!か
!iを打った時点でサジェストされるように追加した。
{
"@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}"
]
},
";": {
"prefix": "!i|!",
"body": [
";"
]
}
}
{
"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 >いかがでしたか？
VScodeでは、Emmet意外にも、コーディングを効率化できる拡張機能がたくさんあります。
例えば、ローカル開発から、Webサーバーへコマンドでファイルをアップロードしたいとか、gitリポジトリにプッシュしたいときなどに、VScode内の分割ウィンドでターミナルを実行できたり、また、cssなどをminify(半角スペースや改行を全て排除して長ーい一本のcssコードをボタン一発で出力してくれるものもあります。
ぜひ、まだ活用していないコーダーさまはお試しください！