自分は普段コーディングする際にコメントを付けない方で、もし付けるとしてもやたらと入れ子が発生してしまうときなどに終了タグ部分へ入れる程度なのですが、先日「一部要素に関しては、id・classを使用した場合は全ての開始タグ・終了タグにid名・class名のコメントを記述すること」というレギュレーションの案件がありました。
さすがに毎回コメントを入れるのは面倒だと思い、Emmetのスニペットを使ってコメント出力を少しカスタマイズしてみたので、その方法を備忘録兼ねて紹介します。

  • 紹介している内容はSublime Text 3とEmmetを使用した結果を元に書いています。
  • エントリー内で「展開」としているのは、TabもしくはCtrl + Eを使用時を指しています。

展開時にidやclass名を記述したコメントを入れる

Emmetは、idやclassがついた要素の閉じタグ部分に、使用しているidやclass名を記述したコメントを付けた状態で展開させることができます。
具体的には下記それぞれのBeforeのサンプルコード内にあるように末尾に|cを記述することで、それぞれAfterにあるハイライト部分のようなコメントが記述された状態で展開されます。

Before #1
div#xxx|c

↓ ↓ ↓

After #1
<div id="xxx"></div>
<!-- /#xxx -->

 

Before #2
div.xxx|c

↓ ↓ ↓

After #2
<div class="xxx"></div>
<!-- /.xxx -->

 

Before #3
div#xxx.xxx|c

↓ ↓ ↓

After #3
<div id="xxx" class="xxx"></div>
<!-- /#xxx.xxx -->

開始タグ前にもコメントを入れる

先ほどのように|cを記述することで閉じタグ部分にコメントを付けることができるのですが、これを開始タグ前にも入れるようにする方法です。
実装にはfilter.commentBeforeを設定する形で記述し、「Preferences → Package Settings → Emmet → Settings - User」で開いたファイルに下記のような形で追記又は記述します。

{
  "preferences": {
    "filter.commentBefore": "<!-- <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->\n"
  }
}

上記を記述することで、下記のように開始タグ前にもコメントが入っている状態で展開されるようになります。

Before #1
div#xxx|c

↓ ↓ ↓

After #1
<!-- #xxx --><div id="xxx"></div>
<!-- /#xxx -->

 

Before #2
div.xxx|c

↓ ↓ ↓

After #2
<!-- .xxx --><div class="xxx"></div>
<!-- /.xxx -->

開始タグ・終了タグそれぞれのコメント内容を変更する

上で使用したfilter.commentBeforeに加え、filter.commentAfterも使用して出力されるコメント内容を変更してみます。
今回は開始タグ部分に「start id・class名」、終了タグ部分に「end id・class名」というコメントが出るように変更します。
実装には先ほどと同様で「Preferences → Package Settings → Emmet → Settings - User」で開いたファイルに下記のような形で追記又は記述します。

{
  "preferences": {
    "filter.commentBefore": "<!-- start <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->\n",
    "filter.commentAfter": "\n<!-- end <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
  }
}

上記を記述することで、下記のように開始タグ・終了タグそれぞれのコメント内容が変更された状態で展開されるようになります。

Before #1
div#xxx|c

↓ ↓ ↓

After #1
<!-- start #xxx --><div id="xxx"></div>
<!-- end #xxx -->

 

Before #2
div.xxx|c

↓ ↓ ↓

After #2
<!-- start .xxx --><div class="xxx"></div>
<!-- end .xxx -->

コメント指定の手間を省く

上記でそれぞれ紹介してきた方法で開始タグ・終了タグの両方に意図した形でコメントを入れることができましたが、毎回|cを記述するのは面倒なので|cを記述しないでも展開時に自動でコメントが追加されるようにしてみます。
実装はこれまでと同様で「Preferences → Package Settings → Emmet → Settings - User」で開いたファイルに下記のような形で追記又は記述します。

{
  "snippets": {
    "html": {
      "filters": "html,c"
    }
  }
}

もしくは、開始タグ・終了タグのコメント内容を変えるのと併せて記述する場合は下記の様な形になります。

{
  "snippets": {
    "html": {
      "filters": "html,c"
    }
  },
  "preferences": {
    "filter.commentBefore": "<!-- start <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->\n",
    "filter.commentAfter": "\n<!-- end <%= attr(\"id\", \"#\") %><%= attr(\"class\", \".\") %> -->"
  }
}

上記のように記述することで毎回|cの記述をしなくても、div#xxxdiv.xxxのような記述のみで自動でコメント付きの状態で展開できるのを確認できます。