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

发布公告

 


相關推薦

2023-07-16

Vue Language Tools(原 Volar)1.8.5 已发布,新版本极大地优化了长期困扰的内存占用问题,并为其实现了可视化。 Vue Language Tools (Volar) 是 Vue 的 VS Code 插件,也是 Vue 的官方 IDE/TS 支持工具,除了集成 Vetur 的相关功能,如高亮、语

2023-01-09

月,Vue 的默认版本切换到了 3.x;最新的稳定版本是 11 月发布的 Vue 3.2.45。尤雨溪称,这一转变标志着 v3 框架的所有官方部分都已准备就绪,包括对提供最新最佳实践指南的文档进行重大修改。不过其目前仍处于生态系统迁移到

2022-01-23

了核心库之外,几乎都完全由团队维护。 Vue 3 的 “软发布” 随着核心库发布新的大版本,框架的所有其他部分也需要一起同步更新。我们还需要为 Vue 2 用户提供一个升级方案。对于 Vue 这样一个社区驱动的团队来说,这是

2023-06-13

更新内容: [新增] volar 对 radio-button 与 popconfirm 组件的支持,提供编码提示。 [新增] input 组件 append 插槽 disabled 参数,表示当前输入框的禁用状态。 [新增] input 组件 prepend 插槽 disabled 参数,表示当前输入框的禁用状态。 [修复

2024-03-26

尤雨溪宣布正式发布 VitePress 1.0 版本,并声称其“基于 Vite 和 Vue 构建,是 VuePress 的精神继承者和现代替代品。” VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的站点而设计。简而言之,VitePress 获取用 Mark

2024-01-02

Vue 3.4 已正式发布,代号"🏀 Slam Dunk"(灌篮高手)。 新版本主要变化 重写模板解析器,速度提升了 2 倍 重构响应性系统 (Reactivity System),让 effect 的触发更准确高效 优化 API,比如defineModel进入稳定阶段,以及绑定 props 时

2023-04-25

Word GPT Plus 是一款基于Vue3开发的Word加载项,它允许你基于文档中写的内容生成文本。你可以使用它来翻译、总结、润色或者从零开始写一篇文章。 开源地址和软件官网 Github Kuingsmile/word-GPT-Plus 更新内容 项目初始化,提

2022-09-01

管理功能进行统一维护。 通知公告:系统通知公告信息发布维护。 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。 登录日志:系统登录日志记录查询包含登录异常。 代码生成:一键生成模块 CR

2022-09-05

与统一维护管理的模块。 通知公告:系统通知公告信息发布维护。 代码生成:一键生成模块 CRUD 的功能,包括后端和前端 Vue 等相关代码。 案例演示:常规代码生成器一键生成后的演示案例。 软件信息 软件名称:RXTh

2023-06-07

v2.1.0 更新内容: 1、新增依赖文件 requirements.txt 文件; 2、修复近期用户反馈的问题; 一款 Python 语言基于 Flask、Vue2.x、ElementUI、MySQL 等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架,本着简化开发、提升开发效

2023-06-09

Astro 2.6 已正式发布。在该版本中,多项实验性功能进入稳定状态,包括:Middleware(中间件)、Hybrid SSR output mode(混合 SSR 输出模式)、Custom client directives(自定义客户端指令)和 CSS inlining(CSS 内联)。 此外还引入了许

2023-03-26

介绍 maku-boot 是采用 SpringBoot3.0、SpringSecurity6.0、Mybatis-Plus、Vue3、TypeScript、Pinia、Element-Plus 等框架,开发的一套 SpringBoot 3.0低代码开发平台,使用门槛极低,且采用 MIT 开源协议,完全免费开源,可免费用于商业项目等场景。

2022-08-11

被翻译成 6 种不同的语言——包括中文。 近日,Astro 发布了 1.0 正式版。团队称 1.0 意味着 API 已达到稳定状态,并可用于生产环境。部分新特性: 图像优化:引入新的<Image />和<Picture />组件 支持 MDX:在 Markdown

2022-07-15

tMQ消息中间件进行消息通知,保证高可靠性 微信支付,支持扫码支付、付款码支付、公众号支付、小程序支付、APP支付,v3版API开发中 支付宝支付,支持扫码支付、PC网站支付、H5网站支付、付款码支付,支持Cert/秘钥模式