根本原因是Volar未正确接管.vue文件：需卸载Vetur、启用Take Over模式、手动设语言模式为Vue、确保tsconfig.json存在且未排除node_modules，并重启VSCode窗口而非仅重载。
Vue 文件语法高亮失效、defineProps 报红、模板中属性跳转失败——根本不是 VSCode 问题，而是 Volar 没接管或接管失败。
为什么装了 Volar 还是灰乎乎？
VSCode 默认不识别 .vue 文件结构，必须靠扩展提供语言服务。Vetur 已停更，对 <script setup lang="ts"> 支持差，常见高亮错乱、类型推导中断；Volar 才是 Vue 3 官方推荐方案。
- 必须卸载 Vetur（若已安装），否则 VSCode 会自动禁用 Volar
- 安装 Volar 后弹出的 “Take Over Mode” 提示务必点 Yes；不启用等于白装
- 右下角语言模式显示为
Plain Text或HTML？点击它 → “Configure File Association for '.vue'” → 输入vue回车 - 检查
settings.json是否有冲突项，比如残留的"vetur.*"配置
为什么 defineProps 和 defineEmits 一直报红？
这是 TypeScript 语言服务没正确加载 Vue 类型定义的典型表现，和 Volar 的 TS 插件模式强相关。
- 确认项目根目录存在
tsconfig.json，且含"types": ["vue"]（不是["@vue/runtime-core"]） -
"exclude"字段不能包含"node_modules"，否则 Volar 无法读取@vue/runtime-core类型 - 在 VSCode 设置中关闭
Volar > Enable Take Over Mode，再彻底重启窗口（不是重载） - 如用 pnpm，运行
pnpm store path查路径，macOS 下需手动给 VSCode 全盘访问权限
如何让 ESLint + Prettier 在 .vue 文件里真正协同？
ESLint 负责逻辑校验，Prettier 只管格式；两者在 <template> 和 <script> 区域职责不同，配置错位就会互相覆盖或静默失效。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 必须安装
@vue/eslint-config-typescript和@vue/eslint-config-prettier，且extends中前者在前、后者在后 -
settings.json中设"eslint.validate": ["vue"]，不能只写["javascript", "typescript"] -
"editor.defaultFormatter"对[vue]语言单独指定为vue.volar，而非全局设为 Prettier -
prettier.config.js或.prettierrc必须存在，否则 Prettier 在保存时可能跳过<template>格式化
Volar 服务器卡顿、智能提示延迟明显怎么办？
默认 embedded 模式会把语言服务跑在 VSCode 主进程中，大型项目（尤其含大量 node_modules 类型导入）容易吃满内存、响应变慢。
- 在设置中搜索
Volar > Server: Mode，改为external - 改完后执行命令面板中的
Volar: Restart Server，不要只重载窗口 - 如果仍卡顿，可临时在
volar.config.json中加"plugins": {"typescript": {"enabled": false}}关闭模板内 TS 类型检查（仅调试用） - 注意：关闭模板类型检查后，
v-model绑定属性的类型错误将无法在编辑器中提前暴露
最易被忽略的一点：所有配置修改后，**必须重启 VSCode 窗口**（Cmd/Ctrl+Shift+P → “Developer: Reload Window” 不够，得关掉整个窗口再打开），Volar 的语言服务器状态不会热更新。另外，tsconfig.json 的任何改动（哪怕只是加个注释）都需手动触发 Volar: Restart Server 才生效。
