2017.04.03 Mon

Sublime Textのスニペットを活用してよく使うコードを簡単入力!

170403_snippet_thum
こんにちは!
いつもジーニアスウェブのブログを読んでいただきありがとうございます。
待ちに待ったプロ野球がようやく開幕して、色々忙しいスギタです。

さて、コーディングをやっていると、
「あれ・・このコード・・・この間も別の案件で書いたな・・」
な~んてことはありませんか?

例えば、CSSのベンダープレフィックス。
今は記述が必要なプロパティは減ってはきましたが、
同じコードを毎回書くのって面倒ですよね。

そんなときにとても便利な「スニペット」機能。
今回はこのスニペットについて、Sublime Textを使用してご紹介させていただきます。

 

スニペットって何なの?

スニペットとは、自分が登録した任意の文字を入力すると、
よく使うHTML, CSS, jsなどのコードをパパパッと呼び出すことができます。

例えば、以下のコードを呼び出したいとき
170403_snippet06

私の設定では、[CSS]と打つと、登録されているスニペットの候補が出てきます。
そして、自分が使いたいものを選択 + [tab]を押すだけで
CSSファイル上に、コードが一気に挿入されます。

 

スニペットを登録しよう

それでは、上記で使用したスニペットの登録手順を説明いたします。

(1) メニューのツール(Tools)>スニペット追加(New Snippet)を選択。
170403_snippet01

(2) すると以下コードが入力された新しいファイルが開きます。
170403_snippet05

(3) (2)で開いたタブ内の下記の箇所を編集します。
<content>
呼び出したいコード。
<![CDATA[ と ]]> の間にコードを書きます。

<tabTrigger>
スニペットを呼び出すためのトリガーとなる文字列。
覚えやすいものにしておくと良いですね。

<scope>
スニペットを呼び出すファイル形式。
例えば、CSSのコードは.cssファイル内だけで表示させたいときは、
<scope>source.css</scope> とします。
,(カンマ)で区切ると、複数指定も可能です。

<description>
スニペットの候補が出てきたときに表示される説明文。
はじめはこの項目はないのですが、追加することができます。
複数の候補が出てきたときに見つけやすくなりますので、
追加しておくことをおすすめいたします。

ちなみに、上記設定は省略可能です。
設定したい場合はコメントを外し、
何も設定させたくない場合はコメントのままにします。

設定後はこのようになりました。
170403_snippet00

 

スニペットを保存

先ほど設定したファイルを保存します。
設定ファイル名は何でもOKですが、拡張子は必ず .sublime-snippet とつけましょう。

また、設定ファイルの保存場所が決まっています。
「Packages」フォルダ以下ならどこでもOKです。
私は「Packages/user」内に「Snippets」というフォルダを作りまとめて保存しています。

 

スニペットを呼び出してみよう

スニペットを呼び出したい箇所で、[css(<tabTrigger>で設定した名前)]と打つと登録したスニペットの候補が出てきます。
170403_snippet03

該当するスニペットを選択して[tab]を押すと・・・

コードが挿入されました!
170403_snippet04

 

さいごに

いつも使うコードはテンプレートなどからコピペするのも良いですが、
スニペットを上手く活用して、快適コーディングをしたいものですね。
作業の時間短縮にもなるのではないでしょうか。

また、今回はSublime Textを使用して紹介させていただきましたが、
Dreamweaverなどでもスニペット機能があります。

ちなみに、スニペットは無料で配布されているものもありますので、
自分で登録するのは面倒だわ・・・という方は、
配布されているものを使ってみるのも良いかもしれません。

それでは、また。

WRITERこの記事を書いた人

杉田

杉田

大阪オフィスで主にフロントエンドを担当しています。

大阪オフィスで主にフロントエンドを担当しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW