ESLint必须安装且正确配置才生效：需在项目根目录提供.eslintrc.js等配置文件，VSCode中设置"eslint.validate"指定语言，并安装eslint-plugin-react等插件以支持框架规则，否则规则不触发。
ESLint 必须装，但配置错就等于没装
ESLint 不是装上就自动起作用的，它依赖项目级配置文件才能识别规则。没 .eslintrc.js 或 .eslintrc.json，插件只会安静地待在后台，连一个警告都不会报。
常见错误现象：Problems 面板空空如也，但代码里明显有 console.log 或未使用变量；或者只报部分错误，比如不检查 React 特有规则。
- 确认项目根目录存在 ESLint 配置文件（推荐
.eslintrc.js） - 在 VSCode 设置中启用校验语言：添加
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"] - 若用 React/Vue，必须安装对应插件（如
eslint-plugin-react）并写进extends，否则组件相关规则无效 - 避免和 Prettier 规则打架：装
eslint-config-prettier并加入extends数组末尾
Prettier 保存即格式化，但别让它改坏你的逻辑
Prettier 的 formatOnSave 很方便，但默认行为可能把 if 块缩成一行、删掉你特意保留的空行，甚至因换行策略导致 JSX 渲染异常——这不是 bug，是设计如此。
关键参数差异："prettier.semi": false 关闭分号，"prettier.singleQuote": true 强制单引号，这些直接影响可读性和团队协作。
- 务必在项目根目录加
.prettierrc（哪怕只有两行），避免 VSCode 全局设置污染多人项目 - 禁用它对某些文件类型的格式化：在
.prettierignore里加*.config.js、webpack.config.js等，防止配置文件被重排后出错 - 不要同时开启
editor.formatOnSave和eslint.formatOnSave，优先让 Prettier 负责格式，ESLint 负责逻辑
Error Lens 让错误直接“弹”到眼前，不是 hover 才看见
VSCode 默认的错误提示藏在底部状态栏或 Problems 面板里，尤其在写长函数时容易错过。Error Lens 把错误/警告直接印在出错行末尾，红色文字像贴纸一样粘着代码，不用挪动视线。
它不替代 ESLint，而是把 ESLint 的诊断结果“可视化升级”。没装它时，你可能反复保存、切面板、找错误；装了之后，一眼扫过去就知道哪行要修。
- 安装后无需额外配置，默认生效；但建议关掉 VSCode 原生的
editor.errorForeground冲突项 - 配合 ESLint 使用才有意义——如果 ESLint 没跑起来，Error Lens 就是摆设
- 对 TypeScript 项目效果更明显，类型错误（如
Argument of type 'string' is not assignable to parameter of type 'number'）直接怼在调用处
Live Server 别只当预览工具，它是 JS 运行环境的第一道隔离墙
直接双击 HTML 打开文件，JS 会因浏览器同源策略报 CORS 错误，fetch、localStorage、甚至 import 都可能静默失败。Live Server 启一个本地 HTTP 服务，绕过这些限制，让 JS 行为更接近真实部署环境。
它不解决语法错误，但能暴露运行时问题：比如模块路径写错、API 地址漏写 http://、ESM 语法在无服务环境下根本无法加载。
- 右键 HTML 文件 → “Open with Live Server”，端口默认
5500，可在设置里改 - 搭配
liveServer.settings.AdvanceCustomBrowserCmdLine启用无痕模式，避免缓存干扰调试 - 注意：它不替代构建工具（如 Webpack/Vite），只是提供最小可行运行环境；复杂项目仍需启动 dev server
