Visual Studio Code（VSCode）で閉じタグコメントを自動挿入する方法

コーディング時に使うエディタはTeraPadから始まってDreamweaver→Brackets→またDreamweaverだったんですが最近のアップデートでさらに重く。。。
いい加減嫌になったので最近Visual Studio Code（VSCode）乗り換えました。

VSCodeすごく快適。
Dreamweaverを立ち上げる間に細かい修正が終わってしまうくらいにサクサク。正直、自分はなんて無駄な時間を使ってたんだろうと思うレベルでございます。

カスタムもしやすいし気に入ってるんですが閉じタグコメントを自動挿入させるのに手間取ったのでメモ。

ユーザー設定の変更

まず画面左下の「歯車アイコン」 から「設定」、もしくは 「command + , 」で「Settings」ファイルを開きます。
検索バーに「emmet」または「json」と入力するといくつか候補が出てきますが、その中に「setting.jsonで編集」というのが出てくるのでクリック。

右側の入力エリアに以下のコードを追加します。

"emmet.syntaxProfiles": {
    "html": {
        "filters": "html,c"
    },
},
"emmet.preferences": {
    "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
},

これで設定は完了。
閉じタグと同じ行にコメントを出す必要がなければ “emmet.preferences” の記述は不要です。

div#hoge.huga

これを展開すると以下のように出力されます。

<div id="hoge" class="huga"></div><!-- /#hoge.huga -->

地味だけどあると便利な機能ですね。