Laravel搭配inertia-vue时.vue文件HTML标签自动补全失效如何解决

问题表现 #

• .vue单文件组件内编写HTML标签无自动补全，已安装Vetur、Vue 3 Snippets、Vue Helper等扩展仍未解决
• 编辑器弹出Vetur can't find tsconfig.json or jsconfig.json报错提示
• 项目中.blade.php文件的自动补全功能运行正常

核心原因 #

Vetur需要读取项目根目录的jsconfig.json或tsconfig.json来识别前端代码路径，Laravel项目默认前端代码存放在resources/js目录下，Vetur从工作区根目录找不到对应配置文件时，就会导致模板语法服务失效，自动补全功能异常。

修复步骤 #

方法1：添加jsconfig.json配置（Vetur环境适用） #

1. 在Laravel项目根目录新建jsconfig.json文件，写入以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": ["resources/js/*"]
    },
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "resources/js/**/*.js",
    "resources/js/**/*.vue"
  ],
  "exclude": ["node_modules", "public"]
}

2. 按下快捷键Ctrl+Shift+P（macOS系统按Cmd+Shift+P）调出命令面板，执行Vetur: Restart Vetur Server重启Vetur服务。
3. 若操作后仍未生效，完全重启VSCode即可。

方法2：替换为Volar扩展（Vue3项目优先推荐） #

Vetur已停止对Vue3的适配更新，Inertia-Vue默认基于Vue3开发，替换为官方维护的Volar扩展稳定性更高：

• 卸载已安装的Vetur扩展，避免两个Vue扩展抢占语法服务产生冲突
• 在VSCode扩展商店搜索安装Vue - Official（原Volar扩展）
• 调出命令面板执行Developer: Reload Window重载编辑器窗口，自动补全功能即可恢复正常

排查注意事项 #

• 打开项目时需将VSCode工作区根目录设置为Laravel项目根目录，不要单独打开resources/js等子目录作为工作区
• 禁止同时启用Vetur和Volar两个扩展，二者同时运行会导致语法服务冲突
• 检查Vetur设置项vetur.validation.template是否处于开启状态，手动关闭该选项会直接导致模板补全、校验功能失效

内容的提问来源于stack exchange，提问作者khaled amoudi