プログラミング

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

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

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

以降は具体的な記法と結果をまとめていきます。上段のコードを入力し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はプロパティ、プロパティ値の短縮になるので、表形式でいくつか紹介します。

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

CSSのEmment

以下のような感じです。

数が多いので自分がよく使うモノは覚えて、都度チートートを確認すると良いかと思います。

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

まとめ

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

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

-プログラミング
-,