开发工具IDE语言服务【免费下载链接】language-tools⚡ High-performance Vue language tooling based-on Volar.js项目地址https://gitcode.com/gh_mirrors/la/language-tools点击查看免费下载本篇技术文章以本仓库changelogs/CHANGELOG-v2.md为骨架系统梳理 Vue Language Tools基于 Volar.js 的高性能 Vue 语言工具集2.x 系列从 2.0.0 到 2.2.10 的完整演进历程并结合packages/language-core、extensions/vscode、packages/tsc等子包的源码实现深入讲解 Hybrid Mode 架构、模板内$attrs/$slots/$refs/$el类型推断、strictTemplates细粒度配置、vue-generic、defineModel/defineSlots支持以及vueCompilerOptions的解析原理。读者读完后将能理解 Vue 语言工具底层代码生成与类型推断的工作机制并能熟练配置tsconfig.json中的vueCompilerOptions与 VS Code 扩展设置掌握从 2.0 到 2.2 的关键能力变化。一、2.x 版本全景与发布节奏Vue Language Tools仓库内即 language-tools核心包为vue/language-core的 2.x 系列横跨 2024 年 3 月至 2025 年 4 月官方版official与内测版insiders并行发布。其版本节奏与里程碑如下版本发布日期核心主题2.0.02024/3/2Hybrid Mode 正式落地升级 Volar 2.0/2.1扩展更名为 Vue - Official2.0.72024/3/20Hybrid Mode 默认关闭需显式开启vue.server.hybridMode2.1.02024/8/29typed fallthrough attributes、destructured props inlay hints、CSS Modules API 类型支持2.2.02024/12/24vue-generic、$attrs/$slots/$refs/$el类型支持、v-modelmodifiers2.2.102025-04-222.x 收官版本修复模型事件条件守卫与全局类型生成等2.x 系列整体围绕三条主线展开编辑器架构从 Takeover Mode 迁移到 Hybrid Mode、模板类型推断能力大幅增强逼近 Vue 3.4/3.5 的运行时语义、底层代码生成与语言服务架构持续重构基于 Generator 的 codegen、Plugin API 2.1、vueCompilerOptions解析逻辑重写。二、架构重构从 Takeover Mode 到 Hybrid Mode2.1 2.0.0 的里程碑式变革2.0.0 是 2.x 系列的起点也是架构分水岭。根据 CHANGELOG-v2.md 中 2.0.0 小节本次大版本做了如下核心调整Takeover Mode 被废弃扩展默认即可获得与 Takeover Mode 相同的性能TypeScript 语言支持从 Vue 语言服务器迁移到 TypeScript 插件issue #3788即由vue/typescript-plugin承担模板内 TS 的补全、跳转、重命名等能力集成全部 TypeScript 编辑器特性包括语义 token#3915、auto-import 补丁#3917、.value自动插入#3914等迁移到基于 TypeScript LanguageService 的命名管道服务器#3908、#3916并取消typescript.tsdk重复注册错误提示扩展更名原 Volar Language Features (Volar) 更名为Vue - Official原 TypeScript Vue Plugin 扩展被废弃Volar 升级到 2.0/2.1#3736、#3906支持 Volar Labs v2。这一系列变更意味着 Vue 的 IntelliSense 不再依赖一个独立语言服务器去“接管”TS而是作为 TypeScript 的插件直接挂载在 tsserver 中。后续版本中vue/typescript-plugin包从typescript-plugin目录独立而出并更名为vue/typescript-plugin#3910其源码位于 packages/typescript-plugin。2.2 Hybrid Mode 的默认值反转2.0.7 发布了一个重要行为变更CHANGELOG 中以[!NOTE]醒目标注Hybrid Mode is now disabled by default, you need to enablevue.server.hybridModein settings to enable it explicitly.即 Hybrid Mode 默认关闭用户需要在设置中显式开启vue.server.hybridMode。2.0.11 进一步为vue.server.hybridMode增加了typeScriptPluginOnly选项当 Hybrid Mode 关闭时Vue TypeScript Plugin 默认也被禁用。2.0.10 则引入尽可能自动开启 Hybrid Mode#4206以及自动检测的跳过配置#5046并对GitHub.copilot-chat#5047、ms-dynamics-smb.al#4765、p42ai.refactor、nrwl.angular-console、styled-components.vscode-styled-components、Divlo.vscode-styled-jsx-languageserver、svelte.svelte-vscode、vue vine、kimuson.ts-type-expand、miaonster.vscode-tsx-arrow-definition、runem.lit-plugin、mxsdev.typescript-explorer、bierner.lit-html、denoland.vscode-deno、jenkey2011.string-highlight等扩展加入了 Hybrid Mode 兼容白名单以降低与其他 TS 插件的冲突例如 Volar.js #216 的兼容性改进。2.3 扩展的编辑器设置项演进伴随架构重构VS Code 扩展extensions/vscode/package.json的设置项也经历了多次调整2.0.0 移除了volar.format.initialIndent替换为三个独立开关vue.format.template.initialIndent、vue.format.script.initialIndent、vue.format.style.initialIndent对应 extensions/vscode/package.json 中的vue.format.*配置2.0.6 将vue.inlayHints.vbindShorthand重命名为vue.inlayHints.vBindShorthand#39952.0.11 新增vue.format.wrapAttributes#4212与vue.codeActions.askNewComponentName#42172.1.0-insiders.3 新增vue.editor.reactionsVisualization设置反应可视化PR #82.1.0-insiders.1 引入模板插值装饰器可通过vue.editor.templateInterpolationDecorators关闭2.0.28-insiders 引入 Focus Mode聚焦模式淡化顶层 SFC 标签对应设置vue.editor.focusMode。上述设置在 extensions/vscode/package.json 中均有定义。例如vue.editor.focusMode默认false、vue.editor.reactivityVisualization默认true、vue.editor.templateInterpolationDecorators默认true。Focus Mode 的实现位于 extensions/vscode/src/focusMode.ts它监听vue.editor.focusMode配置变化watch(() config.editor.focusMode, ...)当开启且光标位于 SFC 顶层标签块内时对非活动块做淡化处理。2.1.8-insiders 还增强了反应可视化对更多使用场景的识别。三、language-core 代码生成引擎的演进vue/language-corepackages/language-core负责将 Vue SFC 解析并转换为 TypeScript 可理解的虚拟代码结构是vue/language-server与vue-tsc的底层依赖。2.x 期间该引擎经历了多轮重构。3.1 基于 Generator 的 codegen 重写2.0.0 将代码生成器重构为基于 Generator#3778并把全局类型收敛为单个虚拟文件生成#38032.1.0 提取 SFC 根标签为独立虚拟代码、移除__hint技巧、减少组件标签生成的虚拟代码#4714、不再用函数包裹模板虚拟代码#4731并将共享全局类型以真实文件写入 FS#47362.2.4 拆分__VLS_templateResult#4781、将模板虚拟代码包裹进函数#4784、把templateRef移入composables#47912.2.2 重写vueCompilerOptions解析逻辑、减少模板 return 的 codegen 体积2.1.8 拆分__VLS_templateResult避免为插值边缘生成零长度映射。当前 codegen 代码分布在 packages/language-core/lib/codegen 下按 script/style/template 分类模板部分细分出elementProps.ts、elementEvents.ts、elementDirectives.ts、vFor.ts、vIf.ts、vSlot.ts、slotOutlet.ts、interpolation.ts等模块。3.2 Plugin API 2.1 与内置插件体系2.0.28 引入Plugin API 2.1新增插件钩子getLanguageId、isValidFile、parseSFC2#4585并改善向后兼容性#4585与嵌套插件#4581。2.0.18 还增加了compileSFCScript插件钩子#3200。这些钩子的类型定义在 packages/language-core/lib/types.ts 的VueLanguagePluginReturn接口中而内置插件则位于 packages/language-core/lib/plugins包括文件解析类file-vue.vue受extensions控制、file-mdMarkdown受vitePressExtensions控制、file-htmlHTML受petiteVueExtensions控制虚拟代码生成类vue-tsx、vue-template-html、vue-template-inline-ts、vue-template-inline-css、vue-style-css、vue-script-js内嵌代码提取类vue-sfc-template、vue-sfc-styles、vue-sfc-scripts、vue-sfc-customblocks。2.2.2 还将 inline CSS 的 codegen 拆分为独立插件、把全局类型 codegen 移入独立脚本、并在 push 代码前解析虚拟代码特性。2.1.0 起component-meta移除了createComponentMetaCheckerByJsonConfig、createComponentMetaChecker两个旧 API。3.3vueCompilerOptions解析逻辑与strictTemplates细分化vueCompilerOptions是tsconfig.json中配置 Vue 编译行为的核心入口。2.2.2 重写了其解析逻辑当前实现在 packages/language-core/lib/compilerOptions.tscreateParsedCommandLine/createParsedCommandLineByJson通过 TS 的readJsonConfigFileparseJsonSourceFileConfigFileContent解析 tsconfig并逐层收集被extends的配置中的vueCompilerOptions段CompilerOptionsResolver.addConfig对每个配置做合并。其中最值得关注的是strictTemplates的展开机制#5138。在 compilerOptions.ts 中case strictTemplates: const strict !!options.strictTemplates; this.options.strictVModel ?? strict; this.options.checkUnknownProps ?? strict; this.options.checkUnknownEvents ?? strict; this.options.checkUnknownDirectives ?? strict; this.options.checkUnknownComponents ?? strict; break;即strictTemplates: true只是一个便捷开关会被展开为五个独立选项。从 2.2.2 起用户可以不再依赖strictTemplates整体开关而是通过 packages/language-core/README.md 与 packages/language-core/lib/types.ts 中VueCompilerOptions接口所定义的细粒度选项逐一控制选项类型默认值说明strictTemplatesbooleanfalse便捷开关等价于同时开启下方四项check*与strictVModelcheckUnknownPropsbooleanfalse检查未知 propscheckUnknownEventsbooleanfalse检查未知事件checkUnknownComponentsbooleanfalse检查未知组件checkUnknownDirectivesbooleanfalse检查未知指令2.2.2 新增#5141strictVModelbooleanfalse严格检查v-model绑定strictCssModulesbooleanfalse严格检查 CSS Modules 类名不受strictTemplates影响这些选项在代码生成阶段的落点可以在模板 codegen 中看到checkUnknownDirectives用于对非内置指令生成验证代码elementDirectives.ts 中的verification: options.vueCompilerOptions.checkUnknownDirectives !isBuiltInDirective(prop.name)checkUnknownEvents则控制事件类型是否退化为Recordstring, unknownelementEvents.ts。2.0.18 还实现了strictTemplates开启时报告未知事件#3718。除类型检查外vueCompilerOptions还包含文件处理与高级选项。默认值由getDefaultCompilerOptions提供compilerOptions.ts常用项如下选项类型默认值说明targetnumber \| autoautoVue 版本auto时读取node_modules/vue/package.json的版本号resolveVueVersionlibstringvue生成 import 语句所用的 Vue 包名extensionsstring[][.vue]按 Vue SFC 处理的文件扩展名tsc 2.0.0 起支持该选项#3800vitePressExtensionsstring[][]按 VitePress Markdown 处理的扩展名petiteVueExtensionsstring[][]按 Petite Vue HTML 处理的扩展名pluginsstring[][]自定义语言插件如vue/language-plugin-pugskipTemplateCodegenbooleanfalse跳过模板虚拟代码生成vaporbooleanfalse对全部 SFC 启用 Vapor 模式2.2.2 起支持script vaporfallthroughAttributesbooleanfalse启用透传属性fallthrough attributes类型推断checkRequiredFallthroughAttributesbooleanfalse检查必需的透传属性jsxSlotsbooleanfalse使用 JSX 风格的 slots 类型resolveStyleClassNamesboolean \| scopedscoped解析样式类名experimentalModelPropNameobject内置映射自定义v-model参数对应的 prop 名构建时经camelize处理compilerOptions.ts插件继承方面plugins声明的配置会替换继承列表、[]表示清空未声明则保留继承测试见 packages/language-core/tests/compilerOptions.spec.ts。2.2.0 还支持在 SFC 根注释中配置vueCompilerOptions#4987例如通过template顶部注释覆盖局部编译选项实现了单文件级的配置能力。四、模板类型推断的里程碑从$attrs到vue-generic2.x 中后期language-core 的模板类型推断能力大幅增强逐步覆盖 Vue 运行时的高级语义。4.1 组合式 API 全局变量的类型支持$attrs2.2.0 提供$attrs类型支持#50762.2.2 支持useAttrs#5106以及$attrs/$slots/$refs/$el在模板中的导航支持#5056并将本地$attrs与__VLS_ctx.$attrs求交#5113$slots/useSlots2.2.0 提供类型支持#5055并将__VLS_slots与__VLS_ctx.$slots求交#5083$refs/useTemplateRef2.1.0 自动推断$refs与useTemplateRef类型#46442.1.6 将模板 ref 包装unref#4777、推断原生模板 ref 为内置元素接口#4786$el2.1.8 自动推断$el类型#4805。2.2.4 为此引入了一组推断控制选项#5135inferComponentDollarEl、inferComponentDollarRefs、inferTemplateDollarAttrs、inferTemplateDollarEl、inferTemplateDollarRefs、inferTemplateDollarSlots默认均为false见 types.ts。4.2v-model与 model 语义2.2.0 支持v-modelmodifiers 类型#5061、使 model modifiers 可选#49782.2.4 修复带默认值的 model 不发出undefined#51982.2.6 从defineModel前置注释推断 prop JSDoc#5211、为defineModel生成驼峰 prop 名#5213、校验v-model变量与 model 类型#5214、正确映射驼峰 prop 名#52072.2.10 为 model 事件生成条件守卫#5225。2.0.x 阶段还完成了defineModel的 emits 代码生成2.0.0#3895、按需生成defineModelemits 类型2.0.7#4052、从 options 类型推断 defineModel 类型2.0.28#4545、为泛型组件支持 defineModel2.0.17#4345、v-model无参数时的类型检查2.0.28#4598等。4.3 指令、事件与透传属性的类型化typed directives2.1.6 在模板中支持类型化指令#48072.1.8 支持类型化的指令参数与 modifiers#4813typed fallthrough attributes2.1.0 支持类型化透传属性#4103并伴随fallthroughAttributes与checkRequiredFallthroughAttributes两个编译选项事件2.0.18 修复连字符事件名的处理、允许同名事件多次绑定#43692.1.0 修正vue:事件类型与补全#49692.2.2 为可选 model emits 的首参补undefined#5171。4.4 泛型vue-generic与泛型组件2.2.0 正式支持vue-generic#4971允许在script setup顶层注释中声明组件泛型。其解析实现在 packages/language-core/lib/plugins/vue-template-inline-ts.ts通过正则^!--\s*vue-generic\s*\{(?content[\s\S]*)\}\s*--$提取泛型内容。2.2.4 还修复了vue-generic正则匹配以改善 offset 计算#5193。泛型组件的类型处理在 2.0.x 已持续打磨2.0.28 修复泛型组件虚拟代码与 TS 5.5 的兼容#4577、2.1.8 避免解构 props 导致泛型类型丢失#4821、修复defineModel/defineEmits在泛型中的类型推断#4823、将泛型组件 props 与 attrs 求交#4886、2.1.6 修复非泛型模板 ref 的expose必填问题#4795。4.5 其他模板语义修复v-for2.2.2 对齐 core 的v-for类型#5084、改进v-for的类型声明refactor2.1.8 修复v-for搭配v-once#4830、v-for中的Reactive包裹#4902、通过v-for推断原生元素模板 ref 类型#4933defineSlots解构2.0.15 #4312、2.0.16 #4326、#4327defineProps解构的 inlay hints2.1.0#4634component-meta收集解构 props 默认值2.2.2#5101v-bind简写2.0.5#3990与简写 inlay hints2.0.5模板 ref 导航2.1.4#4726、:class类名文档链接2.1.0#4642样式模块__VLS_StyleModules生成时机2.1.6#4790、CSS Modules API 类型支持2.1.0#4674、useCssModule的as断言注入位置2.1.10#4952vue-ignore/vue-expect-error可靠性改进2.0.11#4203及文档2.2.4#5176。五、language-service 与编辑器体验增强5.1 补全、hover 与 inlay hints补全2.1.0 改进指令补全#4640、补全排序与过滤#46712.1.6 输入组件 props 时显示 JSDoc#47962.2.2 支持全局指令补全#4989、补全中显示 props 的废弃信息#51342.1.10 自动插入const props #49422.2.0 处理特殊结束标签补全的文本编辑#5016hover2.1.6 增加 JSDoc 显示inlay hints2.2.0 为 inlay hints 配置增加示例#5068格式化2.1.0 移除extraLiners选项#3943。5.2 代码映射与虚拟代码重构2.2.2 起 language-service 直接从 codegen 读取 AST而非反复解析#50862.1.0 迁移测试到volar/test-utils#47192.0.10 将每个插值生成为独立虚拟代码#41652.2.4 将 SFC 编译器错误映射到模板内层内容之外#5045。5.3 组件拖拽导入与模块转换2.0.0 支持Component Drag and Drop Import#3692在模板中拖拽组件即可自动生成 import。2.0.10 增强为拖拽导入遵循 tsconfig 路径别名#4184、支持多光标自动插入#4140。相关代码生成逻辑位于 extensions/vscode/src/registerModuleTransform.ts。六、CLI 与生态包tsc、component-meta、pug 插件6.1vue-tsc的重写2.0.0 将vue-tsc重写为基于第一方 TS API不再依赖 TypeScript 模块加载方式#3795并废弃 hooks API#3793。2.0.28 起错误以抛错而非console.log打印2.0.7 重引入全局类型移除检查#42452.0.10 为 composite 项目移除虚假全局类型占位#41962.2.0 指向 shimmed tsc 入口以支持 TS 5.7#5020。vue-tsc的类型检查测试用例集中在 packages/tsc/tests 与 test-workspace/tsc。6.2 component-meta2.x 期间component-meta转为 TS 源码2.0.15并重构为直接读取 codegen 的scriptSetupRanges2.2.2或从sfc.script读取 AST2.2.2避免重复创建子 AST。功能上新增 defineModel modifiers 类型解析2.0.10#4175、事件 JSDoc 标签支持2.0.17、resolvedefineModeloptions 收集默认值2.2.6#5209。6.3 language-plugin-pug 与额外扩展支持Pug 插件packages/language-plugin-pug2.1.6 支持初始缩进#47742.1.0 缓存 proxyed 对象#4626、正确计算 pug class 偏移#46522.2.2 忽略class重复属性错误#51002.0.7 修复语义 token 映射失败#4070额外扩展2.0.15 重新设计 VitePress、PetiteVue 等额外扩展支持#4321修复 Hybrid Mode 下自定义文件扩展不生效#42512.1.4 与 2.1.2 系列修复了additionalExtensions在 inferred project 下不生效的问题#4251、#3959。6.4 全局类型文件的管理2.x 对全局类型文件的生成与引用做了多轮修正2.0.0 改为单虚拟文件生成#38032.1.4 生成到node_modules/.vue-global-types#4752、文件名应用 snake case#4749、禁用 lib check#47672.1.2 写入 dist 以正确导出#47402.1.0 写真实文件到 FS 共享全局类型#47362.1.8 改为相对路径引用#4966后又改为绝对路径#49242.2.10 防止在声明文件中生成全局类型#5239。七、Volar 底层升级与配套改进2.x 全程跟随 Volar.js 版本升级CHANGELOG 记录了每次升级的关键收益例如2.0.0升级 Volar 2.0/2.12.0.4/2.0.5volar/typescript修复 2.0.5 自动补全性能回退#40242.0.14修复 Hybrid Mode 下的参数提示#3948、大型 JS 文件导致 TS server 崩溃#4278、重命名/查找定义随机报错#4257/#4281/#4282等2.0.20LSP 服务器性能提升、初始化请求返回精确 server capabilities、auto insertion 请求提前退出2.1.0确保未打开文件同步到项目#4711/#46322.2.0升级 Volar 2.2修复未打开文件未注册项目#4711、tsc shim#252等2.2.0 末Volar v2.4.8→v2.4.112.2.0 到 2.2.10 期间持续修复超大文件 relatedInformation 崩溃、交互式重构#244、语言插件就绪后强制更新快照等。八、质量保障与工程化CHANGELOG 的 Other Changes/Tests 部分展示了 2.x 的工程化投入测试2.2.4 启用declaration以跟踪更多错误2.1.0 用单一 tsconfig 测试全部 typecheck 用例#4723、为 TS-next 增加测试#4724、添加 scoped 类重命名用例#47272.1.6 增加模板ref()重命名用例#47942.0.28 添加全局组件 prop 校验测试#45422.0.11 增加 #4203 测试#4207CI2.0.0 起pkg.pr.new集成2.1.02.2.4 每次提交上传扩展产物2.2.6 自动关闭标记为cant reproduce的 issue代码规范引入tsllinter 与自动修复工作流2.0.7#4100仓库根 package.json 的lint脚本基于 tsslint 运行启用 dprint 格式化根 dprint.json依赖清理2.1.8 移除副作用#4871、移除importsNotUsedAsValues#48972.1.0 修复依赖存在漏洞的vue-template-compiler版本#4613。九、2.x 收官与经验总结2.2.102025-04-22作为 2.x 的收官版本重点修复了 model 事件条件守卫#5225、声明文件中的全局类型生成#5239、泛型 slot props 的过早推断#5247以及 typescript-plugin 中对同名原生标签的高亮问题#5253。随后仓库整体进入 3.x 时代当前扩展版本号已到 3.3.13见 extensions/vscode/package.json。回顾 2.x 的演进可以提炼出几条对使用者与二次开发者都适用的经验strictTemplates已可细粒度控制若只想严格检查未知指令而放行未知事件直接设置checkUnknownDirectives: true即可无需再打开整体开关Hybrid Mode 是默认关闭的需要在设置中显式开启vue.server.hybridMode并留意兼容白名单内的扩展冲突vue-generic提供了声明泛型组件的官方通道配合defineModel/defineSlots解构与类型化透传属性模板内的类型安全已接近运行时语义插件体系Plugin API 2.1是扩展 language-core 能力的入口vueCompilerOptions.plugins支持加载vue/language-plugin-pug等外部插件且继承规则为声明即替换。若需深入了解本文涉及的实现细节可继续阅读vueCompilerOptions解析与默认值见 packages/language-core/lib/compilerOptions.ts选项类型定义见 packages/language-core/lib/types.ts配置文档见 packages/language-core/README.md模板指令与事件的类型化实现见 packages/language-core/lib/codegen/template/elementDirectives.ts 与 elementEvents.ts编辑器设置见 extensions/vscode/package.json而全部历史条目可回溯 changelogs/CHANGELOG-v2.md 本身。赞分享开发工具IDE语言服务【免费下载链接】language-tools⚡ High-performance Vue language tooling based-on Volar.js项目地址https://gitcode.com/gh_mirrors/la/language-tools点击查看免费下载相关推荐Vue Language Tools智能代码补全如何实现精准的类型推断Vue Language Tools智能代码补全如何实现精准的类型推断 Vue Language Tools是一款基于Volar.js的高性能Vue语言工具集开发工具IDE语言服务【免费下载】 Vue Language Tools高性能的Vue语言工具集Vue Language Tools高性能的Vue语言工具集 在现代前端开发的世界中Vue.js已经成为了一个不可或缺的框架。为了进一步提升开发效率和代码质开发工具IDE语言服务Vue Language Tools语言服务器揭秘vue/language-server工作原理Vue Language Tools语言服务器揭秘vue/language server工作原理 Vue Language Tools语言服务器是基于Vol开发工具IDE语言服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考