经过 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 源代码中的性能改进

发布公告