Atomでスニペットを登録するための手順をメモしておく。

スニペットの定義

ファイルメニューからスニペットを選択し、snippets.csonを開く。このファイルにスニペットを定義していく。

コメント行の真ん中あたりに定義の例が書いてある。

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

各行には以下を設定する。

説明
1 ’.source.coffee’: セレクタ
2 ‘Console log’: スニペット名
3 ‘prefix’: ‘log’ スニペットを展開するために入力する文字列
4 ‘body’: ‘console.log $1’ 候補から選択した時に展開する内容

セレクタ

セレクタには以下のようなものがある。

ファイルの種類 セレクタ
md .source.gfm
CSS .source.css
HTML .text.html.basic
JavaScript .source.js
CoffeeScript .source.coffee

セレクタはAutocomplete Providersで一覧を見ることができる。

Atomから確認する場合は、Ctrl+Shift+Pでコマンドパレットを開き、”scope”でフィルターをかけてEditor:Log Cursor Scopeを選択する。

snippet1

すると、現在開いているファイルのセレクタを確認できる。 例えば、mdファイルを表示した状態で確認すると以下のように表示される。

snippet2

セレクタを指定する場合は、ここで表示されたセレクタの前に”.“(ドット)をつけて.source.gfmのようにする必要がある。

複数のセレクタに同じスニペットを定義したい場合は、セレクタをカンマ区切りで指定する。

'.source.js, .source.coffee':

スニペット名

スニペット名はどんな名前でもよいがコードヒントとして以下のように右側に表示されるのでわかりやすい名前にする。

snippet3

prefix

スニペットを展開するために入力する文字列で、上記の例であれば、logと入力するとスニペットの候補が表示される。

body

展開する内容を指定する。展開後のカーソル位置は$1、$2、$3というふうに複数指定できる。

body 展開後
‘console.log $1’ $1にカーソル位置が移動
‘console.log $1;$2’ $1にカーソル位置が移動し、Tabで$2に移動
‘console.log(“${1:msg1}“);$2’ msg1が選択状態になり、Tabで$2に移動

bodyに複数行指定する場合は、以下のように"""で囲って書く。

mdファイルで3×3のテーブルを展開するスニペットの例。

'.source.gfm':
   'Table33':
     'prefix': 'table33'
     'body': """
     | ${1:Header One}     | ${2:Header Two}     | ${3:Header Three}   |
     | :------------- | :------------- | :------------- |
     | ${4:Item 1}         | ${5:Item 2}         | ${6:Item 3}         |
     | ${7:Item 4}         | ${8:Item 5}         | ${9:Item 6}         |
"""

セレクタに対して、スニペットを複数指定する場合は、以下のようにセレクタの後、スニペット以降を繰り返して書く。

'.source.js':
  'Test1':
    'prefix': 'test1'
    'body': 'test1($1)'
  'Test2':
    'prefix': 'test2'
    'body': 'test2($1)'

参考サイト