VSCode的Volar插件怎么正确配置-VSCode-PHP中文网

必须禁用vetur、手动将.vue语言模式设为vue、配置tsconfig.json的types为["vue"]并重启ts服务，三步缺一不可；右下角显示“vue”且console中出现registering vue language features才算volar真正接管。

vscode的volar插件怎么正确配置

装了 Volar 不等于 Vue 项目就能有类型提示——defineProps 报红、ref() 类型是 any、

右下角显示 “Vue (Vetur)” 或 “HTML” 就说明没接管成功，哪怕插件已安装并启用。

打开任意 .vue 文件，点击右下角语言模式标签（比如当前显示 HTML）→ 选 Configure File Association for '.vue' → 输入 vue 回车（**不要选带括号的选项，如 Vue (Volar)**）
再点一次语言模式，手动从列表中选 Vue（状态栏必须显示干净的 Vue 字样，不是 Vue HTML）
按 Ctrl+Shift+P 打开命令面板，运行 Developer: Toggle Developer Tools，在 Console 里搜 volar，看到 Registering Vue language features 才算激活
如果列表里压根没有 Vue，检查扩展面板中 Vue.volar 是否启用；若已启用但仍不出现，可能是 Vetur 残留或 files.associations 被覆盖

这不是代码写错了，是 TypeScript 编译上下文根本没加载 Vue 类型声明，defineProps 是全局宏，TS 必须知道它在哪定义。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

检查项目根目录 tsconfig.json 的 compilerOptions.types 是否包含 "vue"，缺了这行就必报错
如果是 JS 项目，用 jsconfig.json，且 types 要写成 ["vue/types"]，并确保已安装 @vue/runtime-core
改完配置后，必须手动重启 TS 服务：Ctrl+Shift+P → 输入 Restart TS server → 回车；只重载窗口或重启编辑器都不生效
tsconfig.json 中不能把 node_modules 写进 exclude 字段，否则 Volar 找不到 @vue/language-core

Volar 依赖 TypeScript 加载 @vue/runtime-core 类型定义来推导 ref<string>()</string>，但默认脚手架常设 "skipLibCheck": true，直接跳过所有 node_modules 下的类型。

找到 tsconfig.json 的 compilerOptions，确保 "skipLibCheck": false（Vue 3.3+ 官方推荐设为 false）
如果用了 "extends"（比如 "./tsconfig.base.json"），得去被继承的文件里改，只改当前文件无效
若项目用 pnpm，运行 pnpm store path 查路径，确认 VSCode 有权限读取（macOS 上偶尔因全盘访问权限静默失败）
在 .vscode/settings.json 中写入："typescript.tsdk": "./node_modules/typescript/lib"，强制指向项目本地 TS 版本

不能。Vetur 已废弃，共存会导致语言服务打架，现象包括：ref 不提示类型、Ctrl+Click 跳转失效、defineEmits 下划线报错但代码完全合法。

卸载所有带 “Vetur” 字样的扩展（包括旧版 Vue 插件、Vetur ESLint、Vetur Pug）
禁用 VSCode 内置的 TypeScript and JavaScript Language Features：Ctrl+Shift+P → 搜 @builtin typescript → 右键 → Disable (Workspace)
重装 Volar 后，必须彻底退出 VSCode（包括托盘进程），再重新打开；仅 Reload Window 不生效
打开命令面板，运行 Volar: Enable Take Over Mode 并点 Yes，然后重启窗口；重启后右下角应显示 Volar (Take Over)，不是 Vue 或 Vue (Volar)