Vue Language Tools 3.0.2 新特性为非类npm环境引入 globalTypesPath 选项

前言

在早上更新了vscode后，发现自己 uni-app 项目的 .vue 文件的 template 标签都出现了报错。定位到了问题是因为 Vue (Official) 插件更新导致的，重装了插件的上一个小版本，报错消失，暂时解决了问题。

报错信息

Write global types file failed. Please ensure that "node_modules" exists and "vue" is a direct dependency, or set "vueCompilerOptions.globalTypesPath" in "tsconfig.json" manually.vue(404)

提示请确保 "node_modules" 目录存在且 "vue" 是项目的直接依赖项，或在 "tsconfig.json" 中手动配置 "vueCompilerOptions.globalTypesPath" 参数。vue(404)

原因

在github上提交了反馈后很快得到了大佬的回复，了解查阅后发现并非是bug，而是版本更新的新特性。

在 v3.0.2 版本之前 Vue Language Tools 如果检测不到 node_modules，全局类型会被写到每一个 .vue 的虚拟文件里面，将造成大量内存开销。而现在为了解决这一问题在 v3.0.2 中需要为缺少 node_modules 目录的项目环境（"non-npm like environment"）在 tsconfig.json 或者 jsconfig.json 里面手动指定出 vueCompilerOptions.globalTypesPath 的位置。

而我的使用 HBuilderX 创建的 uni-app 项目完全符合这种情况，既缺少 node_modules 也缺少tsconfig.json 或 jsconfig.json 文件。在 #5505 中提供了一个解决在项目缺少 node_modules 时，手动指定 vueCompilerOptions.globalTypesPath 的方法

影响范围

此问题会影响所有缺少 node_modules 目录的Vue项目：

HBuilderX 创建的 uni-app 项目
使用 CDN 引入 Vue 的项目（在 .vue 文件中出现）
其他非类似 npm 包管理的 Vue 项目

注意：错误仅在 VS Code 编辑 .vue 文件时出现，不影响项目运行。

解决方案

确定 Vue (Official) 版本为 3.0.2
首先在项目根目录下创建tsconfig.json 或者 jsconfig.json （以 jsconfig.json 为例）
在 jsconfig.json 中添加

{
  "vueCompilerOptions": {
    "globalTypesPath": "./vue-global-types.d.ts"
  }
}

在 globalTypesPath 中的路径和文件名是可以自己指定的，也可以像这样 ./types/uni-app.d.ts
随后在扩展中禁用 Vue (Official) ，并选择重新启动扩展，最后选择启用插件！
此时 Vue (Official) 会自动在你的指定路径下生成指定文件并写入内容，此时报错解决！
最后可以将自动生成的全局类型文件 vue-global-types.d.ts 添加到 .gitignore 中

vue-global-types.d.ts

对项目的影响

✅ 不影响项目编译和运行
✅ 不影响 HBuilderX 的构建流程
✅ 仅改善 VS Code 的开发体验
✅ 配置文件在删除后会自动重新创建

总结

这个错误提示是 Vue Language Tools 3.0.2 有意设计的新特性，而不是bug：

解决的问题

优化内存开销：避免为每个 .vue 文件重复生成全局类型
提升性能：统一的全局类型文件管理
改善开发体验：更精确的类型支持

适用场景

需要配置：HBuilderX、CDN项目等非类npm环境，在使用 Vue (Official) 时则需要进行配置。
无需配置：类似 npm 会生成 node_modules 结构的项目都不需要关心这个问题。

Vue Language Tools 3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项

前言