開発効率アップ!Sublime Textのスニペット機能の使い方(登録方法など)

Sublime Textのスニペットを登録する方法の紹介です。

Sublime Textでは、よく利用するようなスニペットは、デフォルト状態で登録されてはいます。なので、軽く利用するだけでは、特に登録する必要もないかもしれません。

ただ、いろいろ使っていると、自分のよく使うフレーズなどは分かってきます。そういったときに、少しのキータッチで多くのコードを入力できるので、開発効率向上の助けになります。

スポンサーリンク
レクタングル(大)広告

スニペット機能とは

スニペットというのは、少しのキーボード入力をトリガーとして、よく利用するコードなどを手軽に書き込むことができる機能です。

例えば、以下はたった3文字「ife」と入力してtabキーを押すだけで、PHPなどでよく利用する「埋め込みif else条件分岐」を展開しています。

Sublime Textのスニペット機能

<?php if (condition): ?>
  
<?php else: ?>
  
<?php endif ?>

本来なら、これだけのコードを書くには、50以上のキータッチは必要です。けれど、スニペット機能を利用すると、わずか「ife+tabキー」の4回のキータッチで済むことになり、入力の負担を大幅に減らすことができるようになっています。

Sublime Textでスニペットを登録する

以下では、Sublime Textでのスニペットの登録方法を紹介します。

主な手順

スニペット登録に必要な主な手順は以下のようになっています。

  1. 新しいスニペットの作成
  2. 展開されるコードの入力
  3. トリガーの入力
  4. スニペット呼び出し(スコープ)の設定
  5. スニペットの保存

Sublime Textの、スニペット登録は、ユーザーインターフェースを使わず、テキスト編集する形での登録になるので、ちょっと取っつきにくいです。

けれど、1つ1つ順を追って、行えば、そこまで難しくはないと思います。

新しいスニペットの作成

まずは、Sublime Textのメニューから新しいスニペットを作成します。

メインメニューの「Tools(ツール)→New Snippet(スニペット追加)」を選択してください。

Sublime Textのスニペット追加

すると、以下のようなスニペットのテンプレートが表示されます。

<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>内にコードの設定
  • <tabTrigger>内に呼び出し文字(トリガー)の設定
  • <scope>内にスニペットを呼び出す言語の設定

これらについては、以下で詳しく説明します。

展開されるコードの入力

まずは、スニペットの雛形で言えば以下の部分のコード入力方法です。

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

<content>タグ内の <![CDATA[]]> の間にコードを書きます。

冒頭で書いた「埋め込みif else条件分岐」を例とすると以下のように記入します。(※この条件分岐は、デフォルトで登録されていますが、今回は例として紹介します。)

<content><![CDATA[
<?php if ( ${1:condition} ): ?>
  ${2}
<?php else: ?>
  ${3}
<?php endif ?>
]]></content>

まずは、コードを記入してしまいます。

そして、最初にカーソルを置きたい位置に${1}と記入します。

上記の例では、${1:condition}となっていますが、デフォルト値を設定しておきたい場合は、${1:text}のように設定します。

コードが展開され、まずキャレット(入力カーソル)が行く場所は、${1}になっています。デフォルト値が設定されていれば、そのテキストが選択状態になります。

その後、タブを押すたびに${2}、${3}とキャレットが移動します。

トリガーの入力

次は、スニペットの雛形で言えば以下の部分、トリガーの設定です。

<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->

<tabTrigger>タグがある行のコメントを外し、トリガーとなる文字列を入力します。

例えば先程の「埋め込みif else条件分岐」を例にすると、以下のように入力します。

<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>ife</tabTrigger>

トリガーは、利用者が覚えやすい文字列なら、何でも良いと思います。

スニペット呼び出し(スコープ)の設定

設定の最後は、スニペットの雛形で言えば以下の部分、スコープの設定です。

<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->

<scope>タグがある行のコメントを外し、スコープとなる文字列を入力します。

例えば先程の「埋め込みif else条件分岐」を例にしてPHPやHTMLで呼び出すとするならば、以下のように入力します。

<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.php,text.html</scope>

複数の言語(モード)から呼び出す場合は、スコープ文字列を,(カンマ)で区切って入力します。

