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

相關鏈接

[1]

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 整理，轉載請註明來源。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/U-TBsYrml40ABnZPID6Jog