.erbでも.vueでもEmmet記法で爆速コーディング (2022/10/31 追記)

2022/10/31 追記

VS CodeにおけるVueの開発には、2022年時点でVolarという拡張が公式として出ているのでそちらを使ってください。

下記の記事は筆者の知識が不足していた時点で執筆したもののため、参考にしないでください。

---

対象の人

• VSCode使っている人
• HTML、CSSのコーディングする人
• 楽をしたい人

Emmet記法とは

Emmet記法については下記のリンクを見てもらうのが一番早いと思います。
Emmet in Visual Studio Code

簡単に説明すると
header.navbar>ul.menu>li#item$*4
と入力して末尾でtabを入力すると下記のHTMLが出力されます。

<header class="navbar">
  <ul class="menu">
    <li id="item1"></li>
    <li id="item2"></li>
    <li id="item3"></li>
    <li id="item4"></li>
  </ul>
</header>

HTMLタグを指定しない場合は自動的にdivタグが生成されます。
.container>.row>.col*3

  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>

標準サポートされていない拡張子でEmmet記法を有効にする

VSCodeの初期設定だと.erbや.vueファイルではHTMLやCSSのEmmet記法が使えませんが、設定を記述すれば使えます。
基本設定→設定→setting.jsonを開き、emmetで検索すると下記の項目が見つかると思います。

  "emmet.includeLanguages": {},

これを編集して右側のエディタに下記のように書き加えましょう。

"emmet.includeLanguages": {
    "erb": "html",
    "vue": "html",
    "vue": "css",
}

これでEmmet記法が使えます。これで快適に爆速コーディングできます。

補足

RubyMineでは標準で.erbファイルのEmmet記法をサポートしています。