【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の記法例

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

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

[st-card-ex myclass=”” url=”https://docs.emmet.io/cheat-sheet/” target=”_blank” rel=”nofollow” thumb=”” label=”” name=”” bgcolor=”” color=”” readmore=””]

以降は具体的な記法と結果をまとめていきます。上段のコードを入力し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>
広告

タグ

各種タグを展開します。

h1

<h1></h1>

タグ(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>

コメント

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

c

<!--  -->

CSSのEmmetの記法例

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

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

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

[st-card-ex myclass=”” url=”https://docs.emmet.io/cheat-sheet/” target=”_blank” rel=”nofollow” thumb=”” label=”” name=”” bgcolor=”” color=”” readmore=””]

CSSのEmment

以下のような感じです。

記法展開後
ppadding: ;
wwidth
w50width: 50px;

まとめ

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

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

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