ESLint与Prettier需协同配置：ESLint管逻辑规范，Prettier专管格式；须装eslint-config-prettier并置于extends末尾以禁用冲突规则；VS Code中启用formatOnSave和fixAll.eslint；Vue 3项目应弃Vetur改用Volar，并配好tsconfig.json/jsconfig.json及paths别名。
ESLint + Prettier 怎么配才不打架
这两个不是“选一个”，而是必须一起装、但必须明确分工：ESLint 负责逻辑和规范检查（比如 no-unused-vars、react-hooks/exhaustive-deps），Prettier 只管格式（缩进、引号、换行）。冲突几乎全来自 ESLint 里那些格式类规则。
- 务必安装
eslint-config-prettier，并在.eslintrc.cjs的extends数组末尾加上它，否则quotes、semi等规则会和 Prettier 对着干 - VS Code 设置里加这两句，保存时自动修复+格式化：
"editor.formatOnSave": true,<br>"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 别在
settings.json里手动设eslint.options指向全局 node_modules —— 项目本地的node_modules/.bin/eslint才是真实环境，否则类型推导和插件解析常失效
Vue 3 项目还在用 Vetur？赶紧换 Volar
Vetur 已停止维护，对 Vue 3 的 setup()、defineProps 泛型、ref 类型推导支持极弱，甚至会报错“Cannot find name ‘defineProps’”。Volar 是 Vue 官方推荐、TypeScript 原生集成的方案，开箱即用。
- 卸载 Vetur 后，重启 VS Code —— 不重启的话 Volar 的语言服务器可能无法接管 .vue 文件
- 确保项目有
tsconfig.json或jsconfig.json，否则 Volar 的类型跳转（F12）和自动导入常失效 - 如果
<script setup lang="ts">里 import 的组件没提示，检查compilerOptions.types是否包含"@vue/runtime-dom"
路径补全为什么 import '@/components/Btn.vue' 不提示？
Path Intellisense 默认不识别 @ 别名，它只认物理路径或 jsconfig.json/tsconfig.json 里声明的 paths。直接写 ./../../ 能提示，但 @/ 报红或无响应，就是配置断了。
- 在
jsconfig.json根目录下加："compilerOptions": {<br> "baseUrl": ".",<br> "paths": {<br> "@/*": ["src/*"]<br> }<br>} - 改完后必须重载窗口（Cmd+Shift+P → “Developer: Reload Window”），缓存不刷新，补全永远不生效
- 别依赖插件自己的
path-intellisense.mappings设置 —— 它只处理纯字符串映射，无法解析 TypeScript 的模块解析逻辑，容易和实际构建行为不一致
Live Server 自动刷新为啥有时不触发？
它监听的是文件系统变更，不是 webpack/vite 的 HMR 输出。当你用 vite dev server 启动项目时，Live Server 其实是多余的，还可能因端口冲突或静态资源路径不对导致白屏。
立即学习“前端免费学习笔记（深入）”；
- 仅对纯 HTML/CSS/JS 静态页有效；React/Vue 项目请用框架官方 dev server（
vite dev或npm start） - 如果 HTML 里引用了
./dist/bundle.js，而 Live Server 根目录不是dist，就刷不出 JS —— 它不会自动推导构建产物路径 - 右键菜单里“Open with Live Server”启动的端口默认是
5500，若被占用会静默失败，看状态栏右下角有没有显示端口号来确认是否真启动了
tsconfig.json，或多一个未禁用的 ESLint 格式规则，整个体验就从“顺滑”变成“反复 reload 窗口查文档”。 
