# [VS Code] .vue 檔 template 內無法使用 Emmet

###### tags: `Visual Studio Code`

## 期望結果
1. 在 .vue 檔的 `<template>` 內可以正常使用 Emmet
2. 在 `<template>` 內使用時，結果要有 <>
3. 在 `<template lang="pug">` 內使用時，結果不要有 <>

## 解決方式
:::info
2023-09-24 更新
今日才發現已有支援，不需再額外設定 `emmet.includeLanguages.vue`

:::

### 解法ㄧ
1. 依序點擊 Visual Studio Code 視窗左上角的 `Code` > `喜好設定` > `設定` > `延伸模組` > `Emmet` > `Include Languages` > `新增項目` > 輸入以下的值後點`確定`。
| 項目 | 值 |
| --- | --- |
| vue | html pug |
2. `Trigger Expansion On Tab` 項目打勾

### 解法二
直接編輯 `settings.json`

"emmet.includeLanguages": {
    "vue": "html pug"
},
"emmet.triggerExpansionOnTab": true

## 尚未釐清的地方
* 大部分文章會同時加上"vue-html": "html"，但沒加目前也可以用，不了解"vue-html"和"vue"的差異
* [若有使用 Pug 和 SASS，可以加上下方內容](https://snh90100.medium.com/%E8%A7%A3%E6%B1%BAvs-code%E4%B8%ADvue%E6%AA%94emmet%E8%AA%9E%E6%B3%95%E5%A4%B1%E6%95%88%E7%9A%84%E6%96%B9%E6%B3%95-5fa0eb5fabd4 "解決VS Code中Vue檔Emmet語法失效的方法")，但沒加目前也可以用

  "emmet.syntaxProfiles": {
      "vue": "pug sass"
  },

---

:::info
建立日期：2020-12-30
更新日期：2023-09-24
:::