靠单个插件无法真正提升JavaScript代码专业度,必须组合使用ESLint(检查逻辑)、Prettier(统一格式)和JavaScript Booster(重构表达)三类工具;ESLint需配置文件、正确validate设置及TypeScript解析器支持,Prettier冲突规则应通过eslint-config-prettier禁用,VSCode须配置defaultFormatter、codeActionsOnSave等关键项。

直接上结论:靠单个插件没法真正提升 JavaScript 代码的专业度,必须组合使用 ESLint、Prettier 和 JavaScript Booster 这三类工具,各自承担不同角色——检查逻辑、统一格式、重构表达。
ESLint 配置不生效?先确认这三件事
很多开发者装了插件却看不到波浪线报错,根本原因是 ESLint 没真正接管项目。它不是“装了就用”,而是依赖配置文件和上下文激活。
- 项目根目录必须存在
.eslintrc.js或.eslintrc.json(空文件也行,但得有) -
eslint.validate设置里要明确包含"javascript"和"javascriptreact",否则 JSX 文件不会被检查 - 如果用了 TypeScript,必须额外安装
@typescript-eslint/parser并在配置中指定parser: '@typescript-eslint/parser',否则const foo: string = 'bar'会直接报语法错误
常见错误现象:no-unused-vars 规则对函数参数不触发 → 很可能是 env 里没设 es2021: true,导致解析器不识别现代解构语法。
Prettier 和 ESLint 冲突时怎么选?别硬刚,用 eslint-config-prettier
两者职责不同但规则重叠,比如 semi(分号)、quotes(引号)、arrow-parens(箭头函数括号),手动关掉 ESLint 的对应规则既麻烦又易漏。
- 执行
npm install eslint-config-prettier --save-dev - 在
.eslintrc.js的extends数组末尾加上'prettier'(注意顺序:必须放在最后) - VSCode 设置里保持
"editor.formatOnSave": true,但把格式化交给Prettier,ESLint 只负责报错
性能影响:启用 eslint-config-prettier 后,ESLint 启动速度略快,因为跳过大量格式类规则校验;但首次打开大项目时仍可能卡顿 1–2 秒,这是正常解析开销。
JavaScript Booster 不是玩具,它的重构操作有作用域边界
它能一键把 function 转成箭头函数、if-else 压成三元、var 升级为 const,但所有转换都基于 AST 分析,不是字符串替换,所以安全——前提是变量没被动态赋值或跨作用域捕获。
- 遇到
eval()、with或Function构造函数时,灯泡图标会自动消失,这是插件主动规避风险 - 对
for...in循环转Object.keys().forEach()这类操作,它只在确定键名可枚举且无原型污染时才提供选项 - “Split into declaration and initialization” 在 class 成员变量上无效,因为
class A { x = 1 }是初始化语法,不是声明+赋值两步
容易踩的坑:在 Webpack/rollup 构建后代码里点灯泡,大概率没反应——插件只作用于源码(.js 或 .ts),不处理打包产物。
别忽略 settings.json 里的关键开关
插件能力再强,VSCode 自身设置不对,照样白搭。以下三项必须手动核对:
-
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 不设这个,formatOnSave就会调用内置格式器,破坏 Prettier 规则 -
"javascript.suggest.autoImports": false—— 开启后 VSCode 会自动加import,但常把lodash拆成几十个命名导入,反而增加 bundle 体积 -
"editor.quickSuggestions": { "other": true, "comments": false, "strings": false }—— 关闭字符串内补全,避免在正则或模板字符串里误触console.log提示
最常被忽略的是 editor.codeActionsOnSave:光有 formatOnSave 不够,还得配 {"source.fixAll.eslint": true} 才能在保存时自动修复 no-console、quotes 这类可修规则。


















