一次 Volar 插件的踩坑记录 | VSCode 版本不兼容情况下的更新

9,037 阅读3分钟

前言

在最近 Vue3 官方文档的更新中,频繁安利 Volar 这一插件

Volar 是官方的 VSCode 扩展,提供了 Vue 单文件组件中的语法高亮、TypeScript 支持,以及模板内表达式与组件 props 的智能提示。

Volar 取代了之前为 Vue 2 的官方 VSCode 扩展 Vetur。强调如果你之前已经安装了 Vetur,请确保在 Vue 3 的项目中禁用它。

然而有段时间,我不得已在 Vue3 项目中使用 Vetur 插件,来看看是为什么吧?

情况

好像是三月前的事了,只是今天才搞明白……

我曾经也是遵从着尤大的推荐,在 Vue3 项目中使用 Volar 插件。

但突然有一天,就在写代码过程中,Volar 插件失效了。.vue 文件中只有高亮,没有任何的代码提示。

也不清楚为啥,没有在网上找到答案,当时项目赶的也急,就退回 Vetur,凑合的用了。

解决办法

总用 Vetur 也不是事,之后大概是花了半天的时间,排查出是 Volar 版本的问题。

Volar 从 0.33 强制升级到了0.34,而且 VSCode 还没法安装 0.34 以下的版本

image.png

然后官网也不给下,不记得是从哪个犄角旮旯的地方,找到了 0.33 的安装包,装上,一切恢复正常,官方的更新再与我无关

image.png

0.33 和 之后的版本它们的作者好像是不同的,从 0.34 开始被官方团队接手?

image.png

image.png

原因

为啥又想起这事了呢?是看了官方文档,想试试 Volar 的 Takeover 模式,毕竟 Volar 的性能相比于以前的 Vuter,是真的慢

然后看着我那别具一格的0.33版本,很明显没这个功能,一看官方都已经出到 0.40,就试着安装了下。

结果发现只能安装到 0.35 版本的 Volar,且失去了代码提示。

好在 0.40 的 vsix 文件可以直接从官方下,尝试以这种方式安装,然后出现了版本不兼容问题的提示!

我终于恍然大悟,原来之前都是 VSCode 版本的问题。之前把 VSCode 自身的更新关了,但插件的自动更新还开着,二者版本不匹配,导致插件无法运行。

关于怎么开关自动更新,也很简单,就四步:菜单栏 -> 文件 -> 首选项 -> 设置 -> 搜索“自动更新”

image.png

image.png

把应用程序的更新功能设为 manual,更新 VSCode 的版本,然后就能正常下载 0.40 的 Volar 插件,且有完整的的代码提示。

Takeover 模式

解决问题后,试着开启 Takeover 模式,其实就是禁用 VSCode 的内置 TS 语言服务,全权交给 Volar

禁用完,在 .vue 文件中确实还保留了 TS 的代码提示,但在 .ts 文件中就像写 .txt 文档一样。

反正我是没整出来官方说的效果,VSCode、Volar、TypeScript Vue Plugin 都已经是最新版本了

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

总结

总的来说,就是单纯一个版本不匹配的问题,但一般人发现插件故障,很难想到是 VSCode 的问题。算是吃一跌长一智了。

关于是否开启自动更新呢?我个人倾向于二者都关闭自动更新的,毕竟稳定才是最重要的,说不定啥时候一些老插件因为 VSCode 版本过高而失效。