Volar是Vue3唯一推荐插件，必须禁用Vetur；启用Take Over Mode并确认右下角显示“Volar (Take Over)”；确保.vue文件语言模式为vue；项目根目录需有tsconfig.json且未排除node_modules。
VSCode 默认配置几乎无法支撑现代前端开发，不装插件等于裸写代码——语法错漏难发现、格式混乱、路径手敲、标签改一半忘另一半，效率直接打五折。真正高效的环境不是靠“多装”，而是选对核心插件并配准规则。
ESLint + Prettier 怎么配才不打架
两者功能重叠但分工明确：ESLint 检查“有没有错”，Prettier 管“好不好看”。常见错误是直接启用两者保存自动格式化，结果 ESLint 报错、Prettier 格式化、再保存又触发 ESLint 修复，形成死循环。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends中把它放在最后，关闭所有和格式相关的规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，且只让Prettier响应formatOnSave -
ESLint插件保持开启，但关掉它的自动修复（即不设eslint.autoFixOnSave），让它专注标错 - 项目级
.prettierrc和.eslintrc.js必须共存，不能只靠全局配置覆盖
Volar 为什么必须替代 Vetur
Volar 是 Vue 3 的官方语言支持插件，而 Vetur 基于 Vue 2 架构，对 Composition API、<script setup></script>、类型推导支持极弱。用 Vetur 开发 Vue 3 项目，会出现 props 类型不提示、defineProps 泛型失效、模板中 ref 解析错误等问题。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 卸载
Vetur后，VSCode 可能仍缓存旧语法高亮，需重启或执行Developer: Reload Window - Vue 3 项目必须在
.vscode/settings.json中加"vue.experimental.enableImportSuggestions": true才能正确解析@/components这类别名路径 -
Volar的hybridMode要手动开启（设为true），否则单文件组件的<template></template>和<script></script>区域无法共享类型上下文
Path Intellisense 怎么让 alias 路径补全生效
光装 Path Intellisense 不行，它默认只识别相对路径和 node_modules。要补全 @/utils 或
这类别名，必须配合项目级路径映射配置。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>确保项目根目录有 <code>jsconfig.json或
tsconfig.json，且含 "baseUrl" 和 "paths" 字段（如 "@/*": ["src/*"]）
Path Intellisense 插件本身不读取 webpack.alias 或 vite.config.ts，只认 tsconfig/jsconfigjsconfig.json 是否在项目根目录，而不是子文件夹；VSCode 必须打开整个项目文件夹，而非仅打开某个 src 子目录Auto Rename Tag 在 JSX 里为什么有时失灵
Auto Rename Tag 对 HTML 原生标签稳定，但在 React / Vue 的 JSX / template 中，它依赖语法解析器识别开闭标签结构。一旦遇到 Fragment（）、自闭合组件（<button></button>）或带条件表达式的标签（{show && <div>}），就容易漏判或误判。
<ul>
<li>不要依赖它修改嵌套过深的 JSX，比如三层以上 <code>div 套 section 套 article，手动改更可靠
"autoRenameTag.activationOnLanguage": ["html", "vue", "javascriptreact", "typescriptreact"]，确保 React 文件被纳入监听editor.action.rename（F2）重命名标签——它基于 AST，更稳但需手动触发插件不是越多越好，真正卡住效率的往往不是缺功能，而是规则没对齐、配置没落地、边界场景没验证。一个 jsconfig.json 少写一个斜杠，Path Intellisense 就补全不了；Volar 的 hybridMode 没开，defineProps 类型就永远是 any ——这些细节，才是环境搭得稳不稳的关键。
