前端项目质量靠ESLint+Prettier+JavaScript Booster三件套在编码中实时拦截、自动修复、安全重构形成闭环，缺一不可；ESLint需确认启用并识别文件类型，Prettier与ESLint冲突时须用eslint-config-prettier关闭格式规则，JavaScript Booster重构依赖光标精准定位语法节点，质量收益仅在持续编码中显现。

直接上结论：前端项目质量不是靠人工 Review 堆出来的，而是靠 ESLint + Prettier + JavaScript Booster 这三件套在编码过程中实时拦截、自动修复、安全重构形成的闭环。缺一不可，只装一个等于白装。

ESLint 配置不生效？先确认它是否真在运行

常见错误现象是：写了 .eslintrc.js，也装了插件，但编辑器里没报错、也没波浪线提示——大概率是 ESLint 没真正接管当前文件。

• 检查当前打开的文件是否属于 ESLint 能识别的范围（比如后缀是 .js、.jsx、.ts，且不在 .eslintignore 里）
• 右下角状态栏点 ESLint 图标，看是否显示 “ESLint is disabled for this workspace”；如果是，点击启用并选中对应配置文件
• VS Code 设置里搜 eslint.enable，确保值为 true
• 如果项目用 TypeScript，必须装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，否则 const foo: string = 'bar' 这类语法会直接被忽略

Prettier 和 ESLint 冲突时，谁该让步？

典型表现是：保存后代码来回“抖动”——先按 Prettier 格式化，再被 ESLint 改回去，或者报一堆 prettier/prettier 错误。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 根本原因不是规则打架，而是没用 eslint-config-prettier 关闭 ESLint 中与格式相关的规则
• 必须在 extends 数组末尾加上 'prettier'（注意不是 'prettier/react' 这类子集）
• editor.formatOnSave 应设为 true，但 editor.defaultFormatter 必须指定为 Prettier 插件 ID（如 esbenp.prettier-vscode），不能留空或设成 ESLint
• 不要手动在 rules 里一条条关格式规则，那是倒退；eslint-config-prettier 就是干这个的

JavaScript Booster 的重构操作为什么有时不出现？

灯泡图标（light bulb）没亮，或点了没选项，不是插件坏了，而是它对上下文极其敏感。

立即学习“前端免费学习笔记（深入）”；

• 光标必须落在可重构的语法节点上：比如 var 行要停在 var 上，if 语句要停在 if 关键字上，而不是花括号里
• 函数体为空、或含 return 外的副作用（如 console.log、fetch）时，“Convert to arrow function” 会被禁用——这是保护语义，不是 bug
• 模板字符串转换（Replace with template string）只对纯字符串拼接生效，遇到 str1 + ' ' + str2 + '!' 才触发，str1 + getSuffix() 就不会
• 它不支持 JSX 内联表达式里的重构，比如 {a === 1 ? 'yes' : 'no'} 不会弹出 “Replace with ?:” 选项

最容易被忽略的一点：这些插件的质量收益只在你**持续编码时**显现。一旦关掉 ESLint 或跳过 Prettier 保存，或者手动改掉 Booster 推荐的重构，整条质量链就断了——没有“阶段性验收”，只有“每行代码都在校验”。