VSCode必备插件配置指南_VSCode自动关联Vue文件【策略】-VSCode-PHP中文网

根本原因是vscode未将.vue文件正确关联至vue语言id，需在settings.json中配置"files.associations": {"*.vue": "vue"}，禁用vetur，启用volar take over mode，并指定本地typescript.tsdk路径。

vscode必备插件配置指南_vscode自动关联vue文件【策略】

Vue 文件没语法高亮、defineProps 报错、右下角显示“HTML”而不是“Vue”——根本不是插件没装，而是 files.associations 没配对，或 Volar 和 Vetur 同时启用导致语言服务被劫持。

为什么 .vue 文件右下角显示 HTML 或 Plain Text

VSCode 不会自动把 .vue 当作 Vue 文件处理，它只认语言 ID（language ID），而这个 ID 必须通过 files.associations 显式绑定。Volar 插件注册的语言 ID 是 vue，不是 vue-html 或 html。

打开任意 .vue 文件，看右下角状态栏：如果显示的是 HTML、Plain Text 或 JavaScript，说明关联失败
点击该文字 → 选择 Vue（注意大小写和拼写，必须是小写 vue）→ 立即生效
永久生效：在项目根目录的 .vscode/settings.json 中加这一行：
```
"files.associations": { "*.vue": "vue" }
```
别写成 "*.vue": "vue-html"——那是 Vetur 时代的旧写法，Volar 不识别

Volar 和 Vetur 能不能共存

不能。两者注册同一类语言功能，冲突时 Volar 通常“赢”但会降级为仅 HTML 模式，导致 <script setup></script> 里 TS 类型失效、defineProps 标红、跳转失灵。

check-vue-style

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

下载

检查是否已安装 Vetur：Ctrl+Shift+X → 搜索 Vetur → 若已安装，直接禁用（不要卸载）
确认 Volar 已启用：搜索 Volar → 点击“启用”，并确保 TypeScript Vue Plugin (Volar) 也已安装
在 settings.json 中强制关闭 Vetur：
```
"vetur.enabled": false
```
重启 VSCode 后打开 .vue 文件，按 Ctrl+Shift+P → 输入 Developer: Toggle Developer Tools → 查 Console 是否有 Vetur is disabled 日志

为什么 `defineProps` 还是标红、没有类型提示

Volar 的类型服务依赖两个关键文件：项目根目录下的 tsconfig.json（或 jsconfig.json）和正确的 typescript.tsdk 配置。缺一不可。

检查项目是否有 tsconfig.json：没有就新建一个最简版，至少包含

{ "compilerOptions": { "target": "ES2020", "moduleResolution": "bundler", "allowSyntheticDefaultImports": true } }

若用 JS 项目，jsconfig.json 必须含 "checkJs": true，否则 Volar 不启动 TS 语言服务
在 settings.json 中指定本地 TypeScript 版本：
```
"typescript.tsdk": "./node_modules/typescript/lib"
```
（路径必须指向你项目安装的 typescript 包）
别依赖全局 TypeScript——全局版本通常不含 Vue 宏支持，defineProps 就是灰色的

Emmet 在 `<template></template>` 里不生效怎么办

Emmet 默认不识别 vue-html 语言模式，需手动映射。这是个纯配置项，和插件无关。

在 settings.json 中添加：

"emmet.includeLanguages": { "vue-html": "html", "vue": "html" }

确保 emmet.triggerExpansionOnTab 为 true（默认就是）
别在 <script></script> 块里用 Emmet——它只对模板区域有效
如果仍无效，右键 .vue 文件 → “Reopen with Language Mode” → 再选一次 Vue

真正卡住人的从来不是“装什么插件”，而是 files.associations 绑错语言 ID、typescript.tsdk 指向全局、或者以为 Vetur 和 Volar 可以“各干各的”。这三个点只要对齐，Volar 就能正常加载，defineProps 就不会灰，Emmet 也能敲 tab 展开。