VSCode如何配置Vue环境代码高亮_VSCode框架开发指南【配置】-VSCode-PHP中文网

vue文件高亮失效的根本原因是volar未真正接管语言服务：需确认右下角显示“vue”而非html，卸载vetur并启用volar take over mode，重启vs code，确保项目有tsconfig.json且typescript.tsdk配置正确。

vscode如何配置vue环境代码高亮_vscode框架开发指南【配置】

Vue 文件在 VSCode 里全白、defineProps 报红、<template></template> 标签没颜色——不是主题问题，也不是插件没装，而是 Volar 没真正接管语言服务。只要右下角没显示干净的 Vue（不是 Vue HTML 或 HTML），所有高亮和类型提示都只是“看起来像”，实际没生效。

确认右下角语言模式是 `Vue`，不是 `HTML` 或 `Plain Text`

VSCode 不会自动把 .vue 文件识别为 Vue 类型，哪怕你装了 Volar。它可能默认走 HTML 解析器，导致 <script setup lang="ts"></script> 块被当纯文本处理。

打开任意 .vue 文件，点击右下角状态栏的语言标识（比如显示 HTML）
选 Configure File Association for '.vue' → 输入 vue 回车（注意：不是 vue-html，也不是 vue-template）
再点一次语言标识，手动从列表中选 Vue（由 Volar 提供）
如果列表里根本没有 Vue，说明 Volar 没启用或被禁用；检查扩展面板中 Vue.volar 是否已启用

卸载 `Vetur` 并启用 `Volar: Take Over Mode`

Vetur 和 Volar 冲突是 Vue 高亮失效最常见原因。Vetur 已归档，对 <script setup></script> 和组合式 API 支持基本失效，且会静默抢占语言服务，让 Volar 彻底“躺平”。

check-vue-style

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

下载

在扩展面板搜索 @installed vetur，右键 → Uninstall（不是禁用）
安装 Vue.volar 后，弹出的 Take Over Mode 提示必须点 Yes
没弹窗？按 Ctrl+Shift+P 输入 Volar: Take Over Mode 手动执行
执行后必须关闭并**重新打开整个 VS Code 窗口**（仅重载窗口不生效）
重启后右下角应显示 Volar (Take Over)，而不是 Vue 或 Vue (Volar)

确保项目有 `tsconfig.json` 且 `typescript.tsdk` 指向本地版本

Volar 的类型推导、ref 自动解包、defineProps() 泛型识别，全部依赖 TypeScript 语言服务启动成功。而这个服务只会在项目根目录存在 tsconfig.json（或 jsconfig.json）时才加载。

项目根目录建一个空 tsconfig.json 文件（内容可为空对象 {}）
检查 tsconfig.json 中 "exclude" 字段是否错误包含 "node_modules" —— 这会让 Volar 找不到 @vue/language-core

在 .vscode/settings.json 中写入：

{"typescript.tsdk": "./node_modules/typescript/lib"}

如果用 pnpm，运行 pnpm store path 查路径，确保该路径对 VSCode 可读（macOS 上偶尔因权限静默失败）

`editor.tokenColorCustomizations` 不生效？先查真实 scope 和主题覆盖

自定义关键字颜色（比如想让 defineProps 变蓝）不生效，90% 是 scope 写错或被当前主题覆盖，而不是配置没加。

按 Ctrl+Shift+P → Developer: Toggle Developer Tools，在 Console 里执行：
```
editor.getTokenClassificationAtPosition(editor.getPosition())
```
，把光标放在目标词上，看返回的 scope 名（如 support.function.define-props.vue）
别凭经验猜 scope，不同语言、不同插件生成的 scope 差异极大
如果你用了第三方主题（如 One Dark Pro），它的 tokenColorCustomizations 优先级高于用户设置，需在主题名下嵌套配置，例如：
```
"[One Dark Pro]": { "textMateRules": [ { "scope": "support.function.define-props.vue", "settings": { "foreground": "#56b6c2" } } ] }
```
改完 settings.json 不用重启，但切换文件类型（比如从 .ts 切到 .vue）可能需要重开文件才能刷新 token 规则