投稿日：2013年4月25日
更新日：2017年6月6日
目次
何か入力してTabを押すと補完されるのがスニペット。（あってるかな…）
Sublimetext2でCSSを高速に書けるhayakuを紹介で書いたように、tabで補完される機能は、使いこなすとかなり効率があがります。
SublimeTextでは、スニペットを登録することができるので試しに２つ作成してみました。
まず保存する場所
|
1 2 3 |
/Library/Application Support/Sublime Text 2/Packages/XML |
XMLフォルダにはプリインストールのsnippetが入っています。
拡張子が.sublime-snippetとなっているファイルがsnipetのファイルです。
これをコピーして作成すると楽です。
XMLフォルダではなく、同じ階層に、snippetなどの名前で新しくフォルダを作成して作っても認識してくれるので、自作とわけたい場合はそうすると良いかと思います。
試しに作ってみる
div-class.sublime-snippet
|
1 2 3 4 5 6 7 8 |
<snippet> <content><![CDATA[div class="${1}">${2}]]></content> <tabTrigger>dc</tabTrigger> <description>&lt;div class&gt;</description> <scope>text.html</scope> </snippet> |
一見わかりづらいですが、簡単に解説すると、
|
1 |
<b><tabTrigger>dc</tabTrigger></b> |
この部分は、<dcを入力して、tab を押すと、どうなるかを設定しています。
[code]<![CDATA[div class="${1}">${2}]]>[/code]
この部分は、tabを押した結果、補完されるコードを設定しています。
ここでは、<div class=””>が入力されます。
${1}、${2}がカーソル位置の順番です。
“”の中に最初にカーソルが選択されます。
その後に tab を押すと、カーソル位置が一番後ろに移動します。
important.sublime-snippet
|
1 2 3 4 5 6 7 8 |
<snippet> <content><![CDATA[!important]]></content> <tabTrigger>!</tabTrigger> <description>CSS - !important</description> <scope></scope> </snippet> |
これは 「!」 を押して tab を押すと、!importantが入力されるというものです。
dreamweaverで利用していた入力ですね。なにげに便利です。
おわりに
実際にうごいているsnippetを確認してみて、その中から自分のやりたい動作に似たファイルをコピーして編集すると楽に作れます。snippetもそうですが、効率化は楽しいですね。