3.2 框架适配器：React、Vue 与 Angular

3.2 框架适配器：React、Vue 与 Angular

本节摘要：框架模板语法与响应式 API 需要专门的语言支持装备。React 主打语言服务接管与组件片段；Vue 的重点是新旧两代适配器的换代手续（旧代退役、新代上位）；Angular 依赖官方语言服务。本节核心纪律：同一框架只装一代语言支持，新旧并存必出乱子。

同一把扳手拧不了所有螺母。基础轮的装备不分语种，但框架不行：React 的钩子、Vue 的模板指令、Angular 的装饰器，都是语言服务"看不懂"的方言。所谓框架适配器，就是让编辑器懂框架方言的翻译官——补全懂你的模板变量，诊断懂你的绑定语法，跳转能穿过模板直达脚本定义。上一节装好了三件套小装备，这一节给工位配上框架级的"翻译席"。

React：语言服务接管加组件片段

React 的代码本质是带扩展语法的 JavaScript，所以它的整备重点是让 TypeScript 语言服务正确接管扩展语法文件：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "javascript.updateImportsOnFileMove.enabled": "always"
}
​

第一项把语言服务的引擎指到项目自带的版本上，而不是编辑器内置版——项目用什么版本的分析器，行为就跟着项目走，这在多项目切换时尤其重要（它同时也是第 6 章冲突排查的一个常客）。第三项让文件移动时导入语句自动跟着改，组件目录重排时不用手工修导入。

组件片段方面，第 2 章装片段包的路数在此落地：一套覆盖组件骨架、钩子调用、测试模板的片段包，配合语言服务的补全，React 日常书写的骨架活基本免手敲。状态管理进阶后，再加装对应的开发者工具集成（在调试器里直接查看状态树），那属于调试装备的延伸，按需再上。

Vue：一次教科书级的装备换代

Vue 的语言支持史值得单独讲，因为它是全册"装备换代"的最佳标本。旧一代适配器曾是社区标配多年，随着框架新版本的组合式 API 与单文件组件新特性登场，新一代适配器（后由官方接手更名为官方扩展）成为正位。换代手续如下：

其一，卸载或禁用旧代适配器——这一步不能省，两代并存时两套语言服务抢同一批文件，补全列表会同时冒出两套候选，诊断互相矛盾，性能双倍消耗。其二，安装新代官方扩展。其三，接上项目自带的类型工具，并在设置里声明"接管模式"：

{
  "vue.server.hybridMode": false,
  "typescript.tsdk": "node_modules/typescript/lib"
}
​

接管模式开启后，框架文件里的脚本分析也交给 Vue 语言服务统一调度，模板与脚本之间的跳转、补全才能互通。其四，跑一遍完整验证：模板里的组件补全、指令高亮、定义跳转、保存格式化，四项全过才算换装完毕。

图 3-2：三大框架适配器对照

Angular：官方语言服务一体位

Angular 的装备相对省心：官方语言服务扩展一站配齐模板补全、绑定诊断与跳转，配合项目生成器的脚手架命令（可在编辑器任务里直跑，接第 6 章任务系统）。它对装饰器与依赖注入的跳转支持尤其关键——大型 Angular 项目里，构造函数参数的提供者溯源是日常动作，装备不到位就是天天全局搜索。配置上值得注意的只有一点：语言服务随项目启动，首次打开大仓库要等索引完成，别把等待误判成卡死。

台面实测：一次跨文件的模板跳转

实测最能体现"翻译席"的价值。在一个 Vue 单文件组件里，模板中引用了另一个文件导入的组件：装备到位后，光标落在该组件标签上，转到定义直接穿过模板边界落到导入语句、再落到组件源文件；反过来在脚本里改名一个传给模板的变量，重命名动作连模板里的使用点一起改。没有适配器的工位里，这两个动作分别要靠全局搜索与手动同步，模板一多必漏。React 与 Angular 同理：钩子依赖数组的补全、模板指令的传参检查，都是"懂方言"之后才有的待遇。

坑点提醒

坑一，两代适配器并存。 症状是补全重复、诊断矛盾、内存双耗；解法是按换代手续把旧代清场，再用第 1 章的反向推荐清单防止旧代回流。坑二，语言引擎版本漂移。 多项目切换时若不指定项目自带的引擎，行为差异会让你怀疑人生；统一用前面那份指向配置。坑三，接管模式的类型报错误判。 接管后部分类型错误来自项目配置而非编辑器，报错先查项目的类型配置文件，别急着动装备。

替代方案

框架装备的替代是"不装，靠通用高亮加人肉记忆"——只适合改两行的应急场景。另一极端是回到全功能 IDE，框架支持开箱即用但工位整体换血。编辑器加适配器的中间路线，换来的是轻与专的平衡；团队统一装备清单（第 1 章的推荐文件）则把"每人对一遍配置"的隐性成本压掉。

常见疑问快答

问：项目里新旧两代 Vue 代码并存，适配器装哪代？答：按主版本定——新语法的文件占多数就装新一代，老文件靠兼容模式尽量覆盖；真有大量老语法文件要长期维护的，考虑用两代适配器的“工作区分治”：不同仓库各开各的工位、各装各的适配器，物理隔离最省心。

问：React 没有官方“框架插件”，那整备重点是什么？答：React 的工程重心在类型语言服务的接管质量、片段包覆盖与状态调试集成三件——它本身就是“带扩展语法的类型化 JavaScript”，把类型分析调顺，八成体验就位。这也是本节把它排在语言服务段落而非插件段落的原因。

问：适配器装好后补全仍然很慢，正常吗？答：首次打开要等语言服务建索引，大仓库可达分钟级，属正常预热；持续慢则查两点——语言服务是否指向了过老的引擎版本、是否与另一套分析器并存抢文件。两处都排掉还慢，就该去 6.3 的断案工具箱了。

问：多个前端框架都写的人，适配器全装吗？答：按工作区分治——每个仓库的工位只装该项目的适配器，切换仓库即切换装备组。语言重件常驻全局是性能与冲突的双重隐患，这一点第 6 章的分级启用会正式立规。

收束与下一站

翻译席就位，编辑器已经"懂"你的框架。下一节把构建工具的开发服务器接进编辑器——保存即热更、报错直达行号，让"跑起来"这道工序也留在工位内。