Sublime Text3 の便利機能であるスニペットに、自分で作ったコードを登録すると、更に使い易さが増して幸せになれます。
スニペット機能
超絶便利なスニペット機能ですが、その使い方も超簡単です。
トリガーになる任意の文字を打ち込んで、tab キーを押すだけで登録されているコードやテキスト文などが展開されます。
展開されるコードを自分で作ることもできるので、覚えやすいワードでよく使うコードなどを登録しておくと、更に便利に使えてしまいます。
自作スニペットの登録方法
Sublime Text3 のスニペット機能には、ユーザーが自作スニペットを登録すことを前提に、新登録用の項目がメニューに用意されています。
Tools -> Developer -> New Snippet... をクリックすると、新規登録用のテンプレートファイルが開きます。
スニペットの設定は、１つのファイルに１個のtabトリガーと展開コードのセットのみ設定できます。
１ファイルに複数のセットを設定することはできません。
<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>
設定用のテンプレートファイルの構造は、<snippet>タグで囲まれた中の３項目で設定します。
<content><![CDATA[ ＊＊＊ ]]></content>
tab キーをおした後に、展開されるコードを記述しておきます。
${}で囲まれた場所は、変数として扱われます。
テンプレートのように ${1:this} という記述をしておけば、展開後その場所が選択され編集可能な状態になっています。
また、 ${1: 〜 } が複数箇所に記述されていると、すべてが選択状態となり、同時に編集できます。
${2: 〜 } のように数字を入れておくと、${1: } の編集が終わって tab キーを押すと、${2: } の場所が選択状態になり、数字の順番で編集可能な状態に切り替わります。
キャレット（カーソル）いちの指定だけであれば、$1 , $2 ... $n のように記述するだけで tab キーを押すたびに移動すように指定できます。
$0 で指定された場所が、最終地点になります。
<tabTrigger> ＊＊＊ </tabTrigger>
スニペットを展開するためのトリガーとなる文字列を指定します。
コメントアウトされているのは、省略可能だからです。
省略した場合は、tab キーでは展開されず。コマンドパレットから選択する形になります。
Tools -> Snippets... と選択すると・・・
コマンドパレットが開きます。
<scope> ＊＊＊ </scope>
スニペットを表示させたいファイル形式を指定します。
編集しているファイルの拡張子によって、コマンドパレットやtab キーを押した時の選択項目の中に表示させるかどうか指定します。
HTML ファイルを編集している時のみ表示させたい場合は、<scope>text.html</scope> と入力します。
HTML ファイルと CSS ファイルの編集中に表示させたいなど、複数の種類を指定する場合は、<scope>text.html , source.css</scope>のようにコンまで区切って入力します。
こちらも省略可能です。省略した場合は、すべての種類のファイルで表示されます。
<description> ＊＊＊ </description>
テンプレートファイルの中にはありませんが、コマンドパレットなどで表示させた時の説明文を記述することができます。
省略した場合は、設定ファイルのファイル名が表示されます。
設定ファイルの保存場所
設定用のファイルは、当然ですが保存場所が決まっています。
保存場所： /user/ユーザー名/Library/Application Support/Sublime Text 3/Packages/
Packages 以下であればサブフォルダの中でも OK です。私は User_Snippets というフォルダを作って管理しています。
設定ファイルの拡張子は .sublime-snippet です。
保存時には必ずこの拡張子をつけて保存します。
まとめ
HTMLファイルやCSSファイルだけでなく、通常のブログ記事でもコードを使う場面はあります。
コードにかぎらず、定型文的にも使うことができるので、執筆時にはかなり楽になります。
以前の記事でも紹介した、以下のコードを登録しました。
ソースコードの表示を見た目も内容も分かりやすく表示するSyntaxHighlighter
SyntaxHighlighterのコードを登録しました。
手打ちすると地味に面倒なんですよね。
<snippet>
<content><![CDATA[
<pre class="brush:css">${1}</pre>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>precss</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<snippet>
<content><![CDATA[
<pre class="brush:html">${1}</pre>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>prehtml</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
<snippet>
<content><![CDATA[
<pre class="brush:js">${1}</pre>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>prejs</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
Youtubeの埋め込み用に作ったこちらも登録しました。
Youtube動画をレスポンシブで埋め込むcss設定方法
ラップを重ねると自分でもよく覚えてません。
記述する時、いちいち調べ直してました。
<snippet>
<content><![CDATA[
<div class="movie-wrap"><div class="movie-container">${1}</div></div>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>youtube</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
今のところたったのこれだけですが、それでもスニペット機能の恩恵は十分に感じられます。
普段良く使うものだけでなく、この機能があるからこそ、新たに使おうかと思うものもあるかもしれませんので、便利なコードなども調べなおしてみると良かもしれませんね。
上野 正大,杉本 淳,前川 昌幸,森田 壮 インプレス 2014-03-20
