JavaScript Booster、ESLint+Prettier、Quokka.js 三大插件分别实现智能重构、保存即校验格式化、实时代码执行反馈，均以不打断编码流为设计核心，通过 AST 分析、配置协同与块级执行保障安全高效。
JavaScript 代码写得顺不顺，关键不在语法本身，而在编辑器能不能“懂你”——不是猜你要打什么，而是知道你刚写了 var 就该提醒改成 const，看到 if 就能一键转成三元，光标停在字符串里就弹出模板字面量建议。这些不是幻想，是插件落地的真实手感。
JavaScript Booster：重构操作不靠记忆，全靠灯泡提示
它不改你的编码习惯，只在你写完一行后悄悄亮起左侧的黄色灯泡。这个灯泡不是装饰，是安全重构的入口。
- 常见错误现象：手写
var str = 'hello'后忘记升级到const，或函数写成function foo() {}却没意识到箭头函数更简洁 - 使用场景：日常编码中任意光标停留位置，无需选中、无需快捷键，只要悬停就有上下文敏感选项
- 参数差异：所有转换都基于 AST 分析，比如
Convert to arrow function会判断是否含this或arguments，有则禁用该选项，避免语义破坏 - 性能影响：无后台进程，纯前端解析，响应延迟低于 50ms；但大型文件（>2000 行）首次触发稍慢，属正常现象
ESLint + Prettier：保存即校验+格式化，不是“选配”是“默认动作”
单装 ESLint 只报错不修复，单装 Prettier 只动格式不管逻辑——二者必须协同，且配置必须对齐，否则保存时互相打架。
- 常见错误现象：
editor.formatOnSave开了，但格式化后 ESLint 仍标红，原因是 Prettier 的quotes规则和 ESLint 的quotes冲突 - 使用场景：新建 JS 文件、修改已有逻辑、Code Review 前自动过一遍风格
- 参数差异：必须在
settings.json中明确指定"editor.defaultFormatter": "esbenp.prettier-vscode"，同时确保eslint.validate包含"javascript"和"javascriptreact" - 兼容性影响：若项目用的是旧版
.eslintrc.js且未 extendprettier，需手动加extends: ['prettier']关闭 ESLint 中与 Prettier 重叠的规则
Quokka.js：不用跑 server，变量值直接贴在代码边上
它不是 REPL，也不是终端输出，而是把执行结果以注释形式实时写在你代码下方——写一句 arr.map(x => x * 2)，右边立刻显示 [2,4,6]。
- 常见错误现象：为测一个数组方法反复切窗口、开 console、粘贴、回车，结果忘了删 log
- 使用场景：验证正则匹配、调试数组链式调用、快速看对象展开结构、临时算个时间戳差值
- 性能影响：默认只运行光标所在块（block-scoped），但若写
while(true) {...}会卡死，需手动中断（Cmd/Ctrl + K） - 容易踩的坑：不支持模块顶层 await，想测异步得包进 IIFE，例如
(async () => { console.log(await fetch(...)) })()
真正提升舒适度的，从来不是功能堆砌，而是每个操作都有确定反馈、每次重构都不怕出错、每行代码写完就知道它“看起来对不对”。这些插件的共同点是：不打断你，只增强你正在做的事——这点比任何炫技功能都难做到，也最值得花五分钟装好、配准、用熟。
