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

emmet

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

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>

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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください