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


header#megane.9988

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

<header id="megane" class="9988"></header>

だったものが

<header id="megane" class="9988"></header><!-- /#megane .9988 -->

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

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

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

/Users/ユーザ名/Library/Application Support/Sublime Text 3/Installed Packages

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

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

2. Emmet フォルダの移動

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

/Users/ユーザ名/Library/Application Support/Sublime Text 3/Installed Packages

から

/Users/ユーザ名/Library/Application Support/Sublime Text 3/Packages

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

3 emmet-app.js の編集

} else {
    start = '<' + tagName + attrs + '>';
    end = '</' + tagName + '>';
}

} 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 + '>';
    }
}

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