Atomでのスニペット登録

現在は、普段使いでAtomを使用していて自分でスニペット作りたいなと思っていたんですが、
あまり方法がよくわからず足止めをくらっていました。

本日ようやく時間があり、スニペット登録方法が分かりました(遅い)

チームでの開発だと、お決まりの型でコード書く事が多くなるのでスニペット登録は重要ですよね。

snippet.csonへの追加

Atom > Open Your Snippetsから、snippet.csonというファイルを開きます。
ここに、自分の入れたいスニペットを登録してゆきます。

ただ、このsnippet登録の際に、スニペットを適用するセレクタが必要で、

htmlであれば
text.html.basic
jsであれば
source.js

のような感じで、値が必要になります。
これを手っ取り早く知る方法として、スニペットを登録したいコードにカーソルを当てている状態で、

alt + command + p

を押してください。そうすると画面右上に↓画像のような値が表示されます。

スクリーンショット 2015-07-10 20.32.35

あとは、csonでスニペットを下記のように指定してゆきます。

※ここで注意点として、表示された値の前に必ず”.”ドットを入れてください。画像のsource.css.lessであれば.source.css.less (下記参考)

'.text.html.basic':
  'sampleSnippet':
    'prefix': 'sample'
    'body': '<div class="sampleBox">${1: sampleTxt1}></div><div class="sampleBox2">${2: sampleTxt2}</div>'

‘sampleSnippet’はスニペット名なので何でも良いと思います。
prefixは、このスニペットを展開する際に入力するテキストです。今回は’sample’としました。

bodyは実際の展開内容です。

上記の${1: sampleTxt1}はスニペット展開後にカーソルが入り入力できるようになるスペースです。
tabで${2: sampleBox2}に入力フォーカスが移動します。

複数行のbodyを書く場合

チームで使用しているお決まりなコードが1行で収まる事は割と少ない気がします。
その場合はbodyに”””をつけると複数行のbodyがかけます。

'.source.js':
  'basicTlp':
    'prefix': 'basicTlp'
    'body': """
        (function(window, undefined) {
            var ${1: value} = window.gf.${1: value} || {};

            ${1: value} = {

            };

            window.gf.${1: value} = ${1: value};
            $(function(){

            });
        })(window);
    """

自分はjsで使用しそうな上記のような書き方でスニペット登録をしています。

以上、わかれば対したことない内容でした。。(´・ω・`)