ESLint与Prettier不打架的关键是：本地安装依赖、eslint-config-prettier置于extends末位、禁用javascript.validate.enable、关闭formatOnSave而启用codeActionsOnSave触发ESLint自动修复。
直接说结论：插件不是越多越好，真正影响开发体验的只有 5 类核心能力——语法校验、格式化、框架支持、路径补全、标签同步。其他插件要么冗余，要么掩盖了配置问题。
ESLint + Prettier 怎么配才不打架
常见错误现象：保存后缩进变两格又变四格、'quotes' is defined but never used、ESLint fix on save 不生效。本质是规则冲突 + 插件职责错位。
- 必须本地安装
eslint和prettier（不是全局），VS Code 的 ESLint 插件默认不 fallback 到全局版本 -
eslint-config-prettier必须出现在.eslintrc.js的extends数组末尾，顺序错了就白装 - 禁用 VS Code 自带的 JS/TS 校验：
"javascript.validate.enable": false，否则会和 ESLint 报重叠错误 - 不要开
editor.formatOnSave，改用editor.codeActionsOnSave触发 ESLint auto-fix，否则 Prettier 会覆盖 ESLint 的修复结果
Vue3 项目为什么 Volar 比 Vetur 强
Vue3 的 Composition API 和 <script setup> 语法改变了类型推导逻辑，Vetur 基于旧版 Vue2 解析器，无法正确处理响应式声明、defineProps 类型、模板内表达式类型检查。
- Volar 启用
hybridMode: true才能同时支持<script>和<script setup>的类型跳转 - props 命名需用
kebab-case（如user-name）才能被 Volar 正确识别，驼峰写法在模板中会失效 - 如果用了
unplugin-vue-components自动导入，Volar 需额外配置"vue.autoImportComponent": true - Volar 不兼容老项目里的
vue-class-component，遇到就只能降级或重构
Path Intellisense 为什么总找不到 @/components
路径别名（alias）不是插件自动识别的，它依赖项目级配置文件，插件只是读取并补全。
立即学习“前端免费学习笔记（深入）”；
- 必须在
jsconfig.json或tsconfig.json中明确定义"paths"，例如：{"@/*": ["src/*"]} - 别名前缀不能只写
@，必须带斜杠，@components不会被识别，@/components才行 - 如果项目用 Vite，
vite.config.ts里也得同步配置resolve.alias，否则运行时会报错，但 Path Intellisense 不报错——这是最隐蔽的坑 - 插件默认不扫描
node_modules下的路径，想补全第三方包路径得手动加"path-intellisense.mappings"配置项
Auto Rename Tag 在 JSX 里失效怎么办
这不是插件坏了，而是 VS Code 默认把 .tsx 文件关联到 typescriptreact 语言模式，而 Auto Rename Tag 默认只激活在 html、vue、xml 模式下。
- 打开设置搜
files.associations，加一条："*.tsx": "typescriptreact"（确保语言模式正确） - 再搜
auto-rename-tag.activation，把typescriptreact加进数组里 - 重启窗口，否则新配置不生效
- React 开发中更推荐用
ES7+ React/Redux/React-Native snippets生成组件骨架，比手敲 + 重命名更稳
真正卡住人的从来不是插件装没装，而是语言模式识别错、本地依赖缺失、路径配置不同步、规则顺序颠倒——这些细节不调明白，装一百个插件也救不了开发体验。
