Sublime Text 2のEmmetでdivの閉じタグにコメントを自動で入れるカスタマイズ

Dreamweaver向け、Coda向けに続き、Sublime Text 2でも、divの閉じタグの後ろ（または前）にコメントを自動で入れるカスタマイズを検討してみました。@tacamyさんのツイートがきっかけで、そういえばまだやっていなかったなと思いトライしてみました。|cを入れなくても、閉じタグの前か後ろにコメントが入るのが便利だと思っています。

コメントの入れ方については好みが色々あると思いますが、JavaScriptなので適当に編集してSublime Text 2を再起動して試してみて下さい。

カスタマイズ方法

最新のEmmetにて試しました。Sublime Text/Packages/Emmet/emmet/emmet-app.jsの12,460行目付近のprocessTag()を書き換えます。

 /**
 * Processes element with <code>tag</code> type
 * @param {AbbreviationNode} item
 * @param {OutputProfile} profile
 * @param {Number} level Depth level
 */
 function processTag(item, profile, level) {
 if (!item.parent) // looks like it's root element
 return item;
 
 var abbrUtils = require('abbreviationUtils');
 var utils = require('utils');
 
 var attrs = makeAttributesString(item, profile); 
 var cursor = profile.cursor();
 var isUnary = abbrUtils.isUnary(item);
 var start= '';
 var end = '';
 var closeComment = '';
 var matches;
 
 // define opening and closing tags
 if (!item.isTextNode()) {
 var tagName = profile.tagName(item.name());
 if (isUnary) {
 start = '<' + tagName + attrs + profile.selfClosing() + '>';
 item.end = '';
 } else {
 if (tagName === 'div') {
 if (attrs.indexOf('id') === 1) {
 matches = attrs.match(/id="(.*?)"/);
 closeComment = '#' + matches[1];
 } else if (attrs.indexOf('class') === 1) {
 matches = attrs.match(/class="(.*?)"/);
 closeComment = '.' + matches[1];
 }
 start = '<' + tagName + attrs + '>';
 end = '</' + tagName + '><!-- /' + closeComment + ' -->';
 } else {
 start = '<' + tagName + attrs + '>';
 end = '</' + tagName + '>';
 }
 }
 }