Sublime Text にオリジナルのスニペットを登録して定型文をらくらく入力

楽できるところは楽しようじゃないか、ということで、今回は Sublime Text に自分のよく使うフレーズをスニペット登録して呼び出す方法です。

パソコンに自分のメールアドレスとかを辞書登録して「めーる」で呼びだしたりするのと似てるかもしれません。

今回は html5init と入力したら

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

って出るようにしてみます。

スニペットをつくる

登録するには、Sublime Text の Tools メニューから New Snippet を選択します。

すると、なにやら入力済みの新しいタブが開きますが、これがカスタムスニペットの雛形になります。

<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>

<content><![CDATA[

Hello, ${1:this} is a ${2:snippet}.

]]></content>

</snippet>

このうち、content のなかに書かれている部分が実際に呼び出されるテンプレートで、content の下にある４つのコメントが呼び出す条件などを設定する部分です（実際には半分は説明なんで設定は２箇所ということになります）

さらに、content のうち、実際に呼ばれるのは <![CDATA[ から ]]> の間に書かれたものだけになります。

上の例なら「Hello, ${1:this} is a ${2:snippet}.」が呼ばれるということですね。

なのでこのワードを消して、さっきのHTML雛形と置き換えます。こんなかんじ

<snippet>
	<content><![CDATA[<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>untitled</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>html5init</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

<html>

<head>

<title>untitled</title>

</head>

<body>

</body>

</html>]]></content>

</snippet>

CDATAのなかでは改行とかもそのまま扱われるので、一番最初と最後の部分は改行をツメておかないと変な改行が入りますので注意。

入力がおわったら今度は動作条件の設定を行います。

続いて tabTrigger を設定します。ここに書いた内容がトリガーとなります。
今回は html5init で動作させたいのでそのように書きました。

で、最後に scope ですが、これは設定するとそのモードでしか動作しなくなるというものです。HTMLの雛形なので HTMLを指す「text.html」と入れたいところですが、

通常 Sublime Text を起動した直後とか、新しいタブをオープンした直後って Plain Text ですよね。ということは、HTML 専用にしてしまうと、一度シンタックスモードを HTML に切り替えないと動作しなくなってしまいます。

なのでここは敢えてコメントしたままにしておきます。（好みですけどね）

ちなみに雛形にすら出てきませんが、 description ってのもあります。こいつはコマンドパレットから呼び出すときに表示されます。

ここは

<description>html5init : HTML5初期コードを挿入します</description>

1	<description>html5init : HTML5初期コードを挿入します</description>

という感じで、「tabTrigger : 説明文」って形にしておくと、ちょっと絞り込みが楽になります。

スニペットを保存する

作ったスニペットは保存しなければ動作しません。あたり前ですが。

保存するときは、場所が決まっていますので注意して下さい。といっても保存ダイアログが表示されたときに既にその場所になっているはずなので、そこからフォルダを移動しなければ大丈夫なはずです。

ファイル名はなんでも良いですが、あとで手直しするときとかのことも考えてわかり易い名前にしておきましょう。拡張子は「.sublime-snippet」です。

今回は「user-html5-init.sublime-snippet」としました。

呼び出してみる

保存するとすぐにそのスニペットが使えるようになります。再起動とかはいりませんので、すぐに新しいタブを開いて試せます。

Cmd+N で新しいファイルを開いて「html5init」と打って Tab を押してみてください。

それで自分の登録したスニペットに置き換えられたら成功です。

ついでなのでコマンドパレットでも試してみましょう。

今入力した内容を全部削除してから、 Cmd+Shift+P でコマンドパレットを開いて「html5」と入れてみましょう。

「html5init : HTML5初期コードを挿入します」というのが絞りこまれてきたら、Enterで決定すると、やっぱり自分で登録したスニペットが呼び出されるはずです。

ダミー部分をハイライトさせた状態で呼び出せるようにする

HTMLの雛形が呼び出されたらまず最初にするのはなんでしょう？ってこれは人それぞれなんでなんともいえませんが、とりあえずタイトルは忘れないうちに付け直しておきたいところですよね。

ということで今回は呼び出したらすぐにタイトルを変更できるようにカスタマイズします。

まだ sublime-snippet は閉じてないですか？閉じてたら開き直して下さい。

で、タイトル要素の部分を以下のように変更します。

- <title>untitled</title>
+ <title>${1:untitled}</title>

1 2	- <title>untitled</title> + <title>${1:untitled}</title>

タイトル部分を ${1:}で囲いました。これはスニペットで使える変数になります。

数字部分は編集順で、同じ数字を指定すると、同時に編集できる状態になります。（選択範囲を Cmd+D しているのと同じ状態）

こうすることで、呼び出すと、 untitled 部分が既に選択された状態になりますので、呼び出して次に打った言葉がタイトル要素に入るということになります。これ、地味に便利。

HTMLじゃあんまり使わないかもですが、PHPとかで関数を呼ぶ時とかはよく使われてますよね。これ。

因みに２番目以降の編集箇所は、Tabを押すと移動できます。

たとえば、body のなかに {$2:lorem ipsum dolor sit amet} とかかいておけば、

スニペット呼ぶ
タイトル入力
Tabで body に移動
コンテンツ編集開始

みたいな感じでサクサクと進めます。

テンポ重視の人はこの辺しっかりと設定しておくととても気持ちいいのではないでしょうか？

ということで完成した sublime-snippet はこちら

<snippet>
	<content><![CDATA[<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>${1:untitled}</title>
	<link href="${2:style}.css" rel="stylesheet" type="text/css">
</head>
<body>
<body>
${3:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}
</body>
</html>]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>html5init</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>text.html</scope> -->
	<description>html5init : HTML5初期コードを挿入します</description>
</snippet>

<html>

<head>

<title>${1:untitled}</title>

</head>

<body>

${3:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}

</body>

</html>]]></content>

<description>html5init : HTML5初期コードを挿入します</description>

</snippet>

スタイルシートの指定にも立ち寄るようにしてみました。
そのままコピペして使ってもいいし、うまいこと自分流に改造してみても良いのではないでしょうか？

NeGiMeMo.net

Sublime Text にオリジナルのスニペットを登録して定型文をらくらく入力

スニペットをつくる

スニペットを保存する

呼び出してみる

ダミー部分をハイライトさせた状態で呼び出せるようにする

いいね:

コメントするコメントをキャンセル

関連投稿

Sublime Text にオリジナルのスニペットを登録して定型文をらくらく入力

スニペットをつくる

スニペットを保存する

呼び出してみる

ダミー部分をハイライトさせた状態で呼び出せるようにする

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル