Sublime Text 3 + Emmetで​id,class名コメントを​HTML閉じタグの​前に​入れる

公開

更新

idやclass属性を付与した要素の閉じタグ付近に属性の名前をコメントで残すことで、HTMLの構造を分かりやすくすることが多いのですが、その都度コメントを入力するのは面倒くさいので、Mac + Sublime Text 3上で、Emmet使って楽しようという話です。

というわけで最終目標は、Emmetで.hogehogeを下記のように展開することです。

HTML
<div class="hogehoge">
<!-- /.hogehoge --></div>

Emmetのfilter機能

まずEmmetのfilter機能を使って、.hogehoge|cという風に末尾に|cを入力して展開すると、

HTML
<div class="hogehoge">
</div>
<!-- /.hogehoge -->

という形で、閉じタグの後ろにid,class属性の値をコメントで入れてくれます。

とは言え、毎回|cと打つのも面倒くさいですね。そこでEmmetのfilters機能の設定を変更して|cと打たずともコメントを付与するようにします。

Emmetのfilters機能の設定を変更する

Sublime Text のメニューで、Preferences > Package Settings > Emmet > -Userを開き、下記のコードを追加します。

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

filtersのデフォルトは、htmlだけですが、そこにcを付与することで、全て|cをつけて展開するようになります。

コメントを要素の内側に挿入する

ここまで来ましたが、あと一点。私の周りにはこういうコメントを冒頭の例の用に要素の内側に記載する人が多くていつの間にか自分も内側に記載するようになりました。これもまた都度カットアンドペーストするのは面倒くさいのでコメントの挿入位置を変更します。

ここではEmmetのコード(emmet-app.js)自体をカスタマイズする必要があります。カスタマイズの方法はMacのSublime Text 3 + Emmet で閉じタグの後ろにコメントを加える設定 | megane9988のブログの1,2を参考にして

/Users/ユーザ名/Library/Application Support/Sublime Text3/Installed Packages/Emmet.sublime-package

このファイルを一旦別のフォルダに移して、拡張子をzipに変えて解凍しフォルダ名をEmmetに変えます。

その後、下記のフォルダの方にEmmetフォルダを移して

/Users/ユーザ名/Library/Application Support/Sublime Text3/Packages/

Sublime Textを再起動し、Emmetが通常に動いていることを確認します。ここサボると痛い目に会います(体験談)。一回Packageとして認識させないといけないのかも。

で、ようやくそのフォルダの中のemmet-app.jsを編集します。15,920 7,413行あたりの

JavaScript
node.end = node.end.replace(/>/, '>' + nodeAfter);

を、下記のコードに変更して、再起動。

JavaScript
node.end = node.end.replace(/</, nodeAfter + '<' );

これで出来るようになったかと。長かった...

参考