ESLint 和 Prettier 是 JS 代码质量的底线，缺一不可；ESLint 需配置规则才能生效，Prettier 专注格式不改语义，JavaScript Booster 提供安全重构，Quokka.js 辅助实时逻辑验证。
ESLint 和 Prettier 是 JS 代码质量的底线，缺一不可；其余插件都是在它们基础上做「精准提效」或「减少认知负担」。
ESLint：必须配好规则再启用
它不是装上就起作用的工具，而是依赖配置文件才能识别错误和风格问题。没配置的 ESLint 插件只会标出极少数语法错误，比如 undefined 引用或重复声明，对实际项目几乎无效。
- 项目根目录必须有
.eslintrc.js或.eslintrc.json，否则插件基本不工作 - 推荐从
eslint:recommended起步，再按需加plugin:react/recommended或plugin:vue/vue3-recommended - 若同时用 Prettier，一定要装
eslint-config-prettier并在extends中靠后引入，否则格式冲突会导致保存时反复修正 - 常见报错如
'React' is not defined，本质是没启用plugin:react或漏写/* global React */注释
Prettier：格式统一靠它，但别让它改语义
它只管格式，不管逻辑。有人误以为开了 editor.formatOnSave 就万事大吉，结果发现箭头函数被自动拆成多行、模板字符串被强制换行、甚至三元表达式被重排——这些都不是 bug，是 Prettier 的默认行为。
- 关键配置项只有几个：
printWidth（建议设为80或100）、tabWidth（通常2）、semi（false更符合现代 JS 风格）、singleQuote（true） - 不要用 Prettier 处理 JSX 中的复杂逻辑块，比如嵌套三元或长链式调用，它会破坏可读性；这类地方更适合手动格式或交给
JavaScript Booster智能重构 -
prettier.ignore文件里应排除node_modules、构建产物（dist/、build/）和第三方库的类型声明文件（*.d.ts）
JavaScript Booster：重构动作要“信得过”
它不是炫技工具，而是把常见重构操作封装成光标悬停即触发的安全命令。很多人试过一次就停不下来，是因为它不瞎猜变量作用域、不破坏闭包、不漏掉 this 绑定。
- 典型可用场景：
var→const/let、普通函数 → 箭头函数、+拼接 → 模板字符串、if-else→ 三元、split into declaration and initialization - 它不会对
function声明提升（hoisting）的代码做转换，也不会把带arguments或new.target的函数转成箭头函数——这点比手写脚本可靠得多 - 注意：它不检查类型，也不校验是否破坏了模块导出逻辑，所以重构后仍需跑一遍单元测试
Quokka.js：验证逻辑前先看一眼值
写 JS 时最常卡在“这段代码跑出来到底是什么”，而不是语法错没错。Quokka 直接在编辑器里显示变量值、表达式结果、甚至异步 await 后的返回，省去 console.log + 刷新 + 清 log 的循环。
- 支持实时执行片段：选中
arr.map(x => x * 2)，右键选Quokka: Run Selected Code，结果立刻出现在注释行下方 - 对 Promise 友好：写
await fetch('/api')不会报错，而是显示 pending → resolved/rejected 状态及响应体 - 慎用于含副作用的代码（如修改全局状态、调用 API 写库），避免本地反复触发真实请求
- 它不替代单元测试，但能快速筛掉 70% 的低级逻辑错误，尤其适合调试数据处理函数和 hooks
真正影响 JS 代码质量的，从来不是插件数量，而是 ESLint 规则是否贴合团队真实协作习惯、Prettier 是否被当作格式守门员而非代码改写器、以及重构类插件是否敢在复杂上下文中保持语义不变——这些细节，比装十个插件更难也更重要。
