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

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

目次へ