【Atom】スニペットを登録する方法!!

プログラミング

今回は Atom のスニペットについて解説したいと思います。

スニペットとは入力したいコードを補完してくれる機能のことで、この機能を使うことによって、より早くコードを書くことができます。

スポンサーリンク

登録方法

ファイルを開く

登録方法を解説していきます。

まず、Atomを開き[ファイル]→[スニペット]を選びます。

[スニペット]を選ぶと下のような画面が表示されると思います。

このファイルに登録していきます。コメントアウトしている場所は触らずに下に追加していきましょう。

完成図

では登録していきましょう。

まずは完成図から見ておきましょう。

これはメディアクエリのスニペットです。メディアクエリの構文はとても長くて覚えていられなかったので、登録しました。

では、これを参考に話を進めていきたいと思います。

スニペットの書き方

スニペットの書き方は、

‘ファイル形式’;
‘スニペット名’:
  ’prefix’; ‘スニペットを呼び出すために入力する文字列’
  ’body’: ‘展開する内容’

https://rfs.jp/sb/atom-github/atom05_snipet.html

となっています。一つづつ行きます。

ファイル形式

ファイル形式とは「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を複数行書きたい場合は「”””」で囲うようにしてください。

また、カーソルが「$1」のところに自動で移動します。)

注意点

注意点としては

  • 「スニペット名」の前はスペース1つ分
  • 「prefix」,「body」の前はスペース4つ分

開けなくてはいけないというところです。

これを怠るとエラーになります。

参考

スニペット登録 - Atom講座 - [SMART]
スニペットの使い方 Atomにはデフォルトでスニペットという便利な機能が用意されています。スニペットとは入力補完候補のことで、この機能を使うと頻繁に使うコードなどをショートカットキーで簡単に呼び出せて便利です。 たとえばHTMLファイルをAtomで開き、「textarea」と入力すると次のようにコードヒントが表示されま...
atom スニペット登録 - Qiita
atom version 1.8.0 > # html、phpの場合 '.text.html.php,.text.html.basic': 'html title': 'prefix': ...
atom/autocomplete-plus
View and insert possible completions in the editor while typing - atom/autocomplete-plus
タイトルとURLをコピーしました