Emmet コメントを自動挿入する方法

階層が膨れてくると、どこまでがどこのクラスなのか、
「あれ、閉じタグが一個多くないか!？」など

いろいろとわからなくなってきますよね^^;

そこでそれを解消する為に使った
Emmetを今回記事に書きたいと思います。

それでは行きましょー！！

Emmetとは

HTML、CSSをコーディングするときに、ショートカットキーを使用すると補完してくれるツールです。

Emmetのチートシート
https://docs.emmet.io/cheat-sheet/

コメントを自動挿入する方法

今回はVSCodeを使用している設定で書き出しておりますので、ご了承下さい^^;

VSCodeを起動して、左下の設定ボタンから[設定]を開きます。

右上にあるアイコンをクリックして、settings.jsonを開きます。

僕の元のsettings.jsonは以下の設定でした。

settings.json

{
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "files.autoSave": "afterDelay",
    "window.zoomLevel": 0,
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.shell.osx": "/bin/zsh",
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.iconTheme": "material-icon-theme",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "emmet.triggerExpansionOnTab": true
}

ここに以下を追加します。

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

上記を追加すると、閉じタグのすぐ後ろ(同じ行)にコメントが自動挿入されます。
同じ行ではなく、次の行にコメントを挿入したい場合は、emmet.preferencesの部分は削除して、emmet.syntaxProfilesだけを追加すればOKです。

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

----------------------------------------------------
↓↓こちらのみ
----------------------------------------------------

"emmet.syntaxProfiles": {
    "html": {
        "filters": "html,c"
    },
},

追加を終えたのが以下になります。

settings.json

{
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "files.autoSave": "afterDelay",
    "window.zoomLevel": 0,
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.shell.osx": "/bin/zsh",
    "workbench.colorTheme": "Visual Studio Dark",
    "workbench.iconTheme": "material-icon-theme",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "emmet.triggerExpansionOnTab": true, ⇦カンマ忘れずに
            --------------- 以下追加 ------------------
    "emmet.syntaxProfiles": {
        "html": {
            "filters": "html,c"
        },
    },
    "emmet.preferences": {
        "filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
    },

}

div.hogeをTabキーで展開すると、以下のようになります。

emmet.preferencesをsettings.jsonに追加しなかった場合は、以下のように次の行にコメントが挿入されます。

以上になります
設定もすごく簡単なので是非設定してみて下さい^^

おまけ

Emmet入れてるのに全然動作がしないです！
って人がもしいたら、

設定が開けたら上部にある検索蘭にemmetと入力して
以下の項目にチェックが付いているか確認して下さい!

これで使えるはずです！^^