はじめに

Emmet というツールキットを使用すると、HTML・CSSの入力効率が大幅に上がります。
生産性爆上がりというやつです。

Emmetのメリット

こちらの公式動画を見るのがわかりやすいです。

動画を見れない方用



補完候補から `script:src` を選択すると・・・

`<script src=""></script>` が自動入力され、カーソル位置も適切に移動！

などなど・・・

ツールキットですが、VSCodeでは標準搭載されてます！

さっそく使ってみたい方は、公式のチートシートを眺めて試してみるのがオススメです。

いくつかピックアップ

p.text ->
  <p class="text"></p>

tag.class_name で、入力クラスを持つHTMLタグを生成できます。

.container ->
  <div class="container"></div>

.class_name は、デフォルトで div タグになります。

.container>p ->
  <div class="container">
    <p></p>
  </div>

> を使用すると、下層構造のタグを生成できます。

div+p ->
  <dif></dif>
  <p></p>

+ を使用すると、同じ階層のタグを生成できます。

p*5 ->
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>

* を使用すると、指定回数繰り返し生成できます。

その他、VSCodeでは .slim でも使用可能でした。
.erb では使用できませんでしたが・・・

設定を変更することで、Emmetを .erb でも使用可能です。



設定を開く（画像はMac）

`emmet` と検索

Include Languages の「項目を追加」 → 項目（key）に`erb`、値（value）に`html`と入力 → OK をクリック

.erb 以外の拡張子でも、同様の方法で追加可能だと思います。

以上、Emmetの紹介でした。

次は何を書こうかしら・・・