Vue.js官方插件Volar 1.0正式发布，代号Nika

Volar 1.0正式发布，代号Nika

2022年10月10日，Vue.js官方插件Volar 1.0正式发布，这一版本带来了多方面的更新和改进，旨在提升用户体验和开发效率。以下是Volar 1.0的主要更新内容：

一、功能更新

• 为Vite和Nuxt 3 Preview实现新功能：Volar 1.0为Vite和Nuxt 3 Preview实现了Goto Code和Highlight Selection Dom Elements功能，这些功能有助于开发者更快速地定位和理解代码。
• Component Preview：实现了Component Preview功能，允许开发者在编辑器中预览组件的渲染效果，无需离开编辑器环境。
• 新增format.initialIndent设置：新增了format.initialIndent设置，允许开发者指定SFC blocks的初始缩进，以满足不同的编码风格需求。
• Web IDE支持：Volar 1.0现在支持Web IDE，使得开发者可以在线使用Volar进行Vue.js开发。
• 不再内置支持：在Volar 1.0中，的支持不再内置，需要安装@volar/vue-language-plugin-pug插件才能使用。

二、开箱即用改进

• 预设改进：Volar 1.0的预设不再需要"jsx": "preserve"，并且不会与@types/react冲突（除非明确启用vueCompilerOptions.jsxTemplates）。预设总是以defineComponent()包装Component Options，使得代码更加规范。
• 未知Component Tag显示改进：不再以警告色显示未知Component Tag，减少了不必要的干扰。
• JS组件中Template TypeScript支持改进：改进了JS组件中的Template TypeScript支持，提升了类型检查的准确性和稳定性。
• 自动检测项目设置问题：Volar 1.0减少了对阅读README的依赖，现在会自动检测常见的项目设置问题（例如错误地设置vueCompilerOptions.target），并在发现问题时在状态栏提示，帮助开发者快速定位和解决问题。

三、UX/DX改进

• Takeover mode改进：启用Takeover mode时不再弹出提示，减少了用户的操作负担。
• 命令改进：提供了更快的"Reload Project"命令代替"Restart Vue server"，以及新的"Show Virtual Scripts"命令代替"Write Virtual Files"，提升了命令的效率和易用性。
• 增量更新：实现了增量更新过去的诊断结果，防止了烦人的闪烁问题，提升了用户体验。
• 工作区支持改进：支持在不重启服务器的情况下添加或切换工作区，使得开发者可以更加灵活地管理多个工作区。
• Name casing tool改进：简化了Name casing tool在状态栏的显示方式，并且现在也支持Prop name casing转换，提升了工具的使用便捷性。

四、TypeScript改进

• 支持vue-tsc --watch：Volar 1.0现在支持vue-tsc --watch命令，使得开发者可以实时监视TypeScript文件的变更并自动进行类型检查。
• 支持Inlay Hints：支持了Inlay Hints功能，可以在代码中直接显示类型信息、参数信息等，提升了代码的可读性和可维护性。
• 支持Find File References：支持了Find File References功能，允许开发者快速找到文件中引用的其他文件或代码片段。
• 支持JavaScript and TypeScript Nightly：支持了最新的JavaScript和TypeScript Nightly版本，使得开发者可以体验到最新的语言特性。
• 解决Template引用类型问题：解决了无法在Template中引用类型的问题，提升了类型系统的完整性和准确性。
• 新增vueCompilerOptions.strictTemplates选项：新增了vueCompilerOptions.strictTemplates选项，支持更严格的Template type checking，在使用未知的Component Tag和Props时会报告错误，有助于提升代码的健壮性。

五、性能改进

• SourceMap mapping性能改进：大量改善了SourceMap mapping性能，提升了代码调试的效率和准确性。
• 增量更新SFC AST和Template AST：实现了SFC AST和Template AST的增量更新，减少了不必要的重新解析和生成操作，提升了性能。
• 简化Template生成的代码：简化了Template生成的代码，降低了每个Vue文件产生的内存占用，提升了性能。
• Monorepo多个TS project共用TS SourceFile实例：为Monorepo项目中的多个TS project共用了TS SourceFile实例，减少了内存占用和编译时间。
• 移植tsserver自动导入缓存逻辑：移植了tsserver的自动导入缓存逻辑，加快了自动完成的速度。
• 移植tsserver基于Named Pipe的Cancellation Token实现：移植了tsserver基于Named Pipe的Cancellation Token实现，解决了LSP请求阻塞的问题，提升了性能。
• 优化Bundle降低包大小：优化了Bundle，降低了包大小，并且使得插件启动速度更快。

六、通用的Language Server框架

• 核心代码与框架无关：Volar的核心代码现在与框架无关，可以使用Volar为Vue以外的语言实现语言服务器。
• 示例实现：在repo的examples目录中，基于svelte2tsx分别实现了svelte-tsc、svelte-langauge-server等示例。还有一个vue-and-svelte-language-server示例，展示了如何在单个Language Server中同时支持Vue和Svelte。

七、VueLanguagePlugin API

• 支持vueCompilerOptions.plugins选项：VueLanguagePlugin API现在支持vueCompilerOptions.plugins选项，允许指定额外plugin来更改virtual code的生成方式。
• codegen API使用muggle-string：VueLanguagePlugin的codegen API使用了muggle-string而不是magic-string。虽然muggle-string在早期版本中缺乏主要功能，但它与Volar解耦，因此可以独立发展。

八、LanguageServicePlugin API

• 自定义plugin：可以在volar.config.js中添加plugin来更改language server的行为，例如将使用的formatter改为Prettier。
• 常用plugins维护：有一个单独的repo用来维护常用的plugins，方便开发者使用和管理。

九、外部工具支持

• @volar/vue-typescript：为prettier-plugin-organize-imports公开了organizeImports API，方便开发者在格式化代码时组织导入语句。
• @volar/vue-language-core：为VSCode以外的IDE公开了vue-tsconfig.schema.json，使得其他IDE也可以使用Vue的TypeScript配置。
• vue-component-meta：实现了vue-component-meta，用于UI Library文档生成，方便开发者生成和维护组件文档。

十、未来计划

• 改进核心框架：计划在v2.0中改进核心框架，让其他需要实现Tooling的语言更容易地利用Volar所做的努力。
• 文档网站：计划建设文档网站，提供更加详细和系统的文档支持。
• 改进Bug report流程：计划改进Bug report流程，使得开发者可以更加便捷地报告和跟踪问题。
• 支持全局安装LangaugeServicePlugin：计划支持全局安装LangaugeServicePlugin，提升插件的可用性和灵活性。
• 基于Bun的Language Server：计划探索基于Bun的Language Server实现，以提升性能和稳定性。
• 增量更新template codegen：计划实现增量更新template codegen，减少不必要的编译和生成操作。
• 性能改进：计划继续探索TypeScript和LSP源代码中的性能改进机会，以持续提升Volar的性能和用户体验。