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- 指令补全

在 里输入 v- → 稍等半秒 → 下拉列表会列出 v-if、v-for、v-model 等。输入 v-b 会优先提示 v-bind，输入 v-on 会提示 @click/@submit 的快捷写法。

第三步：补全后快速插入属性

例如输入 v-for → 按 Tab 补全为 v-for="item in list" → 光标停在 item 位置 → 直接输入新变量名（比如 todo）→ 再按 Tab 自动跳到 list → 输入数组名 → 回车完成。整个过程很流畅，无需来回点击鼠标。

禁用干扰性全局补全，聚焦模板上下文

打开设置（Ctrl + ,）→ 搜索“fitten code suggestion” → 找到“Fitten Code: Suggestion Trigger Mode” → 改为“contextual”。
这一改动让补全建议严格按当前光标所在区块判断：在 中只推 HTML 标签和 v- 指令，在 中才推 ref/reactive 等 API。从此不再出现 JS 补全污染模板编辑的困扰。

再搜索“ja vascript.suggest.autoImports” → 取消勾选。
这个不关掉，Fitten Code 可能会强行给你 import 一个根本不存在的组件，破坏模板结构。关闭之后，模板补全就干净多了。