各言語(モード)のスコープ文字列は、以下のようになっています。

  • ActionScript: source.actionscript.2
  • AppleScript: source.applescript
  • ASP: source.asp
  • Batch FIle: source.dosbatch
  • C#: source.cs
  • C++: source.c++
  • Clojure: source.clojure
  • CoffeeScript: source.coffee
  • CSS: source.css
  • D: source.d
  • Diff: source.diff
  • Erlang: source.erlang
  • Go: source.go
  • GraphViz: source.dot
  • Groovy: source.groovy
  • Haskell: source.haskell
  • HTML: text.html(.basic)
  • JSP: text.html.jsp
  • Java: source.java
  • Java Properties: source.java-props
  • Java Doc: text.html.javadoc
  • JSON: source.json
  • Javascript: source.js
  • BibTex: source.bibtex
  • Latex Log: text.log.latex
  • Latex Memoir: text.tex.latex.memoir
  • Latex: text.tex.latex
  • LESS: source.css.less
  • TeX: text.tex
  • Lisp: source.lisp
  • Lua: source.lua
  • MakeFile: source.makefile
  • Markdown: text.html.markdown
  • Multi Markdown: text.html.markdown.multimarkdown
  • Matlab: source.matlab
  • Objective-C: source.objc
  • Objective-C++: source.objc++
  • OCaml campl4: source.camlp4.ocaml
  • OCaml: source.ocaml
  • OCamllex: source.ocamllex
  • Perl: source.perl
  • PHP: source.php
  • Regular Expression(python): source.regexp.python
  • Python: source.python
  • R Console: source.r-console
  • R: source.r
  • Ruby on Rails: source.ruby.rails
  • Ruby HAML: text.haml
  • SQL(Ruby): source.sql.ruby
  • Regular Expression: source.regexp
  • RestructuredText: text.restructuredtext
  • Ruby: source.ruby
  • SASS: source.sass
  • Scala: source.scala
  • Shell Script: source.shell
  • SQL: source.sql
  • Stylus: source.stylus
  • TCL: source.tcl
  • HTML(TCL): text.html.tcl
  • Plain text: text.plain
  • Textile: text.html.textile
  • XML: text.xml
  • XSL: text.xml.xsl
  • YAML: source.yaml

参考 Sublime Text 2: Snippet scopes

スニペットの保存

最後に、これまで編集したスニペットを保存します。

このとき、スニペットを保存するファイルの拡張子は「.sublime-snippet」にする必要があります。設定を保存する場所は、Sublime Textの設定ファイルがあるフォルダの「Packages」より下であればどこに保存してもOKです。

「Packages」フォルダ以下に「MySnippets」というフォルダでも作成して、そこに保存していけば良いかと思います。

「Packages」フォルダがある場所は、それぞれの環境で以下の位置にあります。

WindowsのSublime Text 3

インストーラー版Sublime Text 3の「Packages」フォルダのパスは以下。

C:/Users/ユーザー名/AppData/Roaming/Sublime Text /Packages

MacのSublime Text 3

Mac版のSublime Text 3の「Packages」フォルダのパスは以下。

ユーザー名/Library/Application Support/Sublime Text 3/Packages

ポータブル版Sublime Text 3

ポータブル版Sublime Text 3の「Packages」フォルダのパスは以下。

インストールフォルダ/Data/Packages

動作確認

スニペットが保存されたら、次からエディター上でトリガーを入力するだけで、コードを呼び出すことができます。(設定によってはCtrl+Spaceを押す必要がある場合もあるけど)

トリガーを忘れてしまった場合は、メニューの「Tools(ツール)→Snippets(スニペット)」を選択します。

Sublime Textでスニペット一覧の表示

すると、その言語(モード)に登録されているスニペット一覧を表示して確認することもできます。

スニペット一覧の表示

まとめ

スニペットは、最初こそ登録が多少面倒かもしれません。

けれど、最初の面倒を乗り越えて登録さえしてしまえば、あとはかなり楽ができます。

僕の個人的な感想としては、以下くらいの違いがあります。

  • 毎年、年賀状を1つ1つ手書きで書く(スニペットなし)
  • 最初だけ住所入力をしてその後は毎年プリントアウトする(スニペットあり)

少し大げさかもしれませんが、毎回同じものを書くのに、毎回最初から書くのは、気分的にかなり面倒くさく感じてしまいます。

あと、今回設定したスニペット設定ファイルなどを複数環境で同期させるには、Dropboxを利用した以下の方法などがおすすめです。

Sublime Textは、パッケージを入れることにより、自分に合った環境を作ることができる自由度の高いエディターです。やろ...

こちらも、最初に設定さえしてしまえば、後から何度も設定をする必要がなくなります。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク