Volar 1.0 "Nika" 发布！

我们很高兴地宣布，我们发布了 Volar 的 v1.0 版本，这是 Vue 的官方 IDE/TS 工具支持！🎉

这个主要版本在各个方面都带来了大量的改进。除了改进 UX、性能和包大小之外，我们还发布了 Plugin API v1，并重构了核心代码使其与框架无关。

注：结尾附有中文版本 (There is Chinese version of this post at the end)。

今年早些时候，在 3 月份，Vue 的创始人 Evan You 开始赞助我 (@johnsoncodehk) 全职开发 Volar，目标是将其推向 1.0 版本。经过 7 个月的努力，我们终于实现了这个目标！

更新内容很多，你可能错过了其中的一些。下面我们总结了过去 7 个月以来最显著的变化。

功能更新 ​

• 为 Vite 和 Nuxt 3 Preview 实施了 Goto Code 和 Highlight Selection Dom Elements（强烈建议你尝试一下！）
• 实施了 Component Preview
• 添加了设置 format.initialIndent 以指定 SFC 块的初始缩进
• 实施了对 Web IDE 的支持
• 不再内置支持 <template lang="pug">（在 v1.0 中，你需要安装 @volar/vue-language-plugin-pug）

开箱即用使用改进 ​

• 默认情况下不再需要 "jsx": "preserve"，并且也不会与 @types/react 冲突（除非在 vueCompilerOptions.jsxTemplates 中明确启用）
• 默认情况下始终使用 defineComponent() 或 Vue.extend 包装组件选项，这样你就可以简单地导出一个对象字面量。
• 未知组件标签不再以警告颜色显示。
• 改进了 JS 组件中 <template> 块的 TypeScript 支持
• 减少了新用户阅读 README 的需求。常见的项目设置问题将自动检测并提示在状态栏中（例如错误地设置 vueCompilerOptions.target）

UX / DX 改进 ​

• 启用 Takeover 模式不再显示弹出窗口
• 有一个新的更快命令供用户在需要重新启动服务器时使用：Reload Project。此命令不会重新启动服务器，但会清除缓存。Restart Vue Server 仍然可用以硬重新加载服务器。
• "Show Virtual Scripts" 命令已添加。查看其工作方式 here.
• 为旧的诊断结果增量计算错误范围，以防止烦人的闪烁问题
• 添加了对添加和切换工作区而无需重新启动服务器的支持
• 简化了状态栏中名称大小写工具的显示，并且还支持 prop 名称大小写转换

TypeScript 改进 ​

• vue-tsc 支持 --watch
• vue-tsc 支持 --declaration --emitDeclarationOnly 以为组件发出 dts
• 支持 Inlay Hints
• 支持 Find File References
• 支持 JavaScript and TypeScript Nightly
• 修复了 <script> 类型无法在 <template> 中使用的错误
• 添加了 vueCompilerOptions.strictTemplates 选项以支持更严格的模板类型检查，以便在使用未知组件标签和道具时报告错误

性能改进 ​

• SourceMap 映射速度快得多
• 实施了 SFC AST 和 Template AST 的增量更新
• 模板代码生成简化为减少每个 Vue 文件的内存占用
• 当 Monorepo 具有多个 TS 项目时，TS SourceFile 实例被重用以减少内存使用。
• 在 LSP 服务器中实施了 tsserver 的自动导入缓存以加快自动完成速度
• 在 LSP 服务器中实施了 tsserver 的基于命名管道的取消令牌
• 优化了 Bundle 以减少包大小，并使扩展启动更快

此外，一些大型项目的性能问题可能是由于 tsconfig 包含了太多不需要的文件，我们还有一个新的 VSCode 插件 用于检查你的 tsconfig 包含的文件。

通用语言服务器框架 ​

Volar 核心模块现在与框架无关，你可以使用 Volar 为 Vue 以外的语言实现语言服务器。

在这个 示例仓库 中，我们基于 svelte2tsx 分别实现了 svelte-tsc、svelte-langauge-server 等等示例。

目录中还包含一个 vue-and-svelte-language-server 示例，它在单个语言服务器中同时支持 Vue 和 Svelte，避免多个语言服务器分别建立昂贵的 TypeScript LanguageService 实例，对于像 Astro 同时支持多个前端框架的项目可能很有用。

VueLanguagePlugin API ​

现在支持 vueCompilerOptions.plugins 选项以指定额外的插件来更改虚拟代码的生成方式。

VueLanguagePlugin 的代码生成 API 使用 muggle-string 而不是 magic-string，muggle-string 仍然是早期版本缺乏主要功能，但是与 Volar 解耦因此可以独立发展，如果你需要开发 VueLanguagePlugin 请关注 https://github.com/johnsoncodehk/muggle-string 更新。

LanguageServicePlugin API ​

你可以在 volar.config.js 中添加插件来更改语言服务器的行为，例如将 <template> 使用的格式化程序更改为 Prettier。

我们有一个单独的仓库用于维护常用的插件：https://github.com/johnsoncodehk/volar-plugins

外部工具支持 ​

• @volar/vue-typescript 为 prettier-plugin-organize-imports 公开了 organizeImports API
• @volar/vue-language-core 为 VSCode 以外的 IDE 公开了 vue-tsconfig.schema.json
• 实现了 vue-component-meta 用于 UI 库文档生成

下一步 ​

Volar 迄今为止已经开发了两年多时间。对于最初只是一个 VSCode 插件来说，投入的开发成本是巨大的，同时它的项目范围也可能吓怕一些原本打算为其他语言实现工具的人，因此我希望在 v2.0 中改进核心框架，让其他需要实现工具的语言更容易地利用 Volar 所做的努力。

此外，还有一些其他计划要做的事情

• 文档网站
• 改进错误报告流程
• 支持全局安装 LangaugeServicePlugin
• Bun 基于语言服务器
• 增量更新模板代码生成
• 探索 TypeScript 和 LSP 源代码中的性能改进

在 v1.0 发布后，我将回到全职工作，开始一些其他的个人项目，同时在我的业余时间继续从事这些工作。

我还想向 NuxtLabs 表示衷心的感谢，他们自 5 月份以来一直是白金赞助商，以及所有其他赞助商 🙌。你们的支持确保了我能够在 1.0 之后继续维护 Volar，以改善你的 Vue 开发体验！

感谢你阅读这篇博客！

我很高兴地宣布，今天我们完成了所有主要功能并发布了 v1.0 版本。🎉

这个主要版本在各个方面都改进了工具，除了改进 UX、性能、包大小之外，我们还发布了 Plugin API v1，以及重构了架构使核心代码与框架无关。

今年年初，我和 Vue 的作者 Evan 达成协议，他在 3 月份开始资助我全职开发 Volar 直至完成 1.0 版本，经过 7 个月的努力，我们终于实现了这个目标！

如果你没有跟踪每个版本的 changelog，你可能不知道发生了什么，我会简单总结在这半年时间里对你比较明显的影响的更改：

功能更新 ​

• 为 Vite 和 Nuxt 3 Preview 实施了 Goto Code 和 Highlight Selection Dom Elements（非常推荐你试一试！）
• 实现了 Component Preview
• 新增 format.initialIndent 设置以指定 SFC 块的初始缩进
• 实现了 Web IDE 支持
• 不再内置支持 <template lang="pug">（在 v1.0 中需要安装 @volar/vue-language-plugin-pug）

開箱即用改進 ​

• 默认情况下不再需要 "jsx": "preserve"，并且不会与 @types/react 冲突（除非明确启用 vueCompilerOptions.jsxTemplates）
• 默认情况下始终使用 defineComponent() 包装 Component Options
• 不再以警告颜色显示未知 Component Tag
• 改进了 JS 组件中 Template TypeScript 支持
• 减少了对阅读 README 的依赖，现在会自动检测常见的项目设置问题（例如错误地设置 vueCompilerOptions.target），发现问题时会提示在状态栏中

UX / DX 改进 ​

• 启用 Takeover 模式不再弹出提示
• 更快的 "Reload Project" 命令代替 "Restart Vue server"
• 新的 "Show Virtual Scripts" 命令代替 "Write Virtual Files"
• 增量更新過去的診斷結果防止煩人的閃爍問題
• 支持在不重啟服務器的情況下添加或切換工作區
• 简化 Name casing tool 在状态栏的显示方式，并且现在也支持 Prop name casing 转换

TypeScript 改进 ​

• 支持了 vue-tsc --watch
• 支持了 Inlay Hints
• 支持 Find File References
• 支持了 JavaScript and TypeScript Nightly
• 解决了无法在 Template 引用类型的問題
• 新增 vueCompilerOptions.strictTemplates 选项支持更严格的 Template type checking，在使用未知的 Component Tag 和 Props 时报告错误

性能改進 ​

• 大量改善 SourceMap mapping 性能
• 实现了 SFC AST 和 Template AST 的增量更新
• 简化 Template 生成的代码以降低了每个 Vue 文件产生的内存占用
• 为 Monorepo 多个 TS project 共用 TS SourceFile 实例
• 移植了 tsserver 自动导入的缓存逻辑加快自动完成
• 移植了 tsserver 基于 Named Pipe 的 Cancellation Token 实现以解决了 LSP 请求阻塞
• 优化了 Bundle 降低包大小，并且插件启动速度更快

另外一些大型项目的性能问题可能是由于 tsconfig 包含了太多不需要的文件，我们还有一個新的 VSCode 插件 用来检查你的 tsconfig 包含的文件。

通用的 Language Server 框架 ​

Volar 的核心代码现在与框架无关，你可以使用 Volar 为 Vue 以外的语言实现语言服务器。

在 repo 的 examples 目录，我们基于 svelte2tsx 分别实现了 svelte-tsc, svelte-langauge-server 等等示例。

目录中還有一個 vue-and-svelte-language-server 示例，在單個 Language Server 同時支持 Vue 和 Svelte，避免多個 Language Server 建立分別建立昂貴的 TypeScript LanguageService 實例，對於像 Astro 同時支持多個前端框架的項目可能很有用。

VueLanguagePlugin API ​

现在支持 vueCompilerOptions.plugins 选项指定额外的 plugin 来更改 virtual code 的生成方式。

VueLanguagePlugin 的 codegen API 使用 muggle-string 而不是 magic-string，muggle-string 仍然是早期版本缺乏主要功能，但是与 Volar 解耦因此可以独立发展，如果你需要开发 VueLanguagePlugin 请关注 https://github.com/johnsoncodehk/muggle-string 更新。

LanguageServicePlugin API ​

你可以在 volar.config.js 添加 plugin 来更改 language server 的行为，例如将 <template> 使用的 formatter 改为 Prettier。

我们有一个單獨的 repo 用来维护常用的 plugins: https://github.com/johnsoncodehk/volar-plugins

外部工具支持 ​

• @volar/vue-typescript 为 prettier-plugin-organize-imports 公開了 organizeImports API
• @volar/vue-language-core 为 VSCode 以外的 IDE 公開了 vue-tsconfig.schema.json
• 实现了 vue-component-meta 用于 UI Library 文档生成

下一步 ​

Volar 至今开发了兩年多时间，对于原本只是一个 VSCode Plugin 来说投入的开发成本是巨大的，同时它的项目 scope 也可能吓怕一些原本打算为语言实现 Tooling 的人，因此我希望在 v2.0 中改进核心框架，让其他需要实现 Tooling 的语言更容易地利用 Volar 所做的努力。

此外還有一些計劃做的事情：

• 文檔網站
• 改进 Bug report 流程
• 支持全局安装 LangaugeServicePlugin
• 基于 Bun 的 Language Server
• 增量更新 template codegen
• 探索 TypeScript 和 LSP 源代码中的性能改进

发布 v1.0 后，我将回归全职工作并开始一些其他个人项目，同时在业余时间继续做这些工作。

我想为从五月开始成为 Platinum Sponsor 的 NuxtLabs 以及所有赞助者大喊 🙌，这在很大程度上保证了我在完成 1.0 之后仍然能够继续维护 Volar 以改善你的 Vue 开发体验！

感謝你閱讀這篇文章！