Volar 1.0 "Nika" 发布，Vue 的官方 IDE/TS 支持工具

经过 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 所做的努力。

此外还有一些计划做的事情：