AtomのSnippetについて
- デフォルトで組み込まれている機能
- 頻繁に使うコード・単語などを登録しておき、簡単に呼び出すことができる
追加方法
追加ファイル
- 「Atom > Snippet」で表示される「snippets.cson」が対象ファイル
- snippets.csonの場所は「~/.atom/snippets.cson」
- csonは「CoffeeScript-style JSON」の略。よってCoffeeScriptのルールにそったインデント設定が必要
追加手順
- 「Atom > Snippet」で「snippets.cson」を開く
- コードを追記・保存で完了
記述例
その1：調整不要なコードを端的に呼び出す場合
デモ
コード
'.text.html.basic':
'my css (Lato font)':
'prefix': 'lato'
'body': """
@import url(http://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
body{font-family:Lato, sans-serif;font-weight:300;font-size:16px;line-height:150%;color:#000;padding:30px}
h1{font-size:28px;font-weight:700}
a{color:#000;background:#c5ced9;text-decoration:none;}
a:hover{color:#000;background:#ff0;text-decoration:none}
"""
解説
-
.text.html.basic：htmlファイル上で有効になるように設定。あらゆるファイルに対応するには「*」を設定。尚こちらの調べ方は以下の2つの方法がある
- Snippetとして追加したい文字列を選択し、「alt+command+p」を実行
- Autocomplete Providers · atom/autocomplete-plus Wiki
'my css (Lato font)'：以下prefixで設定した文字列を入力した際の候補表示名
'prefix': 'lato'：呼び出す際の入力文字列。ここではhtmlファイル上で「lato」を入力すると表示される
その2：tabで調整箇所をジャンプできるように設定する場合
デモ
コード
'*':
'news template':
'prefix': 'news'
'body': """
<!DOCTYPE html>
<html><head>
<title>${1:タイトル}</title>
</head>
<body>
<h1>${2:記事タイトル}</h1>
${3:本文}
</body>
</html>
"""
解説
- Sublime Text同様「${1:◯◯}」という形式で記述する