ESLint 和 Prettier 必须协同配置，因 ESLint 专注逻辑错误检查（如未定义变量、console.log），Prettier 专责格式化（如缩进、引号），但二者默认存在 semi、quotes 等规则重叠，不协调会导致保存时反复格式化、报错、光标跳动；实操需安装 eslint-config-prettier 并在 .eslintrc.js extends 末尾引入以禁用冲突规则，VSCode 中设 "editor.defaultFormatter": "esbenp.prettier-vscode" 且禁用 ESLint 格式化能力（eslint.format.enable: false），确保各司其职。
为什么 ESLint 和 Prettier 必须一起配，但又容易冲突
单独装 ESLint 会标红未定义变量、console.log、隐式全局等逻辑问题；单独装 Prettier 只管缩进、引号、换行这些“长得好不好看”的事。但两者默认规则有重叠（比如 semi 是否加分号），不协调就会导致保存时反复格式化、报错、再格式化，编辑器卡顿甚至崩溃。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上它，显式关掉所有和格式相关的 ESLint 规则 - VSCode 设置里把
editor.defaultFormatter设为esbenp.prettier-vscode，而不是 ESLint 插件本身 - 禁用 ESLint 的自动修复（
eslint.enable保持 true，但不要开eslint.autoFixOnSave），让 Prettier 负责格式，ESLint 只负责报错
路径跳转失效？别急着重装插件，先查 jsconfig.json
写 import { api } from '@/api/user' 却 Ctrl+点击跳不到文件，大概率不是插件没装，而是项目缺少路径映射声明。VSCode 默认只认相对路径（../、./），@/ 这种 alias 是 Webpack/Vite 配的，编辑器并不知道。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录新建
jsconfig.json（TS 项目用tsconfig.json），写入"baseUrl": "."和"paths": { "@/*": ["src/*"] } - 确保插件已装
Path Intellisense或官方TypeScript插件（自带路径解析能力） - 改完配置后重启 VSCode，不要只重载窗口——旧的 language server 缓存可能没清掉
Live Server 启动后页面空白或 404？检查文件位置和端口占用
点 Go Live 按钮后浏览器打不开，或者打开是空白页、Network 显示 404，常见原因不是插件坏了，而是启动上下文错了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须右键点击一个
.html文件再选Open with Live Server，不能只在文件夹上右键，也不能从空标签页点按钮 - 如果提示端口被占（如
EADDRINUSE），去.vscode/settings.json加一行："liveServer.settings.port": 5501，避开默认的 5500 - 若页面空白但控制台无报错，检查 HTML 是否有
<body>标签且未被注释掉——Live Server 不会报语法错误，只原样吐出 HTML
Vue 模板里变量悬停不跳转？Volar 和 Vetur 别共存
Vue 3 项目里鼠标 hover {{ name }} 没反应，点不了跳 data 定义，基本是插件打架。Volar 是 Vue 官方推荐的 Vue 3 语言支持工具，Vetur 是 Vue 2 时代的遗产，两者同时启用会导致类型服务互相覆盖，光标悬停、自动补全全部失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卸载
Vetur，哪怕项目里还有 Vue 2 文件——Volar 兼容 Vue 2 模板，但反向不成立 - 确认
Volar已启用，并在 VSCode 设置里搜volar.ignores，把不需要类型检查的目录（如node_modules、dist）加进去，避免卡顿 - 如果用了
vue-helper，它的变量跳转功能依赖 Volar 提供的 AST，Volar 挂了它也跟着失灵
