在使用Vscode+volar开发vue3项目时,编辑器就会出现代码自动补全或者错误提示缓慢的问题,或者根本就不提示。
其实原因就是因为在安装Volar扩展的时候,没有开启Volar Takeover 模式,vue官网:搭配 TypeScript 使用 Vue章节中有详细介绍。
为了让 Vue 单文件组件和 TypeScript 一起工作,Volar 创建了一个针对 Vue 的 TS 语言服务实例,将其用于 Vue 单文件组件。同时,普通的 TS 文件依然由 VSCode 内置的 TS 语言服务来处理。这也是为什么我们需要安装 TypeScript Vue Plugin 来支持在 TS 文件中引入 Vue 单文件组件。这套默认设置能够工作,但在每个项目里我们都运行了两个语言服务实例:一个来自 Volar,一个来自 VSCode 的内置服务。这在大型项目里可能会带来一些性能问题。
为了优化性能,Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下,Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。
开启Volar Takeover模式步骤
- 在当前项目的工作空间下,用
Ctrl + Shift + P(macOS:Cmd + Shift + P) 唤起命令面板。 - 输入 built,然后选择“Extensions:Show Built-in Extensions”。
- 在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。
- 点击
JavaScript 和 TypeScript 的语言功能右下角的小齿轮,然后选择禁用(工作区)。 - 重新加载工作空间(重启vscode或者reload window),Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。
后记:官方文档里的内容都不是滥竽充数,只是浮躁的我们很少会全部看完,基础的内容掌握了,才会少走走弯路。