Atom講座

スニペット登録

2015年12月16日

スニペットの使い方

Atomにはデフォルトでスニペット機能が用意されています。
スニペット機能を使うと、頻繁に使うコードなどをショートカットキーで簡単に呼び出すことができます。

例えばHTMLファイルをAtomで開き、textareaと入力すると次のようにコードヒントが表示されます。

snipet_test

ここで [Enter] で確定すると、次のコードが挿入されます。

<textarea name="name" rows="8" cols="40"></textarea>

スニペットの追加手順

Atomにはデフォルトで様々なスニペットが登録されていますが、拡張して新しいスニペットを追加したり、既存のスニペットを変更することができます。

スニペットのフォーマット

Atomのメニューから [ファイル]-[スニペットを開く] を選択すると、スニペットを編集するためのファイル snippets.cson(CoffeeScript-Object-Notation) が開かれます。
snippets.cson にコメントアウトで記載されているように、スニペットの登録フォーマットは下記になります。

'.source.coffee':
'Console log':
'prefix': 'log'
'body': 'console.log $1'
セレクタ

トップレベルのキー '.source.coffee' はスニペットを有効にするセレクタ(CoffeeScript)を指定しています。
よく使うセレクタだと下記のようなものがあります。

# html
.text.html.basic
# JavaScript
.source.js
# CSS
.source.css
# PHP
.text.html.php

スニペットを追加したいファイル形式をAtomで表示し、[Ctrl]+[Alt]+[Shift]+[P] を入力すると下記のようなポップアップが表示されてセレクタ名を知ることができます。

snipet_scope

セレクタ名はAutocomplete Providersにも一覧があるので、参考にしてください。

スニペットの名前

次のインデントのキー 'Console log' はスニペットの名前で、ここで指定した名前がコードヒントとして表示されます。

キー

'prefix' はスニペットを展開する際に入力するキーで、'prefix': 'log' であれば編集画面で log と入力することでこのスニペットを呼び出すことができます。

本文

'body' の値にはスニペットとして出力したい内容を指定します。ここでは 'console.log $1' としているので、console.log と出力されます。
$1 はスニペット展開後のカーソル位置を意味します。

次のように記載すると、test が選択状態でカーソルが入り、[Tab] で $2 の場所にカーソルが移動します。

'.source.coffee':
'Console log':
'prefix': 'log'
'body': 'console.log(${1:"test"});$2'

複数セレクタにスニペットを登録

例えばHTMLとPHPの両方にスニペットを登録したい場合、セレクタをカンマで区切って指定できます。
下記ではHTMLとPHPのセレクタを指定しています。

'.text.html.basic, .text.html.php':

複数行のbodyを書く場合

bodyの値を """ で囲うと複数行書くことができます。

'.text.html.basic':
'OGP':
'prefix': 'zogp'
'body': """
<meta property="og:title" content="$1">
<meta property="og:type" content="$2">
<meta property="og:url" content="$3">
<meta property="og:image" content="$4">
<meta property="og:site_name" content="$5">
<meta property="og:description" content="$6" />
<meta property="fb:app_id" content="$7">
"""

この指定で、HTMLの編集時に zogp と入力するとコードヒントにスニペットの名前 OGP が表示され、[Enter] で body に設定したOGPタグが挿入されます。

複数のスニペットを登録する際の注意点

例えばHTMLのスニペットを多数追加したい場合、次のように '.text.html.basic': の下に複数指定します。

'.text.html.basic':
'スニペット名1':
'prefix': 'キー'
'body': '値'
'スニペット名2':
'prefix': 'キー'
'body': '値'

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。