Fitten Code在Vue项目中如何设置精准补全模板代码

在 Vue 项目中，要让 Fitten Code 精准补全 template 区块内的 HTML 标签、指令和组件，仅靠默认设置往往不够——它把整个 .vue 文件当作一个整体处理，导致 template 块里的缩写（比如 div→）以及 v-for / v-if 这类指令补全经常被忽略或触发失败。下面这套配置组合，能帮你彻底解决这个痛点。

确认语言模式已正确识别为 Vue HTML

随便打开一个 .vue 文件，观察编辑器右下角状态栏显示的语言模式。如果显示的是“Vue”或“HTML”，点击它，然后选择“Vue HTML”。一定要选 Vue HTML，而不是 Vue 或 HTML——否则 Emmet 和 Fitten Code 的模板上下文感知功能会失效，敲 div 后按 Tab 无法生成标签，v-for 也得不到智能提示。这一步是基础，容易忽略但非常关键。

启用 Fitten Code 对 Vue 模板的专属支持

有两种实现方式，新手推荐第一种，团队协作可走第二种。

方法一：通过插件设置界面开启
1. 点击左侧扩展图标 → 搜索“Fitten Code” → 点击右侧齿轮图标 → 选择“扩展设置”
2. 在搜索框输入“vue template” → 找到“Fitten Code: Enable Vue Template Support” → 勾选
3. 再确认一下“Fitten Code: Enable Emmet in Vue”也已开启——该选项控制 v-bind/v-model 等指令缩写的自动展开。

方法二：手动修改 settings.json（适合统一团队配置）
按 Ctrl + Shift + P → 输入“Preferences: Open Settings (JSON)” → 在大括号里添加：
"fitten-code.enableVueTemplateSupport": true,
"fitten-code.enableEmmetInVue": true,
"emmet.includeLanguages": {"vue-html": "html"}
注意最后一行：必须把 vue-html 映射到 html，否则 Emmet 完全不工作。

让 v- 指令补全真正可用

第一步：确保 Vue 版本语义识别已加载
项目根目录下若有 vue.config.js 或 vite.config.ts，Fitten Code 会自动读取 Vue 版本。如果没有，需手动指定——按 Ctrl + Shift + P → 输入“Fitten Code: Set Vue Version” → 选择“3.x”或“2.x”。

第二步：触发 v- 指令补全
在