javascript booster插件通过语义感知的光标触发式重构（如convert to const、replace with ?:、convert to arrow function），在vscode中实现安全、即时的代码结构转换，避免手动修改引发的作用域、this绑定或副作用错误。
JavaScript 动态行为不是靠猜，而是靠插件实时反馈和安全重构来掌控。 VSCode 本身不执行 JS，但配合合适插件，你能在写代码时就看到变量值变化、安全转换语法结构、一键触发 DOM 更新效果——这才是“掌控”的真实含义。
怎么让 JS 代码边写边运行、立刻看到结果
别等保存再切到终端敲 node 或开浏览器刷新。用 Code Runner 或 Quokka.js 才是正解。
-
Code Runner：右上角点 ▶ 按钮，或按Ctrl+Alt+N，结果直接输出在 OUTPUT 面板。适合纯逻辑测试，比如数组方法、字符串处理 -
Quokka.js：更进一步，它会在编辑器里行内显示变量值、表达式结果，甚至标记出未执行分支。比如写const a = 1 + 2;，右边立刻出现//? 3 - 注意：
Code Runner默认不支持require或模块导入；Quokka.js在有import时需配置quokka.js文件或启用 ES modules 模式
为什么改 if-else 或函数写法时总怕出错
因为手动改容易漏掉作用域、this 绑定、副作用逻辑。而 JavaScript Booster 的重构选项是语义感知的——它只在安全前提下才亮灯泡。
- 光标停在
if上，选Replace with ?:，它会检查分支是否都返回值、是否有赋值副作用，再决定能否压缩 - 对
function点灯泡转箭头函数，它自动处理arguments、this、new.target等隐式绑定变化，避免运行时报错 - 如果函数体含
return多次或有try/catch，它干脆不提供转换选项——这不是功能缺失，是刻意保护
调试动态 DOM 更新时断点总失效？
常见原因是断点打在事件回调外、没等异步完成、或 DOM 还没挂载。用 VSCode 内置 JavaScript Debugger + Live Server 组合才能稳住。
- 先用
Live Server启动页面（右键 HTML →Open with Live Server），确保 JS 在真实浏览器环境运行 - 在 JS 文件中打断点，然后按
F5启动调试（选pwa-chrome环境），VSCode 会自动连接 Chrome 并同步断点 - 遇到
fetch或setTimeout后的 DOM 操作，别在回调第一行打断点——先在then或callback入口处设断点，再用 “Step Into” 跟进去 - 检查
launch.json中url字段是否指向http://127.0.0.1:5500/xxx.html（Live Server 默认端口），否则调试器连不上
ESLint 和 Prettier 总打架怎么办
不是插件冲突，是你没告诉它们谁管什么。ESLint 负责逻辑规则（比如 no-unused-vars），Prettier 只管格式（比如缩进、分号）。两者必须协同，不能互踩。
- 在
.eslintrc.js中加extends: ['eslint:recommended', 'prettier']，让 Prettier 规则关闭 ESLint 里重复的格式检查项 - VSCode 设置里明确指定格式化工具：
"editor.defaultFormatter": "esbenp.prettier-vscode" - 关键：关掉
eslint.format.enable（默认 false），否则 ESLint 会试图格式化，和 Prettier 冲突 - 如果保存后代码被反复重排，大概率是某个插件启用了
formatOnSave但没配 defaultFormatter，查settings.json里有没有多余配置
真正难的不是装插件，而是理解每个插件的边界——Quokka 不替代单元测试，Booster 不代替代码审查，Debugger 也不能绕过异步原理。插件只是把“看不见的 JS 行为”变成编辑器里可触、可停、可推演的信号。一旦习惯这种反馈节奏，动态性就从麻烦变成了可控变量。
