ESLint + Prettier + Quokka.js 是 JavaScript 代码优化最实用的三件套，缺一不可：ESLint 负责静态检查发现逻辑隐患，Prettier 统一代码格式，Quokka 提供即时执行验证结果。
直接说结论：ESLint + Prettier + Quokka.js 是 JavaScript 代码优化最实用的三件套，缺一不可。其他插件要么功能重叠，要么只解决局部问题。
ESLint：静态检查必须开，但别让它报错到崩溃
它不是“美化工具”，而是帮你提前发现 undefined 引用、no-unused-vars、no-console 等真实隐患的守门员。不配好规则，它会疯狂报错，反而让人关掉。
- 项目根目录必须有
.eslintrc.js或.eslintrc.cjs，纯 JSON 不支持动态逻辑（比如根据环境开关规则） - 推荐继承组合：
eslint:recommended+plugin:react/recommended（React 项目）或plugin:vue/vue3-recommended（Vue 项目） - 务必装
eslint-config-prettier，否则和 Prettier 规则打架，比如一个要分号一个不要，保存时来回改 - VS Code 设置里打开
editor.codeActionsOnSave→source.fixAll.eslint，保存即自动修复可修项
Prettier：格式统一靠它，但别让它接管所有规则
它只管“怎么排版”，不管“写得对不对”。和 ESLint 搭配时，Prettier 负责 printWidth、tabWidth、singleQuote 这类风格项，ESLint 管逻辑和质量。
- 设置
editor.defaultFormatter为esbenp.prettier-vscode，否则格式化可能调用错引擎 - 禁用
editor.formatOnSave改用editor.codeActionsOnSave→source.formatDocument，避免和 ESLint 自动修复冲突 - 如果团队用缩进 2，就设
prettier.tabWidth: 2；用单引号就设prettier.singleQuote: true，别留默认值 - 注意：Prettier 对 JSX 属性换行很激进，若项目要求属性每行一个，需额外加
prettier.jsxSingleQuote: false并配合 ESLint 的react/jsx-props-no-multi-spaces
Quokka.js：写 JS 逻辑前先“试跑”，比 console.log 快十倍
它不是调试器，是“即时沙盒”——光标停在哪，就运行到哪，变量值、返回值、甚至错误堆栈直接标在代码旁边。重构函数、验证算法、测边界条件，全靠它省去 console.log + 删删改改的循环。
- 新建文件后按
Ctrl+K J（Mac 是Cmd+K J）启动 Quokka，不用手动配置 - 支持
it.only风格的块级运行：在某段代码前加//?，只执行这行及后续上下文 - 注意：它默认不读
node_modules，若用了lodash等包，需在文件顶部加// @ts-ignore或显式import - 别在生产代码文件里长期开着 Quokka，它会持续监听变更、占用内存；用完右键 → “Stop Quokka” 即可
真正容易被忽略的是三者协作的边界：ESLint 查“能不能这么写”，Prettier 定“写成什么样”，Quokka 验“这么写结果对不对”。少一个，优化就断链——比如只用 Prettier，代码能好看但可能漏掉未定义变量；只用 Quokka，运行结果正确但格式混乱、难以协作。
