Atomにスニペット登録をして快適にマークアップ

Atomでブログの原稿を執筆するという贅沢な使い方をしておりまして、Atomの使い方にも、ちょっとずつ慣れてきました。慣れてくると、あんなことできないかなぁ？こんなことできないかなぁ？と考える余裕もでてきまして、とりあえずスニペットを登録してみることにしました。

スニペット登録

1. メニューバーのAtom>スニペットを開くで設定ファイルを開く
2. 設定ファイルにスニペットを登録する

手順的にはすごくシンプルです。

スニペット登録の書式

スニペットの登録はsnippets.csonに以下の書式で追加していきます。

単一行の場合

  'セレクタ':
    'スニペット名':
      'prefix': 'トリガー'
      'body': '展開内容'

複数行の場合

  'セレクタ':
    'スニペット名':
      'prefix': 'トリガー'
      'body': """
      展開内容が
      入ります。
      """

同じセレクタにスニペットを複数登録する場合

複数登録する場合は、インデントに注意してください。スニペット名のインデントがずれているとうまく機能しません。

  'セレクタ':
    'スニペット名1':
      'prefix': 'トリガー'
      'body': '展開内容'
    'スニペット名2':
      'prefix': 'トリガー'
      'body': '展開内容'

セレクタについて

スニペット登録に必須のセレクタですがファイルによって異なります。例えばphpで登録したスニペットをhtmlでつかうことはできません。ファイルを開いている状態でcommand+option+pでセレクタを調べることができます。

登録したスニペットを複数のセレクタで使う場合は、カンマで区切って複数指定すればOKです。以下僕的によく使うセレクタ。

HTMLファイル

.text.html.basic

PHPファイル

.text.html.php

CSSファイル

.source.css

JavaScriptファイル

.source.js

記述例

記述例として僕が最初に登録したスニペットです！

  '.text.html.php,.text.html.basic':
    'prettyprint':
      'prefix': 'pe'
      'body':"""
      <pre class="prettyprint">
      $1
      </pre>
      """

シンタックスハイライトをgoogle-code-prettifyに乗り換えて原稿を書きながらエンティティを行いたい！と思ってAtomを使いはじめたのだから当然ですよね！

$1の記述がある箇所に展開後フォーカスされます。もっと複数行の場合を押せば$1の次に$2がフォーカスされます

  '.text.html.php,.text.html.basic':
    'prettyprint':
      'prefix': 'pe'
      'body':"""
      <?php if (get_post_type() === '$1'): ?>
      $2
      <?php endif; ?>
      """

これでますますAtomの使い勝手がよくなりました！