Sublime Text:Emmetのid・class名のコメント出力をカスタマイズする方法

Tips

Sublime Text:Emmetのid・class名のコメント出力をカスタマイズする方法

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

※紹介している内容はSublime Text 3とEmmetを使用した結果を元に書いています。

※以下内容で「展開」としているのは、TabもしくはCtrlEを使用した時を指しています。

Sublime Text:Emmetのid・class名のコメント出力をカスタマイズする方法 目次

  1. 展開時にidやclass名を記述したコメントを入れる
  2. 開始タグ前にもコメントを入れる
  3. 開始タグ・終了タグそれぞれのコメント内容を変更する
  4. コメント指定の手間を省く

1. 展開時に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 -->

目次へ

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

先ほどのように|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 -->

目次へ

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

2. 開始タグ前にもコメントを入れる」で使用した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 -->

目次へ

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

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

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

3. 開始タグ・終了タグそれぞれのコメント内容を変更する」と併せて記述する場合は下記の様な形になります。

{
  "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のような記述のみで自動でコメント付きの状態で展開できるのを確認できます。

目次へ


今回紹介した内容は以下を参考にしました。

Close the search window,
please press close button or esc key.