今回は Atom のスニペットについて解説したいと思います。
スニペットとは入力したいコードを補完してくれる機能のことで、この機能を使うことによって、より早くコードを書くことができます。
登録方法
ファイルを開く
登録方法を解説していきます。
まず、Atomを開き[ファイル]→[スニペット]を選びます。
[スニペット］を選ぶと下のような画面が表示されると思います。
このファイルに登録していきます。コメントアウトしている場所は触らずに下に追加していきましょう。
完成図
では登録していきましょう。
まずは完成図から見ておきましょう。
これはメディアクエリのスニペットです。メディアクエリの構文はとても長くて覚えていられなかったので、登録しました。
では、これを参考に話を進めていきたいと思います。
スニペットの書き方
スニペットの書き方は、
‘ファイル形式’;
https://rfs.jp/sb/atom-github/atom05_snipet.html
‘スニペット名’:
’prefix’; ‘スニペットを呼び出すために入力する文字列’
’body’: ‘展開する内容’
となっています。一つづつ行きます。
ファイル形式
ファイル形式とは「html」や「css」など、そのスニペットを使いたいファイルのことです。
今回の場合、メディアクエリのスニペットはcssで使いたいので
‘.source.css’となっています。
スニペット独特の書き方なので戸惑うかもしれませんが我慢して書くほかありません…。
こちら でhtmlやphpなどほかのファイル形式の書き方も見ることができます。
基本的なファイル形式は載せておきます。
html → .text.html.basic
css → .source.css
JavaScript → .source.js
php → .text.html.php
スニペット名
スニペット名は展開するときの目印です。
今回の場合は「レスポンシブ」がそれにあたります。
prefix＆body
prefixは展開するにあたって入力するキーのことです。
今回の場合は「med」と入力することで
bodyの
@media screen and (max-width:480px){
}
が展開されます。
一瞬で展開できます。すごい！！
（bodyを複数行書きたい場合は「”””」で囲うようにしてください。
また、カーソルが「＄１」のところに自動で移動します。）
注意点
注意点としては
- 「スニペット名」の前はスペース１つ分
- 「prefix」,「body」の前はスペース４つ分
開けなくてはいけないというところです。
これを怠るとエラーになります。
参考
