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