VS Code Vetur扩展无法识别InertiaJS Vue文件报错解决方案咨询

Vetur 已停止功能迭代，默认校验规则仅适配原生 Vue 项目，无法识别 InertiaJS 全局注册组件、框架自定义属性，会导致大面积无意义标红，可按以下优先级选择方案解决：

方案一：替换为 Vue 官方扩展（推荐度最高） #

Vue 官方已经弃用 Vetur，统一维护 Vue - Official（原 Volar）作为官方开发扩展，对 InertiaJS、各类自定义框架语法的适配度远高于 Vetur，配置步骤：

• 在 VS Code 扩展面板找到已安装的 Vetur，选择「禁用」（多工作区开发可选择仅在当前工作区禁用，避免影响其他旧项目）
• 搜索安装扩展 Vue - Official，扩展会自动识别项目内的 Vue 版本、框架依赖做适配
• 安装完成后重载 VS Code 窗口，绝大多数 Inertia 相关的未定义误报会直接消除，同时能保留完整的语法校验、类型提示能力。

方案二：保留 Vetur 时调整校验规则 #

如果因为历史项目兼容要求必须使用 Vetur，可以通过工作区配置关闭 Vetur 易产生误报的强校验规则：

• 在项目根目录打开/新建 .vscode/settings.json 文件
• 写入以下配置：

{
  "vetur.validation.template": false,
  "vetur.validation.interpolation": false,
  "vetur.experimental.templateInterpolationService": false
}

• 保存配置后执行命令面板的「重载窗口」操作即可消除误报。该方案会关闭 Vetur 自带的模板校验能力，建议搭配项目本地的 ESLint、Stylelint 规则做代码校验，避免漏过真实错误。

方案三：添加全局类型声明（适配需要类型校验的场景） #

如果希望保留完整的类型校验能力，同时不更换扩展，可以通过添加全局类型声明的方式，让编辑器识别 Inertia 的全局注入内容：

• 在项目前端源码目录（Laravel 项目默认路径为resources/js）下新建类型声明文件 inertia-env.d.ts
• 写入对应版本的类型声明，以 Vue3 + Inertia v1 版本为例：

import type { Link, Head } from '@inertiajs/vue3'
import type { PageProps as CorePageProps } from '@inertiajs/core'

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    Link: typeof Link
    Head: typeof Head
  }
  interface PageProps extends CorePageProps {
    // 可在这里扩展项目自定义的全局共享属性类型
  }
}

export {}

• 保存文件后，在命令面板执行「TypeScript: Restart TS Server」重启TS服务，编辑器即可正常识别Link、Head等Inertia全局组件，不会再报未定义错误。

提示：该方案需要确保项目已安装对应版本的@inertiajs/vue3/@inertiajs/vue2依赖，否则类型声明无法正确加载。

内容的提问来源于stack exchange，提问作者Mostafa Said