NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

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

bell賞味期限切れコンテンツ

この記事は公開または最終更新から417日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

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

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

今回は html5init と入力したら

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

スニペットをつくる

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

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

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

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

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

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

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

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

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

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

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

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

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

ここは

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

スニペットを保存する

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

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

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

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

呼び出してみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TAGS