JavaScript Booster通过光标位置触发精准重构，支持函数转箭头函数、if-else转三元、声明赋值拆分；ESLint与Prettier需正确配置避免格式冲突；Quokka.js适用于局部实时验证而非完整REPL；代码片段补全依赖文件语言模式识别。
JavaScript Booster 能自动重构但别乱点灯泡
它不是“一键优化”，而是依赖光标位置触发精准重构。比如 var str = 'hello' 这行，光标必须停在 var 上才能弹出 “Convert to const”；停在字符串里，灯泡只提供模板字面量转换。常见错误是光标放错位置，结果没反应，误以为插件失效。
真正实用的场景有三个：
• 函数声明转箭头函数（function foo() {} → const foo = () => {}）
• if-else 转三元（if (x) a = 1; else a = 2; → a = x ? 1 : 2;）
• 拆分声明与赋值（let a = 123; →
let a;<br>a = 123;），适合调试时隔离变量初始化逻辑
注意：它不会处理带副作用的表达式。比如 if (a++) { ... } 不会建议转三元，因为 a++ 的自增行为无法安全内联——这点它判断得很准，但新手可能不理解为什么选项突然消失。
ESLint + Prettier 组合配置容易冲突
两者都改代码格式，但规则打架。典型现象是保存后代码反复“抖动”：Prettier 把分号删了，ESLint 又加回来，再保存又删……根本原因是 eslint-config-prettier 没启用。
必须做三件事：
• 安装 esbenp.prettier-vscode 和 dbaeumer.vscode-eslint
• 在项目根目录加 .eslintrc.js，extends 数组里包含 'prettier'（不是 eslint-config-prettier，那是包名，实际写的是字符串 'prettier'）
• VS Code 设置里关掉 editor.formatOnSave，改用 ESLint 的 eslint.format.enable，让它统一接管格式化
否则你会看到控制台报错 ESLint: Failed to load config "prettier" to extend from，或者格式化行为不可预测。
Quokka.js 实时执行 JS 片段但别当 REPL 用
它不是 Node REPL 替代品，而是为“局部验证”设计的：光标停在某一行，按 Ctrl+K Ctrl+J（Mac 是 Cmd+K Cmd+J），立刻显示该行执行结果和变量值。适合快速验算表达式、测函数返回、看数组 filter 后剩几个元素。
典型误用：
• 写了 console.log() 还想让它输出——Quokka 不走 console，它直接在行尾标注值
• 在含异步操作的代码里期待同步结果（fetch().then(...) 不会等，得用 await + async IIFE）
• 把整个组件文件丢进去跑——它只执行光标所在作用域，跨函数/模块不联动
性能影响很小，但它会实时解析并运行你高亮的代码块，所以别开着它编辑大型数据处理函数，CPU 占用会明显升高。
JavaScript (ES6) code snippets 补全不全时先看 scope
这个插件的片段（如 clg → console.log()）只在 JavaScript 文件里生效。如果你在 .vue 的 <script> 块里没反应，大概率是 VS Code 没识别出语言模式——右下角状态栏显示的是 Plain Text 或 HTML，不是 JavaScript 或 Vue。
解决方法：
• 点击右下角语言模式，选 Vue（需装 Vue 官方插件）或 JavaScript React
• 如果是 .ts 文件，补全默认不触发，要手动改设置："javascript.suggest.autoImports": true
• imr（import React）这类缩写只在 React 项目里激活，纯 JS 文件里敲不出来
它不提供 TypeScript 类型推导，所以 const arr = [1,2,3]; arr. 按 Tab 不会补 map 方法——那是 TypeScript 插件或 JS 语言服务干的事，不是 snippet 的责任。
