Volar 1.0 'Nika' 发布，Vue 的官方 VS Code 插件

经过 7 个多月的全职开发，Volar 作者 Johnson Chu 宣布 Volar 1.0 正式发布。据介绍，Johnson Chu 为期 7 个月的全职开发工作由 Vue 作者尤雨溪提供资金。

Volar 是 Vue 的 VS Code 插件，也是 Vue 的官方 IDE/TS 支持工具，除了集成 Vetur 的相关功能，如高亮、语法提示等之外，还包含一些独有功能。

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

下面看一下重要变化。

功能更新

• 为 Vite 和 Nuxt 3 Preview 实现了 Goto Code 和 Highlight Selection Dom Elements

• 实现了 Component Preview

• 新增 format.initialIndent 设置以指定 SFC blocks 的初始缩进

• 实现了 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 mode 不再弹出提示

• 更快的 '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 源代码中的性能改进

发布公告：https://blog./posts/volar-1.0.html

---