Vue VSCode 扩展更新

175 阅读2分钟

主要

  1. 将 "Volar Language Features (Volar)" 扩展重命名为 "Vue - Official"。
  2. "TypeScript Vue Plugin" 扩展已被弃用。

新功能

  • 现在“Takeover 模式”已被弃用。默认情况下,扩展现在具有与“Takeover 模式”相同的性能。
  • TypeScript 语言支持已从 Vue 语言服务器移至 TypeScript 插件。
  • 集成所有 TypeScript 编辑器功能。
  • 当禁用内部 TypeScript 扩展或安装“TypeScript Vue Plugin”扩展时发出警告。
  • 支持组件的拖放导入。

关于以前的“Takeover 模式”(已废弃)

为了让 Vue 单文件组件和 TypeScript 一起工作,Volar 创建了一个针对 Vue 的 TS 语言服务实例,将其用于 Vue 单文件组件。同时,普通的 TS 文件依然由 VSCode 内置的 TS 语言服务来处理。这也是为什么我们需要安装 TypeScript Vue Plugin 来支持在 TS 文件中引入 Vue 单文件组件。这套默认设置能够工作,但在每个项目里我们都运行了两个语言服务实例:一个来自 Volar,一个来自 VSCode 的内置服务。这在大型项目里可能会带来一些性能问题。

为了优化性能,Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下,Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。

要开启 Takeover 模式,你需要执行以下步骤来在你的项目的工作空间中禁用 VSCode 的内置 TS 语言服务:

  1. 在当前项目的工作空间下,用 Ctrl + Shift + P (macOS:Cmd + Shift + P) 唤起命令面板。
  2. 输入 built,然后选择“Extensions:Show Built-in Extensions”。
  3. 在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
  4. 点击“TypeScript and JavaScript Language Features”右下角的小齿轮,然后选择“Disable (Workspace)”。
  5. 重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。

了解更多

  1. 扩展 Changelog
  2. PR