【VsCode】Emmet展開時にクラス/ID名のコメントを閉じタグに自動挿入させる

VsCodeの設定を少し加えるだけで、
HTMLの閉じタグをみて、どれどれ?とぼんやりしてしまうのを防ぐことができます。
私はこのようなことがよくあり、この設定でかなり作業が楽になりました。

設定後の画面はこのような感じです!

<div class="wrapper">
  <div class="content">
    <p>divの閉じタグのすぐ横にコメントが挿入されています!</p>
  </div><!-- /.content -->
</div><!-- /.wrapper -->

classは、.class名で展開 → <!–/.class名–>
IDの場合は、#ID名で展開 →  <!–/#ID名–>
というようなコメントにしてくれます!

目次

setting.jsonに追記します

VsCodeの設定画面から、setting.jsonを開きます。

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

divタグや入れ子が増えたりすると、コメントのある方がわかりやすくなります♨︎
おすすめな設定でした!

  • URLをコピーしました!
目次