【VSCodeでEmmet入門】 Emmetを使ってHTMLコーディングを効率化しよう。

EmmetというのはHTMLやCSSを効率よくコーディングするためのプラグインで、SublimeText・Dreamweaver・Bracket・Atomなど様々なエディターやIDE（統合開発環境）で利用することができます。もともとはZen-Codingというものでしたが、その次期バージョンがEmmetです。

例えばh1と記述したものをEmmetで展開すると<h1></h1>とコードが生成されます。

VSCodeでEmmetを使う

今回はMicrosoftのVisual Studio CodeでのEmmetの使い方を説明します。

まだ使ったことない方はこちらから
Visual Studio Codeへの乗り換え。これは結構オススメかも…！

VSCodeは初期設定の状態でもEmmetが使えるようになっています。

インストールできたら、HTMLファイルを作成し、試しにhtml:5と記述をしてTabキーを押してみましょう。

ただし初期設定だと、Tabキーを押しても実行されないときがあったり、<html lang="en">になっていていちいちlang="ja"に変更しなければならないので、少しだけ設定を追加するのがおすすめです。

基本設定＞設定でユーザー設定が編集できます。

以下の内容をユーザー設定に記述して上書きします。

// emmetをタブキーで実行
"emmet.triggerExpansionOnTab": true,
// emmetの言語設定を日本語に
"emmet.variables": {"lang" : "ja"},

VSCodeはユーザー設定がいろいろと細かく出来る上、設定をコピペすれば他人の設定をそっくりそのまま移植できたりするのが便利です。

Emmetでよく使う省略記法

HTML5のひな型

html:5もしくは!だけでもいけます。!と書いてTabキーを押すだけで以下のコードが展開されます。

通常のHTMLタグ

これが一番よく使うやつ。例えばh1＋Tabキーで<h1></h1>が展開されます。imgで展開すると<img src="" alt="">というふうに属性も一緒に展開されます。

classやidを付けて展開する

CSSのように.や#を付けて展開するとclassやidがついて展開されます。

例えばh1#logo＋Tabキーで<h1 id="logo"></h1>と展開されます。

HTMLを何も指定しないでclassかidだけを付けて展開すると自動的にdivタグになります。.wrapper＋Tabキーで<div class="wrapper"></div>という感じです。

複数のHTMLタグを入れ子で展開する

header>navのように>で複数のHTMLタグを繋ぐと入れ子になって展開されます。header>navは以下のようになります。

<header>
  <nav></nav>
</header>

複数のHTMLタグを隣接で展開する

入れ子ではなく、隣接する形にも出来ます。例えばheader+main+footerという風に+で繋ぐと

<header></header>
<main></main>
<footer></footer>

という形で展開されます。

テキストを挿入する

h1{Hello Emmet!}という風に{}でテキストを囲って展開すると、<h1>Hello Emmet!</h1>のような形で展開されます。

ダミーテキストの展開

lorem＋Tabキーで

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto architecto dolor consectetur quis ipsum, voluptates eaque quisquam ut obcaecati fugiat quam temporibus a assumenda. Quam ad ratione eveniet sint doloribus.

が展開されます。ろーれむろーれむ。

繰り返しの展開

ul>li*3のように*NでNの部分に数字を入れると、繰り返しで展開されます。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

連番での展開

ul>li#hoge$*3のように連番させたいidやclassに$を付けると、その部分が連番になります。

<ul>
  <li id="hoge1"></li>
  <li id="hoge2"></li>
  <li id="hoge3"></li>
</ul>

書いてあるHTMLの外側にHTMLを追加する

Wrap With Abbreviationという機能があります。すでに書かれているHTMLやテキストを選択し、Command+Shift+Pでコマンドパレットを開き、>emmet:wぐらいまで入れるとWrap With Abbreviationというのが出てきますので、それを選択。あとは囲いたい外側のHTMLタグを入力すると、外側にHTMLが追加されます。

キーボードショートカットの設定方法

Emmetには他にも色々と便利機能がありますが、Wrap With Abbreviationのようなコマンドパレットから操作を行うようなものをよく使う場合はキーボードショートカットに設定をしておくのがおすすめです。

Command+Shift+Pでコマンドパレットを開き、「Key」を打ち込むと選択肢の中に基本設定：キーボードショートカットを開くというのが出てきます。ここでキーバインドの検索に「emmet」と打ち込むとEmmetで使えるコマンドが一覧表示されます。キーボードショートカットに設定したい項目の左側の鉛筆アイコンをクリックすると、キーボードの登録ができます。