AtomとEmmetで快適なコーディング

以前、少し触れましたがDreamweaverからの乗り換えにも便利な、無料のエディタAtomにEmmetというパッケージ（プラグイン）を追加する事で、Zen Codingの様な、素早い入力が可能になるのでおススメです。少しの入力でネストも書けちゃう便利な補助機能です。

追記：AtomよりもVSCが初心者にもお勧めです。Atomより軽い様に思います。Emmetと同じ使い方が出来ます。

あわせて読みたい

Visual Studio Code (VSC)とSASSの環境とコンパイル SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単！無料ですし、初心者でも怖がらずにインストールできるのでお勧めです！Atomよりも軽い様にも思います…

Atomのインストール

Atomエディターのインストール方法と初期設定については、“初心者にも！無料のAtomエディタでSASSを使う”　の記事を参考にして下さい。

Emmetのインストール

Atomを起動し、[setting]から[パッケージ]に進み、「Emmet」を検索で探しインストールします。
詳細は、“初心者にも！無料のAtomエディタでSASSを使う”　の記事を参考にして下さい。

Emmetをカスタマイズする

!(ビックリ）Ctrl+Eで、!DOCTYPE htmlが入ります。

!DOCTYPE htmlを、デフォルトのen から jaにしたいと思います。

色々な記事を見たのですが、バージョンの移り変わりで、少し苦戦しました。snippets.json編集する訳なので、ファイルをまず開きます。

私の場合は、c/ユーザー/.atom/package/emmet/node_modules/emmet/lib/snippets.json

以下の様に日本仕様に編集します。atomを起動して!(ビックリ）Ctrl+Eで確認して下さい。

"variables": {
		"lang": "ja",
		"locale": "ja-JP",
		"charset": "UTF-8",
		"indentation": "\t",
		"newline": "\n"
	},

Emmetを使う

何がどう早いかと言いますと、例えば img と入力して、Ctrl+Eを押すだけで

<img src="" alt="">

この辺は、コードヒントを使っても同じなのですが、

div.atom と入力して、Ctrl+Eで

<div class="atom"></div>

dl>(dt+dd)*3と入力して、Ctrl+Eで

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>

(カッコ)はグループ化、＋は繋げる役割、*数字　で繰り返す数　となります。慣れるまでちょっと難しいですが、使いこなせれば、とっても作業が捗りますね。