Vue.js官方插件Volar 1.0正式发布，代号Nika

大家好，我是 CUGGZ。

2022 年 10 月 10 日，Volar 作者 Johnson Chu 在 Vue.js 官方博客宣布 Vue.js 官方插件 Volar 1.0 正式发布。这个主要版本全方面改进了工具，除了改进 UX、性能、包大小，还发布了Plugin API v1，以及重构了架构使核心代码与框架无关。下面来看看 Volar 1.0 都有哪些方面的更新和改进！

功能更新

• 为 Vite 和 Nuxt 3 Preview 实现了Goto Code 和Highlight Selection Dom Elements；
• 实现了 Component Preview^[1]；
• 新增 format.initialIndent 设置以指定 SFC blocks 的初始缩进；
• 实现了Web IDE 支持；
• 不再内置支持 <template lang="pug">（在v1.0需要安装@volar/vue-language-plugin-pug^[2]）

开箱即用改进

• 预设不再需要"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^[3]；
• 解决了无法在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插件^[4]用来检查你的 tsconfig 包含的文件。

通用的 Language Server 框架

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

在 repo 的 examples 目录^[5]，我们基于 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.vuejs.org/posts/volar-1.0.html
相关链接