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
相关链接
Component Preview: https://github.com/johnsoncodehk/volar/discussions/1511
[2]@volar/vue-language-plugin-pug: https://www.npmjs.com/package/@volar/vue-language-plugin-pug
[3]JavaScript and TypeScript Nightly: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
[4]VSCode插件: https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-tsconfig-helper
[5]examples 目录: https://github.com/johnsoncodehk/volar/tree/master/examples
本文由作者 CUGGZ 整理，转载请注明来源。