スニペット

Last-modified: 2014-01-31 (金) 21:20:52

スニペットは「切れ端」や「破片」を意味する。
よく使うタグの組み合わせやまとまったコードを予め登録しておき、特定のキー入力+Tabキーで簡単に呼び出す機能。うまく使うとコピー&ペーストの手間を省ける。
公式のヘルプ（英語）：Snippets — Sublime Text Help

作り方

メニューの「ツール」→「スニペット追加」から登録できる。
選択すると、以下のようなファイルが展開される。これを編集する。

保存する時は「○○.sublime-snippet」の形式で保存する。
保存先のフォルダは上記メニューから開いた場合、Packagesフォルダ内にあるUserフォルダになっている。
Packagesフォルダ内ならどこでも良いようなので、用途単位でまとめたい場合はUserフォルダ内にさらに別のフォルダを作り、そこに一括で保存してもよい。
なお、再編集する場合は、「スニペット追加」のコマンドからは開けないので、フォルダを辿って開く必要がある。

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

注意点

1つのスニペットにつき、1ファイルが必要。10個のスニペットを登録する場合は、10個のファイルを作る必要がある。1つのファイルに複数のスニペットを登録することは出来ない。

スニペットの内容

snippet
スニペットの設定全体を囲むタグ。
content
展開後の内容を記入する箇所。
${n:変数名}(nは数字)で展開時に上書きする変数が設定できる。展開時には数字で指定した順番にタブキーで移動する。
同じ変数名を複数使った場合は、一箇所を記入するだけでその他の箇所に同じ内容が上書きされる。
展開後カーソルを置く位置には${0}を記入する。
tabTrigger
展開前の短縮形となる任意の文字列。
scope
スニペットを有効にするモードを指定する。省略した場合はすべてのモードで有効になる。
例を挙げるとhtmlファイルで有効にしたい場合は、「text.html」、CSSファイルの場合は「source.css」、Rubyの場合は「source.ruby」と記入する。単なるテキストファイルの場合は、「text」でよい。
モードを複数指定する場合は、「text.html,source.css」のようにコンマで区切ればよい。
description
スニペットの説明を記入する。記入した説明は補完のポップアップに表示される。

サンプル

設定

div.sublime-snippet

<snippet>
	<content>
		<![CDATA[
<div id="${1:id名}">
	<ul>
		<li class="${2:}">${3:}</li>
		<li class="${2:}">${4:}</li>
		<li class="${2:}">${5:}</li>
		<li class="${2:}">${6:}</li>
	</ul>
</div>
]]>
	</content>
	<tabTrigger>divli</tabTrigger>
	<scope>text.html,text</scope>
	<description>メニューリスト</description>
</snippet>

使用時

divliと打ち込み、tabキーを押すと、以下のコードが展開される。
最初はカーソルが「id名」の部分に当たっており、tabキーを押すごとに、${2:}の位置（4か所同時選択）、${3:}の位置……とカーソルが順次移動する。

<div id="id名">
	<ul>
		<li class=""></li>
		<li class=""></li>
		<li class=""></li>
		<li class=""></li>
	</ul>
</div>

応用

展開される文字列はなんでも良いので、よく使うEmmetの一連のセットを省略形で登録しておき、省略形+TabでEmmetのコードを呼び出し→必要な箇所を修正してCtrl+Eで展開ということもできる。

「スニペット追加」で立ち上がるタブの内容を変更する。

デフォルトでは上述のように一部がコメントアウトされているコードになっているが、毎回コメントアウトを消すのも面倒なので、この内容を自分好みにしたい場合の方法。
Packagesフォルダ→Default→new_templates.py ファイルを開く。

下の方に「class NewSnippetCommand」という箇所がある。そこに<snippet>タグで囲われている記述があるので、以下のように書き換える。scopeやdescriptionの内容は好みで。あまり設定しない場合は、最初のようにコメントアウトしておいてもいい。

コメント行にしろ、日本語が入るとメニューの「スニペット追加」が機能しないようなので、日本語は使えない。

        template = """<snippet>
	<content><![CDATA[
]]></content>
    <tabTrigger></tabTrigger>
    <scope>text.html,source.css,text</scope>
    <description></description>
</snippet>
"""