Applications

Sublime Text3がさらに快適になるスニペット登録で工数削減

2017.11.01

パーツ

Sublime Textはパッケージで色々なスニペットが配布されていますが、
オリジナルで登録する事も可能です。スニペットの登録はちょっと面倒に感じてしまうかもしれませんが、一度登録しておくと手癖になり、見違えるほどコーディングが捗りますよ!

スニペットの登録

新規スニペット

スニペットの登録は、Tools > Developer > New Snipeptから行います。するとスニペットの雛形みたいなファイルが開きますので、スニペットを登録します。下記がデフォルトです。

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

私はよく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> の中にスニペットが呼び出される中身を記述します。

${1:}${2}はフォーカスされる場所です。展開時は1がフォーカスされています。tabで2にフォーカスが移ります。必要ない場合は設定しなくても大丈夫です。

<content><![CDATA[
  <?php if (get_post_type() === '${1:}'): ?>
    ${2}
  <?php endif; ?>
  ]]></content>

トリガーの記述

トリガーはスニペットを呼び出すためのコマンドみたいなものです。任意に決めることが出来ます。
下記の例では ifptと入力した後にtabキーを押すと、contentの中身が展開します。

<tabTrigger>ifpt</tabTrigger>

スコープの設定

スコープでは言語を設定します。例のようにコメントアウト、記述しなければ全ての言語で利用出来ます。以下の記述ですとphpで呼び出すことができます。複数の言語を指定するときはカンマで区切ります。

<scope>source.php</scope>

スコープは設定しなくても大丈夫なのですが設定することにより複数の言語を使うときの取り回しがよくなります。

Web用途で使いそうなスコープ
  • CSS: source.css
  • HTML: text.html
  • JSP: text.html.jsp
  • JSON: source.json
  • Javascript: source.js
  • LESS: source.css.less
  • TeX: text.tex
  • Perl: source.perl
  • PHP: source.php
  • Python: source.python
  • Ruby on Rails: source.ruby.rails
  • Ruby: source.ruby
  • SASS: source.sass
  • XML: text.xml

さらに詳しくは以下のリンクを参照ください。

拡張子を.sublime-snippetで保存

作成したスニペットは拡張子を.sublime-snippetにして下記のディレクトリに保存しておくと良いでしょう。

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

手グセをつければかなりの速さが期待できる

スニペット設定時はあれもこれもとなるのですが、いざ使い出すとそんなに使わないスニペットも存在します。しかし、手グセのついたスニペットは自然と使いますので、かなりの工数削減に繋がっているはずです。それも設定するところからスタートなので思いつく限り設定してもいいと思います。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する