SublimeTextにスニペット登録をして爆速コーディング

アプリ

SublimeTextにスニペット登録をして爆速コーディングのアイキャッチ画像

SublimeText3に移行するかAtomに移行するか、まだ思案中です。原稿作成に併用していて使い勝手もよくなってきましたが、SASSのコンパイルでエラーが出て、なんだか面倒になっている最中です。

スニペット登録

メニューバーのTools＞スニペット追加
設定ファイルにスニペット登録をする
.sublime-snippetの拡張子でファイルの保存場所を選んで保存する

Atomと同じく手順はすごくシンプルです。注意点は拡張子.sublime-snippetを意識しなければいけない点とファイルの保存場所の階層をPackages以下にする必要があることです。

スニペットの記入例

WordPressのカスタム投稿タイプの条件分岐をスニペット登録した例です。

<snippet>
<content><![CDATA[
	<?php if (get_post_type() === '${1:}'): ?>
		${2}
	<?php endif; ?>
	]]></content>
	<tabTrigger>ifpt</tabTrigger>
	<!-- <scope>source.python</scope> -->
</snippet>

<content><![CDATA[〜]]></content>の中に展開内容を記入

<content><![CDATA[から]]></content>の間に展開内容を記入します。展開後は${1:}がフォーカスされていてtabキーを押すと${2}にフォーカスが移ります。

トリガーを設定

<tabTrigger>から</tabTrigger>の間にトリガーを設定します。設定したトリガー入力後、tabキーを押すとスニペットが展開します。

.sublime-snippetの拡張子でファイルを保存

入力が終われば.sublime-snippetの拡張子でファイルを保存します。前述の通りPackages以下の階層に保存する必要があります。

//Macの場合
/Users/ユーザー名/Library/Application\ Support/Sublime\ Text\ 2/Packages/以下の階層

基本的には以上で設定は完了ですが、scopeを設定してスニペットの範囲を決めることができます。Web制作用途であれば以下を押さえておけば大丈夫でしょうか。

HTMLファイル: text.html
PHPファイル: source.php
CSSファイル: source.css
JavaScriptファイル: .source.js

複数のscopeを設定する場合は、カンマで区切ります。以下スコープをphpとhtmlで設定した例です。

<snippet>
<content><![CDATA[
	<?php if (${1:}): ?>
		${2}
	<?php endif; ?>
	]]></content>
	<tabTrigger>ife</tabTrigger>
	<scope>source.php,text.html</scope>
</snippet>

phpで設定すると<?php ?>の範囲でしか設定できませんので、htmlを設定する必要があります。というわけで上の例では、phpの設定は無意味です。

とりあえず最近覚えたWordPress系のスニペットを作りまくって爆速化頑張ります！