javascript booster 是基于 ast 的实时代码结构改造工具，支持 convert to const、replace with template string 等安全重构，依赖三项 .vscode/settings.json 配置启用灯泡提示，并需配合工作区级自定义片段与 eslint+prettier 正确协同以保障复用性。
JavaScript Booster 的重构能力怎么用
它不是语法检查器，而是实时代码结构改造工具。光标停在任意一行，左侧出现黄色灯泡时就能触发重构——不需要选中、不用快捷键、不依赖文件类型。
-
Convert to const会自动判断作用域，只对不可重赋值的变量生效；若变量后续被修改，插件不会强行转换，避免引入运行时错误 -
Replace with template string仅在字符串拼接含变量时激活，纯字符串加法（如'a' + 'b'）不会触发，防止无意义替换 -
Flip if-else和Replace with ?:都会校验分支内是否含副作用语句（如console.log、异步调用），有则禁用该选项，不强制压缩
它不改逻辑，只改表达形式。所有操作基于 AST 分析，不是正则替换，所以嵌套函数、箭头函数、解构赋值都能安全处理。
.vscode/settings.json 里必须配的三项
光装插件没用，关键配置漏一项，灯泡就不亮。
-
"editor.quickSuggestions": { "strings": true }—— 启用字符串内自动补全，否则console.log()里敲引号后无法触发片段或 Booster 建议 -
"emmet.includeLanguages": { "javascript": "javascriptreact" }—— 让 Emmet 在 JS 文件里也能解析 JSX 片段，配合自定义组件模板时路径和属性补全才正常 -
"editor.suggest.snippetsPreventQuickSuggestions": false—— 默认为true，会屏蔽代码片段建议，关掉才能让log、rfc这类前缀正常弹出
这三项必须写进工作区 .vscode/settings.json，用户级设置会被项目级覆盖，而很多团队项目里恰好删掉了它们。
自定义代码片段如何真正复用起来
片段写得再漂亮，如果不能跨项目、不能带上下文，就只是玩具。
- 优先建工作区级片段：在项目根目录下新建
.vscode/snippets/javascript.json，比用户级片段更易随 Git 共享，且能读取$TM_FILENAMEBASE这类变量生成文件名相关代码 - 用
${SELECTION}做包裹式重构：比如选中data.map(x => x.id)，触发wrap-array-method片段，自动包成Array.isArray(data) ? data.map(x => x.id) : [] - 避免硬编码路径：不要写
import { Button } from 'src/components/Button'，改用import { ${1:Button} } from '${2:~}/components/${1:Button}'，~由jsconfig.json的baseUrl解析，适配不同项目结构
真正复用的不是代码块本身，而是“可适配的结构”。一个带占位符、能响应选区、依赖项目配置的片段，比十个固定死的模板更有价值。
ESLint + Prettier 协同时容易忽略的兼容点
它们不打架，但默认配置会让复用性代码“看起来很脏”。
-
eslint-config-prettier必须加在extends数组末尾，否则像no-unused-vars这类规则可能被前面的airbnb覆盖，导致你写的通用工具函数一保存就被标灰 -
prettier.semi设为false时，ESLint 的semi规则必须设为off，否则Booster把var转const后会多出分号，再被 Prettier 删掉，来回闪烁 -
eslint.validate至少包含"javascript"和"javascriptreact"，否则 JSX 片段里的className属性不会被校验，复用组件时 props 类型错误发现不了
复用性最终体现在“改一处、跑全量、不出错”。配置不闭环，再好的插件也救不了低级疏漏。
