Sublime Text 2でjQuery用のスニペットを自作するときの注意点

- by konitter

色々慣れるためにも最近仕事でもSublime Text 2(以下ST2)を使ってるのですが、ST2には便利なスニペット機能がデフォルトで備わっています。所定の書式に従って書いたスニペットを所定の場所に保存するだけで、自動で読み込んでくれます。

具体的なスニペットの作り方はググるなり、以下のページとかを見ていただくとして、

jQuery絡みのスニペットを作る場合には注意点があります。分かってる人には当たり前の話なんですけど、スニペットとか慣れてない人はハマるかも、ということで。

;(function(window, $) {
	var document = window.document;
	$(document).ready(function() {
		// 処理
	});
}(this, jQuery));

例えば、jQueryを使ってページロード時に何かを実行したい時、こんな風に書くと思います。で、これをST2用のスニペットの書式で書くと、

<snippet>
    <content><![CDATA[
;(function(window, $) {
    var document = window.document;
    $(document).ready(function() {
        ${0}
    });
}(this, jQuery));
]]></content>
    <tabTrigger>ready..</tabTrigger>
    <scope>source.js</scope>
    <description>document ready - jQuery</description>
</snippet>

こうなります(各種オプションは一例)。これでもスニペットとしては読み込まれますが、いくら出てきた補完候補を選択しても上記のコードは出ません。

$はスニペット展開後に書き換える変数やカーソルの位置を表すためのキーワードになっている(${1:name}などとしておけば、展開後にnameが選択された状態になっていて、すぐにその部分が書き換えられる)ので、コード内の(window, $)$(document)$がスニペットとして不正な書式とみなされてしまうのです。

なので、

<snippet>
    <content><![CDATA[
;(function(window, \$) {
    var document = window.document;
    \$(document).ready(function() {
        ${0}
    });
}(this, jQuery));
]]></content>
    <tabTrigger>ready..</tabTrigger>
    <scope>source.js</scope>
    <description>document ready - jQuery</description>
</snippet>

このように該当の$の部分にバックスラッシュを付けてエスケープしてやります。これで、readyと打って出てくる該当の補完候補を選択すると、上記スニペットが${0}にカーソルがある状態で展開されます。