コーディングが爆速になる！Sublime Textのプラグイン「Emmet」が便利すぎて泣ける

拡張機能が豊富で非常に便利なSublime Textですが、Emmetというプラグインが便利すぎるのでご紹介したいと思います。

Emmetは、超効率的にコーティングができるようになるプラグインです。文字で説明するのが難しいですが、決まった文法を入力して、ショートカット([Ctrl]+e)を押下することで一気にひな形を展開してくれます。

例えば、aと入力して[Ctrl]+eを押せば、以下が展開されます。

<a href=""></a>

このように必要最小限の入力で、コーディングできるようにしてくれるのがEmmetです。

使っている様子は、コチラから動画で確認することができます。

Emmetのインストール

他のプラグインと同様にInstall Packageを使ってインストールします。

Ctrl+Shift+Pを押下して、コマンドパレットを呼び出します。
installと打ち込み「Package Control: Install Package」を呼び出し、クリックするかEnterで実行します。
emmetと入力すると「Emmet」が出てくるので、クリックするかEnterでインストールします。

インストールはこれで完了です。

Emmetの使い方

決まった文法を入力して、[Ctrl]+eを押下するだけです。この”決まった文法”というのが多く存在していて、すべては紹介しきれないので、色々調べながらやってみてください。

よく使うものを一部紹介したいと思います。

HTML5

HTML5のひな形を展開するのは非常に簡単です。

エクスクラメーションマークを入力して、

[Ctrl]+eを押せば、以下が展開されます。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

たったの1文字入力するだけで、ここまで展開してくれるのでコーディングが非常に捗ります。

HTML4.01

HTML4.01のひな形を展開するには、以下を入力して、

html:4t

[Ctrl]+eを押せば、以下が展開されます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

ナニコレ、便利すぎ(>_<)

CSS

Emmetは、HTMLだけでなく、CSSでも使えます。


db⇒display: block;
m:0⇒margin: 0;
tac⇒text-align: center;
posl⇒position: relative;
w120⇒width: 120px;
fsz14⇒font-size: 14px;
bg+⇒background: #fff url() 0 0 no-repeat;

左側の文字を入力して[Ctrl]+eを押せば、右側のプロパティと値が展開されます。

また、頭にハイフン(-)をつけることで、ベンダープレフィックスも自動的につけてくれます。

例えば、

-bx

これを[Ctrl]+eで展開すると、以下のようになります。


-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

border-radiusなど、値を指定して展開することも可能です。

-bdrs10

これを展開すると、以下のようになります。


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

文字コードの指定をjaに変更する

デフォルトだと、HTMLのひな形を展開すると文字コードの指定がenになりますが、これは設定でjaに変更することができます。

[基本設定] – [Package Settings] – [Emmet] – [Settings – User]を開きます。

以下を入力して保存します。


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

これで、文字コードがjaで展開されるようになります。

あとがき

初めは逆に効率が悪くなるかもしれませんが、慣れるとコーディングが爆速になると思います。私も使い始めたのは最近ですが、便利すぎて泣けてきます。

今よりも効率よくコーディングしたいとお考えの方は、ぜひお試しください。

なお、EmmetはSublime Text以外のエディタ(DreamWeaverなど)でも使えるみたいです。

コーディングが爆速になる！Sublime Textのプラグイン「Emmet」が便利すぎて泣ける