コード入力速度アップ!SublimeTextのスニペットを登録する方法

2016年9月4日

Photo:MacBook Air By:Antonio Tajuelo
Photo:MacBook Air By Antonio Tajuelo

スニペットは「切れ端」や「破片」を意味する。

よく使うタグの組み合わせやまとまったコードを登録しておき、
特定のキー入力+Tabキーで簡単に呼び出す機能。

うまく使うとコピー&ペーストの手間を省ける。

Snippets — Sublime Text Help

事を書くときにはなるべくサクサクと書いていきたいですよね。
どうも。きょうも明日も勉強中 やまだかばです。

ぼくはブログを書くときにSublimeText2というエディタを使って、記事を書いています。

SublimeText2には、
あらかじめ決めておいた短いトリガーを入力するだけで
長いコードを簡単に呼び出す
snippets(スニペット)という機能が搭載されています。

記事作成の効率アップに欠かせない、スニペットの登録方法を紹介します。
これでサクサク記事を書いていくことができるようになります。

スポンサードリンク

スニペットって???

たとえば、こんな風に文字を強調したいときや、 下線を引く大きさを変えるなど、文字を装飾したくなった場合、
同じタグを何回も書くのはとても手間だし、面倒ですよね。
そんなときがスニペットの出番。

登録しておいたコードを、
あらかじめ指定しておいた
トリガーとなる短い文字を記入する
だけで呼び出す
ことができます。

よくある定型文の呼び出しと一緒みたいなものですね。

同じコードを何度も何度も書いたりすると効率も悪いし、間違えることもあるかと思います。そんな失敗や効率の悪さを解消するのが、スニペットになる感じです。
スニペットを使いこなせば、複雑なhtmlもパパッと仕上げることができたりします。

スニペットの作り方

SublimeTextのメニューから「ツール」→「スニペット追加」から登録することができます。
スニペットを追加しようとすると、テンプレートのファイルが新しく展開されるので、このテンプレートを編集して作っていくことになります。

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

主に編集していくのは2カ所、<content></content>部分と<tabTrigger></tabTrigger>部分です。

<content></content>には「呼び出したいコード」を。

<snippet>

1行目はスニペットの設定全体を囲むタグです。

<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>

2行目の<content>タグに囲まれた部分が、展開後の内容を記入する箇所です。
CDATA[と]]>の間にあるのはサンプルコードで、このサンプルコードを削除して登録したいテンプレートを記述します。

CDATA内では改行も含めて、記述したものがそのまま使われるので、余分な改行などをしないようにするのがポイントです。

${1:this} とか ${2:snippet} はスニペットを展開したときにカーソルが存在する位置を指定するためのものです。

トリガーを入力してスニペットを展開したときの
カーソル位置を ${数値:選択済みにする単語} で指定することができます。

選択済みにする単語はなくてもスニペットを登録することができますが、うまく使うことでさらにスニペットの効率を上げることができそうです。

<tabTrigger></tabTrigger>

<!-- <tabTrigger>hello</tabTrigger> -->

ここには<content>タグの中に書いたスニペットを呼び出すときに使うトリガーを登録します。
サンプルコードの「hello」を削除して、代わりに使いやすいトリガーを設定しましょう。
ちなみにコメントアウトのタグも削除しないといけませんが「⌘+/」で一発です。

<scope></scope>

<scope>の部分には、 このスニペットが有効になるファイルのモードを指定します。

たとえばここに、text.htmlと書けばhtmlファイルでしか呼び出すことのできないスニペットファイルになる、みたいにある特定のファイルのモードでしか有効にならないスニペットを作ることができます。

いろいろなモードのファイルを使う人が同じトリガーでスニペットを使い分けることができる感じです。

なにも指定しない場合は、どんなファイルでも常に有効なスニペットになります。

ぼくはブログ記事を書くときにマークダウン記法で書いているので、そんなときはscopeタグにtext.html.markdownと書いてスコープを指定します。
自分がいま書いているファイルだけで有効なスニペットにしたい場合、どんなスコープを指定しておけばよいのかは、スニペットを有効にしたいファイルを開いた状態で「⌘+Option+p」で画面下部のバーにそのファイルのモードが表示されます。

ちなみにcssの場合は「source.css」、Rubyの場合は「source.ruby」、普通のテキストファイルの場合は「text」です。

複数のモードを指定する場合は「text.html,source.css,source.ruby,…」みたいな感じでコンマで区切れば大丈夫です。

スニペットを保存する

スニペットファイルを作ったら、忘れずに保存です
保存先はmacの場合は「~/Library/Application Support/Sublime Text 2/Packages/User」に保存します。
保存を選択すれば、デフォルトでこのフォルダに保存されるようになっていると思うので、深く考えずとも大丈夫かと。

保存するときに拡張子を忘れずにつけておきます。
つける拡張子は.sublime-snippetです。

保存できたらスニペットファイルは閉じても大丈夫です。SublimeTextを再起動しなくても、使い始めることができます。

スニペットを変更するには

一度作ったスニペットを実際使ってみて改良していくことで、もっと効率的なものにすることができます。
変更する場合は、保存先のフォルダ(自作のスニペットは~/Library/Application Support/Sublime Text 2/Packages/Userに保存されています。)からファイルを開いて変更すればOKです。

トリガーを忘れた…

たまに、というかどっちかというとよく、指定したトリガーを忘れます。

そんなときは慌てず騒がず、メニューの「ツール」>「スニペット」を選択しましょう。
スクリーンショット(2015-08-30 6.35.59).png
登録してあるスニペットが一覧で表示されるので、その中から見つけ出します。
トリガーはその右側に書かれています。

効率的に書こうと思って、スニペットに登録したのに逆に非効率になってしまった!と自省しつつトリガーを頭に刻み込むようにします。

スニペットの一覧をクリックして、コードを記入することもできます。

注意すること

スニペットはひとつのファイルに複数のスニペットを登録することはできません。
ひとつのスニペットにつき、1ファイルが必要になります。

まとめ

スニペットを登録しておけば、毎回同じようなコードを書く手間が省けます。
ひとつひとつはそんなに時間がかかる作業でなくても、ちりも積もれば山となって、膨大な時間を浪費しているなんてことになってしまいます。

記事を書く手間は徹底的に省いて、書く内容を精査したり読みやすく推敲したりする時間が作れるとよいんだろうなあ、と思いつつきょうのところは試合終了。

スポンサードリンク

この記事が気に入ったら
いいね!しよう

Twitter で

PAGE TOP