More than 3 years have passed since last update.

VSCodeで.vue拡張子でもemmet機能を有効にする

Posted at 2020-09-03

概要

VSCodeにはデフォルトで.htmlに対してemmetがついています。
これをVue.jsの.vue拡張子のコンポーネントファイルなどでも使いたいなと思って調べたときの備忘録です。

Emmetとは？
- HTMLやCSSを省略記法で完結に記述するためのツールのことです。
- VSCodeでは.htmlのファイルに対してデフォルトで有効になっています。

こういった記述で...

<!-- (1) -->
div#Header.header
<!-- (2) -->
ul>li*2
<!-- (3) -->
dl>dt+dd

こういった形に自動的に変換されます

<!-- (1) -->
<div id="Header" class="header"></div>
<!-- (2) -->
<ul>
  <li></li>
  <li></li>
</ul>
<!-- (3) -->
<dl>
  <dt></dt>
  <dd></dd>
</dl>

普段、VSCodeの補完機能などの設定をワークスペース毎の設定にしているのでその前提で記述します。

setting.jsonの中に以下の記述を追加します。

setting.json

{
  "emmet.includeLanguages": {
    "vue": "html"
  }
}