VSCode如何开发Vue项目_模板高亮与智能提示配置-VSCode-PHP中文网

装Volar、禁用Vetur、启用Take Over Mode三步缺一不可，否则仅高亮无类型提示；需额外开启volar.enable template interpolation service并确保tsconfig.json配置正确。

vscode如何开发vue项目_模板高亮与智能提示配置

装 Volar、禁用 Vetur、启用 Take Over Mode，三步做完，<template></template> 才会真正高亮且带类型提示；否则你看到的只是“带颜色的 HTML”，v-model 绑定字段没推导、@click 事件参数不识别、defineProps 泛型报红——全是配置没走对。

为什么 `<template></template>` 里标签有颜色但没智能提示？

高亮 ≠ 类型服务。Volar 默认只接管 <script></script> 区域的 TypeScript 服务，<template></template> 的表达式校验（比如 {{ count + 1 }} 中 count 是否定义）需要额外开启模板插件。

打开 VSCode 设置（Ctrl+,），搜索 volar.enable template interpolation service，勾选它
确保项目根目录有 tsconfig.json 或 jsconfig.json，且 include 覆盖了 src/**/* 和 shims-vue.d.ts
如果用了 pnpm，检查 node_modules/.volar/type-registry 是否存在；不存在就说明 Volar 没成功加载 Vue 类型库，重启 VSCode 并确认没被杀毒软件拦截

`defineProps` 报错 “Cannot find name” 怎么办？

这不是语法错误，是语言服务没识别 script setup 上下文。常见于：文件没关联为 vue 语言模式、Vetur 还在运行、或 lang="ts" 漏写了。

点 VSCode 右下角语言标识（如显示 Plain Text 或 HTML）→ 选 Configure File Association for '.vue' → 输入 vue
右键已安装的 Vetur 扩展 → “禁用工作区”（不是卸载，禁用即可）
检查 <script setup lang="ts"></script> 标签是否完整；lang="ts" 缺失会导致整个 script 区域被当普通 JS 处理
如果项目用 Vue 3.3+，打开设置搜 volar.experimental.vue macros 并启用——否则 defineProps 的泛型不会触发类型推导

路径别名（如 `@/components`）跳转失败？

VSCode 不读 vite.config.ts 里的 resolve.alias，必须在 tsconfig.json 或 jsconfig.json 中显式声明，否则 Ctrl+Click 就是 404。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

在 tsconfig.json 的 compilerOptions 下加："baseUrl": "./", "paths": { "@/*": ["src/*"] }
别名含 ~ 或 #？同样要列进 paths，例如 "#/*": ["src/*"]
改完配置后，执行命令面板中的 Volar: Restart Server，不要只重载窗口
如果跳转仍失败，检查 shims-vue.d.ts 是否重复写了 declare module '*.vue' —— 重复会导致类型解析冲突

`<template></template>` 缩进错乱、属性自动换行异常？

这是 Prettier 和 Volar 格式化器打架的结果。Prettier 对 Vue 模板语法支持有限，尤其处理 v-for 嵌套或动态指令时容易崩格式。

在设置中搜 prettier.vue，把 Prettier: Vue Files Suffixes 清空（留空或删掉 vue）
右键 .vue 文件 → “Format Document With…” → 选 Volar 并设为默认
如果用了 ESLint，建议把格式化逻辑交给 eslint --fix（配合 @vue/eslint-config-prettier），它比 Prettier 更懂 Vue 语义

最常被忽略的一点：Volar 的 Take Over Mode 启用后，VSCode 会停用内置 TS 服务，但如果你项目里手动设置了 typescript.tsdk 指向旧版 TS，或者 tsconfig.json 里 exclude 错误地包含了 node_modules，那类型服务就直接哑火——此时连 ref() 返回值都标成 any，而不是配置没生效那么简单。