Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

AtomのSnippet開発

f:id:tbpg:20160615224031j:plain

AtomのSnippet開発についてまとめます。

AtomのSnippetについて

Snippetは繰り返しタイプするコード片を素早く入力するのに便利です。
Snippetでは以下の様な機能があります

コード片の展開後に任意の箇所にカーソルを移動する

展開後に特定の位置にカーソルを移動することができます。

f:id:tbpg:20160615223824g:plain

コード片の複数の箇所をタブ移動できる

複数の箇所のタブ移動が可能です。
また Placeholder を設定することも可能です。

f:id:tbpg:20160615223832g:plain

コード片のあいまい検索

alt-shift-s でコード片のあいまい検索が可能です。

f:id:tbpg:20160615223844g:plain

Snippetの開発について

Custom Snippet

自身のSnippetを登録する場合は ~/.atom/snippets.cson を編集します。
このファイルは、 Atom のコマンドパレットで Open Your Snippets で開くことも可能です。

デフォルトでは以下のようになっています。

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# https://atom.io/docs/latest/using-atom-basic-customization#cson

Snippet の基本は以下のフォーマットです。

# 対象 scope を指定する。下記は GitHub Flavored Markdown の例
'.source.gfm':
  # Snippet名
  'todo':
    # Snippetのトリガー
    'prefix': 'todo'
    # Snippet本体
    'body': '- [ ] ${1:title}$0'

動作確認してみます。

f:id:tbpg:20160615223858g:plain

body の部分は """ で挟むことで複数行にすることもできます。

Scopeの確認

自分が作りたいSnippetのScopeを確認する場合は、該当拡張子のファイルを開いた状態で コマンドパレットで Editor: Log Cursor Scope を入力します。

f:id:tbpg:20160615223907g:plain

参考資料