Atomのスニペット機能

開発をしていると、しばしば同じようなコードを書く機会が出てきます。
頻出の書き方はスニペットを利用したほうが、ストレスが少なく且つすばやくコーディングできます。
この記事では私が毎回入力に手間取っている「<%= %>」について、スニペット登録する方法をまとめます。

設定方法

Atomを起動し、ファイルメニューから「Snipets...」を選択します。
「snipets.cson」というファイルが開くので、その中身を編集していきます。
このファイルの中には定義の例が記載してあります。

# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'

上記に沿って定義して上げる必要があります。
今回は「<」と入力した際に「<%=%>」と表示されるように設定します。
下記のようになります。

'.text.html.erb':
  '<':
    'prefix': '<'
    'body': '<%=$1%>'

１つずつ説明していく。

セレクタ

'.text.html.erb':

今回は、拡張子が「.html.erb」となっているファイルにコーディングする際にスニペットとして表示されるようにします。
セレクタはAutocomplete Providersで確認することができます。
セレクタに入力する文字列は決まり事なので、このリンクに記載されている中から該当する文字列を入力しましょう。

スニペット名

  '<':

スニペット名は、他のスニペット名とカブらなければなんでもOK。
困ったらPrefixと同じ文字列を入力しておけばよいです。

Prefix

    'prefix': '<'

今回は「<」と入力したときに発動してほしいため、上記のように入力しています。
ここは自分の入力しやすいように設定してもらえればよいです。

body

    'body': '<%=$1%>'

表示したい内容を登録します。
「\$1」と入力しておくと、スニペットが入力したあと「\$1」の位置にカーソルが移動します。
入力後にカーソルを移動させたい部分まで指定することで、効率よくコーディングすることが可能です。

設定情報反映

設定を反映させるには、「snipets.cson」を保存すれば良いです。
Atomを再起動させる必要はありません。
繰り返し何度も入力するような文字列がある場合は、積極的にスニペットを活用して効率よくコーディングしましょう！