ESLint与Prettier必须协同配置，ESLint配置文件须置于项目根目录并正确导出，显式声明验证语言类型，配合eslint-config-prettier关闭格式冲突规则，启用editor.codeActionsOnSave实现保存时自动修复。
ESLint 是提升 JavaScript 代码健壮性最直接有效的手段，但光装插件不配规则等于没装；Prettier 负责格式统一，但它不查逻辑错误；两者必须协同，且配置顺序和冲突处理稍有不慎，就会导致保存时格式乱套、报错不显示、甚至自动修复把代码改崩。
ESLint 配置文件必须放在项目根目录
VSCode 的 ESLint 插件默认只认项目级 .eslintrc.js 或 .eslintrc.json，不会向上查找父目录的配置。如果你把它放在子文件夹里，编辑器就当它不存在——此时 Problems 面板一片空白，但你以为是“没毛病”，其实是“没加载”。
- 必须确保
.eslintrc.js在package.json同级目录 - 推荐用
module.exports = { ... }导出对象，避免 CommonJS 和 ESM 混用引发解析失败 - 如果项目用 TypeScript，需额外安装
@typescript-eslint/parser并在parserOptions.parser中指定 - 检查是否误启用了全局 ESLint：VSCode 设置中搜
eslint.packageManager，设为"npm"或"yarn"，避免调用系统全局版本导致规则不一致
eslint.validate 必须显式声明语言类型
VSCode 默认只对 javascript 文件启用 ESLint，但现代项目常含 .jsx、.ts、.tsx，漏掉任一类型，对应文件里的 no-unused-vars 或 eqeqeq 就完全不生效。
- 在 VSCode 的
settings.json中，必须写明："eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"] - 注意
javascriptreact对应 JSX，不是jsx；typescriptreact对应 TSX - 旧版配置里用
"eslint.options"设置 parser 的方式已弃用，现在统一走parserOptions字段 - 若用 Vite 或 Next.js 等框架，还需确认其开发服务器是否也启用了 ESLint —— VSCode 的提示 ≠ 运行时校验
与 Prettier 协同时，rules 冲突必须靠 eslint-config-prettier 关闭
ESLint 和 Prettier 都管引号、分号、空格，但它们的规则机制不同：ESLint 的 quotes 是语义检查，Prettier 的 singleQuote 是纯格式重写。不关闭 ESLint 的格式类规则，保存时会反复拉扯——比如你刚被 Prettier 改成单引号，ESLint 又标红说“该用双引号”。
- 必须安装
eslint-config-prettier，并在extends数组末尾加入：'prettier' - 不能只写
'prettier/react'就以为够了，要按实际用到的语言补全，如：'prettier/typescript' -
prettier规则必须放在extends最后一位，否则会被前面的规则（如airbnb）覆盖 - 不要在 ESLint 的
rules里再手动关格式项（如"semi": "off"），那是重复劳动，且易遗漏
editor.codeActionsOnSave 是自动修复的关键开关
很多人开了 editor.formatOnSave，却没开 editor.codeActionsOnSave，结果保存后只格式化、不修复变量未使用或 === 错写成 == 这类问题——看起来“整洁”，实则漏洞照旧。
- 必须配置：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 如果同时用 TypeScript，可加
"source.fixAll.typescript": true，但注意它和 ESLint 修复可能冲突，建议只留 ESLint - 某些规则（如
no-console）默认不可自动修复，需确认规则文档中标注了fixable: true才能生效 - 别依赖
eslint --fix命令行：它只跑一次，而codeActionsOnSave是每次保存都触发，才是真·实时保障
真正难的不是配出能跑的配置，而是让 ESLint 的报错信息精准落到出问题的那一行、那个变量上——这取决于 parser 是否匹配项目语法（比如用 Babel 解析 TSX）、是否正确识别 import type、是否加载了正确的插件（如 eslint-plugin-react-hooks）。这些细节不出错，才谈得上“健壮性”。
