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

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

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

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

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

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

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

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


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

VSCodeを起動して、左下の設定ボタンから[設定]を開きます。
![スクリーンショット 2021-02-26 17.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/bd8469ea-aa83-3740-34d3-82b34c0e81d7.png)

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

![スクリーンショット 2021-02-26 17.44.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/bb27abed-0311-b162-68de-f8ac8e8cedb6.png)

僕の元の`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キーで展開すると、以下のようになります。




![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/7aa43619-131f-5949-f576-cbb6b4768076.gif)

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


![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/c985d473-6e60-715f-18ec-592bda20fab8.gif)


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



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

![スクリーンショット 2021-02-26 18.32.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/d1ea6ed0-b33e-7103-b9c2-e30c78bc8e31.png)


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


![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/859347/f7cf214b-69d5-042f-cb96-d81520ca1eae.gif)

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