Vue3+TypeScript项目Vetur未使用变量报错问题求助

一、排查插件冲突 #

• 直接禁用Vetur，Vue3+TypeScript场景下官方推荐使用Volar及TypeScript Vue Plugin(Volar)，Vetur主要适配Vue2，两者共存会引发语法校验冲突。
• 重启VSCode，确保插件生效状态正确。

二、调整ESLint与TypeScript配置联动 #

1. 统一未使用变量校验规则
   在eslintrc.cjs中启用@typescript-eslint插件，替换原生ESLint的未使用变量规则，确保TS场景下规则生效：

   module.exports = {
     // ...其他配置
     plugins: ['@typescript-eslint'],
     rules: {
       'no-unused-vars': 'off', // 禁用原生ESLint规则
       '@typescript-eslint/no-unused-vars': ['warn', {
         argsIgnorePattern: '^_',
         varsIgnorePattern: '^_' // 允许以下划线开头的未使用变量
       }]
     }
   }
   

2. 修改TypeScript编译配置
   打开tsconfig.json，调整TS自身的未使用变量校验开关，若不需要TS层面校验，可设置为：

   {
     "compilerOptions": {
       // ...其他配置
       "noUnusedLocals": false,
       "noUnusedParameters": false
     }
   }
   

   若使用dev.tsconfig.json，需确保它继承主配置，且未覆盖上述选项。

三、单个变量临时忽略报错 #

如果是故意保留的未使用变量，可通过两种方式忽略：

• 添加TS注释忽略校验：

  // @ts-ignore
  const TheWelcome = () => {}
  

• 按照ESLint规则给变量加下划线前缀（需对应规则里的varsIgnorePattern配置）：

  const _TheWelcome = () => {}
  

四、确认VSCode校验优先级 #

• 打开VSCode设置，搜索「TypeScript Validate」和「ESLint: Enable」，确保两者均开启，让校验规则统一生效。
• 查看VSCode「问题」面板里的报错来源，确认是ESLint还是TS本身抛出的错误，针对性调整对应配置。

内容的提问来源于stack exchange，提问作者Leon Gaban