ESLint报缩进错误是因与Prettier职责重叠，应禁用ESLint格式规则：安装eslint-config-prettier并置于extends末尾，关闭indent/quotes/semi等规则，VSCode设Prettier为默认格式化器且启用formatOnSave。
ESLint 和 Prettier 冲突时怎么配才不报红
ESLint 报 Expected indentation of 2 spaces but found 4 这类错误，大概率不是规则写错了，而是 ESLint 和 Prettier 在“谁管格式”这件事上打架了。Prettier 负责统一缩进、引号、分号；ESLint 的 indent、quotes、semi 等规则如果也开着，就会重复校验，导致冲突。
正确做法是让 ESLint 只管逻辑和潜在错误（比如 no-unused-vars、react-hooks/exhaustive-deps），格式全交给 Prettier：
- 安装
eslint-config-prettier，并在.eslintrc.js的extends中把它放在最后，覆盖掉所有与格式相关的 ESLint 规则 - 禁用 VSCode 的
eslint.autoFixOnSave，改用editor.formatOnSave+prettier作为默认 formatter - 确保
prettier插件版本和项目中prettier依赖版本一致（比如都是3.3.3），否则.prettierrc里写的tabWidth: 2可能被忽略
Vue 项目该装 Volar 还是 Vetur
Vue 3 项目必须用 Volar，Vetur 已停止维护，且对 <script setup></script>、组合式 API 类型推导支持极差。装错会导致 ref 类型丢失、defineProps 提示失效、甚至整个 .vue 文件失去语法高亮。
常见误操作：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 同时启用
Volar和Vetur：VSCode 会随机启用其中一个，行为不可预测，建议卸载Vetur后重启编辑器 - 没关掉
Volar的 Take Over 模式：在 Vue 项目根目录打开命令面板（Ctrl+Shift+P），运行Volar: Switch Hosting Mode，选Take Over Mode才能获得完整 TS 支持 - TSX 或纯 JS 项目里误启 Volar：它会干扰非 Vue 文件的类型检查，可在工作区设置里加
"volar.disableWhenNoVue": true
路径别名（@/）点不开跳转怎么办
写了 import utils from '@/utils' 却无法 Ctrl+Click 跳转，不是插件没装，而是 VSCode 根本不知道 @ 指向哪。Path Intellisense、Volar、TypeScript 三者都依赖同一份路径映射配置，但各自读取方式不同。
必须同时满足三项：
- 在
jsconfig.json或tsconfig.json里声明compilerOptions.baseUrl和paths（例如"@/*": ["src/*"]） - 确保
jsconfig.json存在于项目根目录（哪怕只是空对象{}），否则 TS 语言服务不启动，Volar 就没法解析别名 - VSCode 设置里打开
"typescript.preferences.importModuleSpecifier": "relative"，否则跳转会生成绝对路径，破坏原有别名结构
Live Server 修改 HTML 后不自动刷新
点击 Go Live 启动服务后，改完 index.html 却没反应，大概率是 Live Server 默认只监听 .html 和 .htm，而你改的是 .vue 或构建产物（如 dist/index.html）。
解决方法取决于你的真实场景：
- 开发阶段直接编辑单页 HTML：在设置里搜
liveServer.settings.fileExt，把["html", "htm", "php", "md"]扩展成包含"vue"（但注意：Live Server 不解析 Vue 模板，只做静态托管） - Vue/React 项目调试构建后页面：不要用 Live Server，改用框架官方 dev server（
npm run serve或vite dev），它自带 HMR 和 sourcemap - 需要监听 CSS/JS 变更并刷新：在
settings.json加"liveServer.settings.AdvanceCustomBrowserCmdLine": ["--disable-web-security"]并配合livereload插件，但更推荐直接换用Browser SyncCLI
真正麻烦的不是插件装不装，而是每个插件背后都绑着一套配置链路——tsconfig.json 影响 Volar，jsconfig.json 影响路径跳转，.eslintrc 和 .prettierrc 的加载顺序决定谁说了算。漏掉其中一环，表面看着插件都亮了，实际功能全断连。
