99精品一区二区免费视频,午夜久久电影

Volar 1.0 'Nika' 發(fā)布，Vue 的官方 VS Code 插件

2022.10.16 上海

經(jīng)過 7 個多月的全職開發(fā)，Volar 作者 Johnson Chu 宣布 Volar 1.0 正式發(fā)布。據(jù)介紹，Johnson Chu 為期 7 個月的全職開發(fā)工作由 Vue 作者尤雨溪提供資金。

Volar 是 Vue 的 VS Code 插件，也是 Vue 的官方 IDE/TS 支持工具，除了集成 Vetur 的相關(guān)功能，如高亮、語法提示等之外，還包含一些獨有功能。

這個主要版本全方面改進了工具，除了改進 UX、性能、包大小，還發(fā)布了 Plugin API v1，以及重構(gòu)了架構(gòu)使核心代碼與框架無關(guān)。

下面看一下重要變化。

功能更新

為 Vite 和 Nuxt 3 Preview 實現(xiàn)了 Goto Code 和 Highlight Selection Dom Elements
實現(xiàn)了 Component Preview
新增 format.initialIndent 設(shè)置以指定 SFC blocks 的初始縮進
實現(xiàn)了 Web IDE 支持
不再內(nèi)置支持 <template lang='pug'>（在 v1.0 需要安裝 @volar/vue-language-plugin-pug）

開箱即用改進

預設(shè)不再需要 'jsx': 'preserve'，并且不會與 @types/react 沖突（除非明確啟用 vueCompilerOptions.jsxTemplates）
預設(shè)總是以 defineComponent () 包裝 Component Options
不再以警告色顯示未知 Component Tag
改進 JS 組件中的 Template TypeScript 支持
減少對閱讀 README 的依賴，現(xiàn)在會自動檢測常見的項目設(shè)置問題（例如錯誤地設(shè)置 vueCompilerOptions.target），發(fā)現(xiàn)問題時會在狀態(tài)欄提示

UX / DX 改進

啟用 Takeover mode 不再彈出提示
更快的 'Reload Project' 命令代替 'Restart Vue server'
新的 'Show Virtual Scripts' 命令代替 'Write Virtual Files'
增量更新過去的診斷結(jié)果防止煩人的閃爍問題
支持在不重啟服務器的情況下添加或切換工作區(qū)
簡化 Name casing tool 在狀態(tài)欄的顯示方式，并且現(xiàn)在也支持 Prop name casing 轉(zhuǎn)換

TypeScript 改進

支持了 vue-tsc --watch
支持了 Inlay Hints
支持 Find File References
支持了 JavaScript and TypeScript Nightly
解決了無法在 Template 引用類型的問題
新增 vueCompilerOptions.strictTemplates 選項支持更嚴格的 Template type checking，在使用未知的 Component Tag 和 Props 時報告錯誤

性能改進

顯著改進 SourceMap mapping 性能
實現(xiàn) SFC AST 和 Template AST 的增量更新
簡化 Template 生成的代碼以降低了每個 Vue 文件產(chǎn)生的內(nèi)存占用
為 Monorepo 多個 TS project 共用 TS SourceFile 實例
移植了 tsserver 自動導入的緩存邏輯加快自動完成
移植了 tsserver 基于 Named Pipe 的 Cancellation Token 實現(xiàn)以解決了 LSP 請求阻塞
優(yōu)化 Bundle 降低包大小，并且插件啟動速度更快

另外一些大型項目的性能問題可能是由于 tsconfig 包含了太多不需要的文件，我們還有一個新的 **VSCode 插件 ** 用來檢查你的 tsconfig 包含的文件。

通用的 Language Server 框架

Volar 的核心代碼現(xiàn)在與框架無關(guān)，你可以使用 Volar 為 Vue 以外的語言實現(xiàn)語言服務器。

在 repo 的 examples 目錄，基于 svelte2tsx 分別實現(xiàn)了 svelte-tsc, svelte-langauge-server 等等示例。

目錄中還有一個 vue-and-svelte-language-server 示例，在單個 Language Server 同時支持 Vue 和 Svelte，避免多個 Language Server 建立分別建立昂貴的 TypeScript LanguageService 實例，對于像 Astro 同時支持多個前端框架的項目可能很有用。

VueLanguagePlugin API

現(xiàn)在支持 vueCompilerOptions.plugins 選項指定額外 plugin 來更改 virtual code 的生成方式。

VueLanguagePlugin 的 codegen API 使用 muggle-string 而不是 magic-string，muggle-string 仍然是早期版本缺乏主要功能，但是與 Volar 解耦因此可以獨立發(fā)展，如果你需要開發(fā) VueLanguagePlugin 請關(guān)注 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；
實現(xiàn)了 vue-component-meta 用于 UI Library 文檔生成。

未來計劃

作者表示，Volar 至今開發(fā)了兩年多時間，對于原本只是一個 VSCode Plugin 來說投入的開發(fā)成本是巨大的，同時它的項目 scope 也可能嚇怕一些原本打算為語言實現(xiàn) Tooling 的人，因此他希望在 v2.0 改進核心框架，讓其他需要實現(xiàn) Tooling 的語言更容易地利用 Volar 所做的努力。

此外還有一些計劃做的事情：