AtomのSnippet開発についてまとめます。
AtomのSnippetについて
Snippetは繰り返しタイプするコード片を素早く入力するのに便利です。
Snippetでは以下の様な機能があります
コード片の展開後に任意の箇所にカーソルを移動する
展開後に特定の位置にカーソルを移動することができます。
コード片の複数の箇所をタブ移動できる
複数の箇所のタブ移動が可能です。
また Placeholder を設定することも可能です。
コード片のあいまい検索
alt-shift-s
でコード片のあいまい検索が可能です。
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'
動作確認してみます。
body の部分は """
で挟むことで複数行にすることもできます。
Scopeの確認
自分が作りたいSnippetのScopeを確認する場合は、該当拡張子のファイルを開いた状態で
コマンドパレットで Editor: Log Cursor Scope
を入力します。