Atomのパッケージにスニペット機能を追加する方法

パッケージ新規作成で作成したAtomパッケージにスニペット機能を追加する

新規作成されたパッケージの構成

Generate Packageで生成されたパッケージの雛形の構成は下記のようになっています。このままではスニペット用のフォルダは存在していません。ちなみにこれらのフォルダやファイルはそれぞれざっくり言うと下記の様な役割を持っています。

この他にスニペットを登録可能なsnippetsや文法を定義してシンタックスハイライト可能なgrammarsが追加可能です。

test-package
├── CHANGELOG.md　　　　　  　-- チェンジログ
├── LICENSE.md　　　　　　    -- ライセンス
├── README.md                -- 説明書
├── keymaps/                 -- パッッケージのキーマップ
├── lib/                     -- その他多くの機能
├── menus/                   -- メニュー表示系
├── package.json             -- パッケージの情報
├── spec/                    -- パッケージのテスト
└── styles/                  -- パッケージのスタイルシート

スニペットの作成

スニペットについて書いているファイルはsnippets内に置く必要があるのでフォルダを作りその中にjsonまたはcson形式でスニペットを書いていきます。
今回はcsonでやってみたいと思うのでfoo.csonを作成したsnippets内に作ります。

test-package
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── keymaps
├── lib
├── menus
├── package.json
├── snippets                  　　　-- 各自作成する
│   └──foo.cson もしくは foo.json   -- ここに色々書く
├── spec
└── styles

作成したfoo.csonには以下のように登録したいスニペットを書いていきます。今回は3種類のスニペットを登録します。

foo.cson

'.source.gfm':
  'foo' :
    'prefix' : 'bar'
    'body' : 'baz'
  'link url' :
    'prefix' : 'url'
    'body' : '[${1: title}](${2: URL})'
  'code box' :
    'prefix' : 'code'
    'body' : """
      ```
      ${1: code}
      ```
    """

.source.gfmはスニペットを有効にするセレクタを指定していて今回はMarkdownを指定しています。

fooはスニペット名を意味していてbarはスニペットを展開する時に使用するキー、bazは展開される本文を意味しています。

スニペット本文内に${1: tittle}や${2: URL}と埋め込むことでtabによるカーソル移動の順番も設定できます。

スニペット本文は複数行展開にも対応していて本文を"""で囲むことにより展開可能になります。

Atomを再起動すればこれらのスニペットが有効になっていると思います、手軽に実装できるので是非試してみてください。