【Visual Studio Code】Emmetを使ってコーディングを効率化しよう

Emmetとは？

Emmet とは、HTML や CSS を省略記法で入力できるプラグインです。Visual Studio Code や SublimeText、Atom など多くエディタで利用できます。

Emmentを使うことで、キー入力を減らしコーディングの大幅な効率化ができます。

特に Visual Studio CodeはEmmet が標準搭載されているので、拡張機能を入れずに利用できます。

Visual Studio CodeでHTML、CSSを書く人は記法を覚えてまず損はないです。

Visual Studio CodeでEmmetを使う方法

EmmetでHTML、CSSを省略記法した後にTABキーをクリックするだけです。

HTMLのEmmetの記法例

いくつかピックアップして紹介します。

細かく知りたい人はチートシートもあるので参考にしてみてください。

: Cheat Sheet

docs.emmet.io

以降は具体的な記法と結果をまとめていきます。上段のコードを入力しTABキーで下段のコードが展開されます。

HTML5ひな形

HTML5のひな形を出力します。

↓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

タグ(class付き)

タグにクラスを付けた状態で展開します。

h1.test

↓

<h1 class="test"></h1>

タグ(id付き)

タグにID付けた状態で展開します。

h1#test

↓

<h1 id="test"></h1>

兄弟要素で展開

「+」を使って複数の要素を同じ階層で展開します。

div+h1+p

↓

<div></div>
<h1></h1>
<p></p>

要素をネストして展開

大なり記号「>」を使って要素をネストして展開します。

div>p>span

↓

<div>
  <p><span></span></p>
</div>

兄弟要素とネストの組み合わせで展開

もちろん組み合わせもできます。

下記の場合、「div」の中に「p」と「span」を展開します。

div>p+span

↓

<div>
  <p></p>
  <span></span>
</div>

要素を繰り返して展開

「*」を使って同じ要素を任意の個数展開します。

div*5

↓

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

連番を付与して展開

「$」を使って連番をつけて展開もできます。

以下のように書くとclassにtest1～test5を連番で振ることができます。

div.test$*5

↓

<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>

個人的にはこれが地味に便利です。

↓

<!--  -->

CSSのEmmetの記法例

いくつかピックアップして紹介します。

CSSはプロパティ、プロパティ値の短縮になるので、表形式でいくつか紹介します。

細かく知りたい人はチートシートもあるので参考にしてみてください。

: Cheat Sheet

docs.emmet.io

CSSのEmment

以下のような感じです。

記法	展開後
p	padding: ;
w	width
w50	width: 50px;

まとめ

Emmetは、コーディング作業を効率よく行うために非常に強力な機能です。

全部覚える必要は無く、必要に応じて調べるのもアリです。

初めは慣れないかもしれませんが、慣れてしまうとコーディングがとても楽になるので使えるようになりましょう！