Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

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

INDEX

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>

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

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる