Emmetは、HTML/CSSコーディングをサポートするプラグイン。

独自の記法でhtmlやCSSコーディングを高速化でき、デメリットもないので使わない理由はない(確信)。

各種エディタ・IDEで使用できる。

自分がいつも使っているVisual Studio Codeにはいつの間にか標準で入るようになったらしく、 DLしたらそのまま使える。

例えば、

#header>h1+ul.nav>li>a*5

こんな感じで入力して、Tabキーを押すと

<div id="header">
  <h1></h1>
  <ul class="nav">
    <li>
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
      <a href=""></a>
    </li>
  </ul>
</div>

こう展開される。

CSSで例をあげると、

.test {
    tac
}

こう、適当にクラス用意して「tac」と打ってやると

.test {
    text-align: center;
}

こうなる。

とりあえずEmmet入れてなんか試してみるかー、という時は、

!

これだけ入れて、Tabを押してみると面白いと思う。

参考(https://blog.leko.jp/post/introduction-of-emmet/)