eslint + prettier + javascript booster 组合可实现错误拦截、格式统一与安全重构全链路质量提升;需正确配置规则(如 eslint:recommended)、禁用冲突(eslint-config-prettier)、对齐格式参数,并注意三者执行顺序及插件触发条件。

直接上结论:对 JavaScript 项目来说,ESLint + Prettier + JavaScript Booster 这三个插件组合,能覆盖从错误拦截、格式统一到安全重构的全链路质量提升,且无明显冲突、开箱即用。
ESLint 要配对规则,不是装了就生效
装了 ESLint 插件但没报错?大概率是没配规则或项目里没 .eslintrc.js。它本身不带默认强约束,必须明确指定检查范围。
- 新手建议从
eslint:recommended开始,再按需加plugin:react/recommended或plugin:vue/vue3-recommended -
no-unused-vars、no-console这类规则默认关闭,得手动设为"error"或"warn" - 和
Prettier一起用时,必须加eslint-config-prettier,否则会互相打架——比如一个要分号,一个不要,保存时来回切 - VS Code 设置里打开
editor.codeActionsOnSave并配置"source.fixAll.eslint",才能实现保存自动修复
Prettier 的格式化行为受 .prettierrc 控制
Prettier 不是“越智能越好”,它是强制风格统一的工具,所有格式决策都来自配置文件,而不是上下文推断。
- 常见误配:
semi: true和singleQuote: false同时存在,但团队习惯用单引号+无分号,结果每次保存都翻车 -
printWidth设成 100 会导致 JSX 行过长,推荐 80–90;tabWidth必须和editor.tabSize保持一致,否则缩进错乱 - 如果项目用了
create-react-app或Vite,注意它们自带 Prettier 配置,插件版本最好和脚手架一致,否则prettier --write命令和编辑器格式化结果可能不一致
JavaScript Booster 的重构操作依赖光标位置
这个插件的灯泡(light bulb)只在特定语法节点上触发,不是任意代码都能点。它不扫描整文件,只响应当前光标所在表达式或语句。
- 想把
function改成箭头函数,光标必须停在function关键字上,停在函数名或参数里都不行 -
Convert to const对var有效,但对let无效——因为let可能后续被重新赋值,插件会保守判断 -
Replace with template string只识别+拼接字符串的简单模式,像'a' + b + 'c' + d可以,但'a' + (b ? c : d)就不会出现选项 - 它不做 AST 全局分析,所以跨作用域的变量重命名、提取函数等高级重构不在能力范围内——那是
ESLint或专用 IDE 的事
真正容易被忽略的是三者协作时的执行顺序:编辑器先走 Prettier 格式化,再触发 ESLint 自动修复,最后才响应 JavaScript Booster 的手动重构。如果某步出错(比如 .prettierrc 语法错误),后面两步可能静默失效,而界面没有任何提示。











