Sublime Text 2でスニペットの登録方法

, ,

Sublime Text 2で最近Emmetを導入したのですが、Zen-CodingのときはHTMLやCSS以外の言語もZen-Codingにスニペットを追加して楽をしていました。

Emmetにしてから、どうも他言語のスニペットをEmmet自体に登録できないみたいで、どうしたものやらと悩んでいたら、Sublime Text 2自体にスニペット機能があるみたいで、ちゃんと調べてみたらスニペットTabキーで展開できるみたいで使い勝手も良さそう。

ということで、スニペットをどのようにすれば登録できるのが調べてみました。

スニペットファイルの管理場所

/Users/[自分のMacの名前]/Library/Application Support/Sublime Text 2/Packages/

上記のPackages配下に.sublime-snippetという拡張子で登録すればいいらしいです。

少し面倒くさいのが、スニペットごとにファイルを生成しなくてはいけないのです。
Packagesフォルダの配下でしたらどこに置いてもスニペットとして認識してくれるので、下の画像の様に言語ごとにフォルダ分けして管理するのがいいでしょう。

ファイルの格納場所

スニペット登録方法

例えば、自分はJavaScriptを書くことが多いので、JavaScriptのスニペットを作ります。setTimeout()を毎回1から書くのは面倒なのでスニペット登録することにします。


// st.sublime-snippetというファイル名で保存
<snippet>
    <content>
<![CDATA[
setTimeout(function() {
    ${0}
}, ${1: time});
]]>
    </content>
    <tabTrigger>st.</tabTrigger>
    <scope>source.js</scope>
</snippet>

.jsという拡張子がついたファイルでst.という文字の直後でTabキーを押したら、スニペットが展開されます。${1: time}が書かれた部分はスニペットの変数で、展開直後にカーソルが置かれる場所になります。変数を幾つか置いていたら、Tabキーを押すごとに次の場所にカーソルが移動します。${0}は最後にカーソルが置かれる場所ですね。

Coda2などと比べたらスニペット登録の手間は多いですが、柔軟にカスタマイズできる分こちらのほうが機能としては大きいですね。

参考にさせていただいた記事