MacのSublime Text 3 + Emmet で閉じタグの後ろにコメントを加える設定

[code lang=html]
header#megane.9988
[/code]

と入力して展開した際にこれまでは

[code lang=html]
<header id="megane" class="9988"></header>
[/code]

だったものが

[code lang=html]
<header id="megane" class="9988"></header><!– /#megane .9988 –>
[/code]

というように、同 id や class でのコメントが閉じタグ後に自動付与されます。以下は手順です。すでにEmmetがインストールされている前提で進めます。自分の環境ではこれで動いてますが、影響の範囲は不明なので自己責任でお願いします。

1. Emmet パッケージを解凍する

すでに、パッケージインストーラーから Emmet がインストールしてあれば、

[code lang=text]
/Users/ユーザ名/Library/Application Support/Sublime Text 3/Installed Packages
[/code]

この中に Emmet.sublime-package があると思います。これを Unarchiver などで解凍してください。もしお使いの解凍用アプリケーションがうまくうごかなければ .zip にリネームしてから解凍しましょう。出来上がったフォルダは Emmet とリネームしておきます。

また Emmet.sublime-package は Sublime のアプリケーションとは異なるディレクトリに移動しておきます。

2. Emmet フォルダの移動

上記で解凍、リネームした Emmet フォルダを

[code lang=text]
/Users/ユーザ名/Library/Application Support/Sublime Text 3/Installed Packages
[/code]

から

[code lang=text]
/Users/ユーザ名/Library/Application Support/Sublime Text 3/Packages
[/code]

に移動します。これで準備は完了です。 Sublime Text 3 を再起動させて、問題なく Emmet が普段通り利用できることを確認しておきます。この時点で動かない場合は、なにかしらまちがっているので元に戻しましょう。

3 emmet-app.js の編集

[code lang=jscript]
} else {
start = '<' + tagName + attrs + '>';
end = '</' + tagName + '>';
}
[/code]

[code lang=jscript]
} else {
start = '<' + tagName + attrs + '>';
// end = '</' + tagName + '>';
if (attrs.indexOf("id=")!=-1 || attrs.indexOf("class=")!=-1) {
var commentStr = '/' + attrs.slice(1);
commentStr = commentStr.replace('id=', '#');
commentStr = commentStr.replace('class=', '.');
commentStr = commentStr.replace(/"/g, '');
end = '</' + tagName + '><!– ' + commentStr + ' –>';
} else {
end = '</' + tagName + '>';
}
}
[/code]

ですね。以上で作業は完了です。成功していれば、冒頭で紹介したとおり、閉じタグの後にコメントが入るはずです。これで、閉じタグを見た時に、これはどこのタグだっけ?と探す手間が省けますね。ありがたい。ありがたい。