じっくり解説。SublimeText3にEmmetをインストールする

Sublime text 2 フロントエンドエンジニア Sublime text 3 Emmet

f:id:fushimik:20140414145217p:plain
sublime text3 emmet というキーワードで検索されている事が多いようなので、じっくり解説です。
画面はmacのものですが、windowsでも同じような操作でインストールできます。

SublimeTextは、パッケージで機能追加

SublimeTextは、2も３も、パッケージと呼ばれるプラグインで必要な機能を追加していくことができます。
Emmetもパッケージとして配布されています。

パッケージは、パッケージコントロールで。

パッケージコントロールを導入すると、パッケージのインストールが簡単です。
パッケージコントロールの導入方法は、
Sublime Text 3 に Package Control をInstallするのが簡単になったよ - フロントエンドとかPCとかスマホとか
を参照してください。

Emmetのインストール

f:id:fushimik:20140414145240p:plain
Mac：[Sublime Text] - [Prefernces] - [Package Countrol] の順に選択します。
Windows：[Prefernces] - [Package Countrol] の順に選択します。

f:id:fushimik:20140414145511p:plain
[Install Packages]を選択します。

f:id:fushimik:20140414145551p:plain
[emmet]と入力すると、選択肢に emmet が出てきますのでそれを選択します。

f:id:fushimik:20140414145829p:plain
このように出てきたら、インストールは完了です。

html5のデフォルトlangをjaに

ここで、html5文書を作るときのデフォルトのlang設定をjaに変更しておきます。

f:id:fushimik:20140414145926p:plain
[Preferenes] - [Package Settings] - [Emmet] - [Settings-User]を開きます。

開いたファイルに、下記を貼付けてください。

{
	"snippets": {
		"variables": {
			"lang": "ja"
		}
	}
}

これで、SublimeTextに、Emmetをインストールし使えるようになりました。
新しくファイルを作り、拡張子 html で保存するか、右下のファイルタイプで HTMLを選択し、

html:5>head>ul>(li>a)*3

として、[Ctrl]+[E]キー（または[tab]）を押してください。
下記のように展開されているはずです。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<head>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</head>
</body>
</html>

Emmetには、html,cssコーディングに役立つたくさんの機能があります。
これで、コーディングも捗りますね。