JavaScript Booster提供光标定位重构，支持var转const等操作并做作用域与副作用检查；ESLint+Prettier需协同配置防格式冲突；VSCode React Refactor一键拆分组件并自动生成TS类型；通义灵码辅助架构决策但依赖TS上下文。
JavaScript Booster：重构操作不靠猜，光标停哪改哪
它不是代码生成器，而是把常见架构调整动作封装成“灯泡提示”，比如把var转const、函数转箭头函数、if-else转三元表达式。这些操作背后都做了作用域分析和副作用检查，不会因为转换导致变量意外提升或引用丢失。
关键点在于：所有重构都基于当前光标位置触发，不需要选中整段代码；转换后自动补分号、格式化，且保留原有注释位置。容易踩的坑是——在未启用 ESLint 的项目里直接用“Split into declaration and initialization”，可能拆出未初始化的let变量，引发运行时undefined错误。
ESLint + Prettier 组合：架构设计的前提是代码可读、可维护
没有统一的代码约束，再好的架构意图也会被随意写法稀释。ESLint 检查的是逻辑结构问题（比如no-unused-vars、no-implicit-globals），Prettier 管的是视觉一致性（缩进、换行、引号）。两者必须协同，否则eslint-config-prettier没装，就会出现保存时格式反复横跳。
实操建议：
- 项目根目录配
.eslintrc.js，继承eslint:recommended再加plugin:react/recommended（如用 React） -
settings.json里设"editor.formatOnSave": true，但 formatter 必须指定为esbenp.prettier-vscode - 禁用 VS Code 自带的
javascript.format.*设置，避免和 Prettier 冲突
VSCode React Refactor：组件拆分与职责收敛的快捷入口
当一个函数组件开始塞进状态管理、副作用逻辑、条件渲染块时，就是该拆的信号。这个插件支持右键选中 JSX 片段 → “Extract to new component”，自动生成新文件、导出语句、props 类型定义（TS 项目下），并把原处替换成调用。
它解决的不是“能不能拆”，而是“拆完之后 import 路径对不对、props 类型有没有漏、是否意外闭包了父级变量”。常见错误是手动拆分后忘记更新父组件的 props 类型，导致 TS 编译报错Property 'xxx' does not exist on type '{ }'。而插件生成的 TS 接口会自动推导必填项。
通义灵码：用自然语言推演架构决策路径
它不直接改代码，但在你犹豫“这个工具函数该放 utils 还是 hooks 目录”“这段逻辑抽成自定义 Hook 还是普通函数”时，可以问：“如何把表单校验逻辑从组件内抽离，兼顾复用性和类型安全？”——它会给出目录结构建议、文件命名、Hook 实现示例、甚至配套的单元测试骨架。
注意它的输出依赖上下文理解，如果当前文件没开 TypeScript，或tsconfig.json路径配置错误，生成的类型定义可能不准确。建议在 TS 项目中启用"typescript.preferences.includePackageJsonAutoImports": "auto"，帮助它更好识别依赖边界。
真正影响 JS 架构质量的，从来不是插件多不多，而是每次重构是否能看清变量生命周期、每次拆分是否明确边界契约、每次提问是否带着具体约束条件。插件只是把人从机械操作里解放出来，腾出手去盯住那几个关键判断点。
