在 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 补全污染模板编辑的烦人事。
再搜索“javascript.suggest.autoImports” → 取消勾选。
如果不关掉这个选项,Fitten Code 可能会强行给你 import 一个根本不存在的组件,破坏模板结构。关闭之后,模板补全就更加干净了。
