Atomのスニペット機能で複数行定番コードのコーディング効率をアップさせる方法

コーディング作業中に、長いプロパティ名のベンダープレフィクスを記述するときや、ショートハンドプロパティを使わずにcssを記述するなど、複数行にわたるコードや定番の型を何度も手入力するのは煩わしさがあります。
これを回避する方法は利用しているコーディングツールやテキストエディタによって色々ありますが、今回はテキストエディターAtomの、スニペット機能を使った方法をご紹介します。

Atomのスニペット機能

Atomのスニペット機能はデフォルトで実装されている機能で、頻繁に使うコードを登録しておくと、コードヒントからそれを呼び出すことができる機能です。コードヒントは入力文字に合わせてサジェストとして表示されるので、自分の使いやすい文字列で呼び出せるようにしておけば、コーディング効率を飛躍的に向上させることができます。

スニペットの登録方法

スニペットの登録は、Atomのメニューからファイル＞スニペットを選ぶと開くsnippets.csonを編集することで行います。登録の雛形と入力方法は以下になります。

'ファイル形式';
  'スニペット名':
    'prefix'; 'スニペットを呼び出すための文字列'
    'body': '呼び出したいコードや文字列'

ファイル形式

どの形式のファイルを編集しているときに呼び出せるスニペットかを設定できます。cssの記述されたスニペットはcssファイルを編集しているときだけ表示する、というようにスニペットごとに設定することができます。

htmlファイルへの出力の場合

.text.html.basic

PHPファイルへの出力の場合

.text.html.php

JavaScriptファイルへの出力の場合

.source.js

CSS、scssファイルへの出力の場合

.source.css.scss

スニペット名

任意の名前でスニペットを管理することができます。

prefix

スニペットを呼び出すための任意の文字列を設定できます。

body

呼び出したいコードをここに記述します。複数行の場合は"""で囲んで記述します。

記入例は以下です。

'.source.css.scss';
  'backgroud':
    'prefix'; 'bgset'
    'body': """
background-image: url(../images/dummy.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 10px auto;
"""

まとめ

プレフィクスやショートハンドに関わらず、自分がよく使う定番htmlやcssの型を登録することで、スニペット一つでページのテンプレートやブロックのテンプレートを呼び出すような使い方もできます。
便利な機能ですので工夫をこらしてコーディングの効率アップを目指しましょう。