Vue Script Setup中@typescript-eslint/no-unused-vars误报问题咨询

问题原因 #

@typescript-eslint/no-unused-vars规则仅默认检测TS代码内的变量使用，无法识别Pug模板中的变量引用；当前ESLint配置缺少Vue模板相关规则集成，导致ESLint无法感知变量已在模板中被使用。

解决方案 #

1. 补充Vue官方ESLint规则集 #

在extends中添加对应Vue版本的官方规则扩展，让ESLint能够识别Vue模板（含Pug）中的变量使用：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  extends: [
    'plugin:vue/vue3-essential', // Vue2项目替换为'plugin:vue/essential'
    '@nuxtjs/eslint-config-typescript',
    'plugin:prettier/recommended'
  ],
  plugins: [],
  rules: {
    'prettier/prettier': [
      'error',
      {
        trailingComma: 'all',
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        eslintIntegration: true,
        printWidth: 120,
      },
    ],
  },
}

2. 替换未使用变量检测规则 #

禁用@typescript-eslint的no-unused-vars规则，改用Vue提供的vue/no-unused-vars规则（该规则会结合模板使用情况做检测）：

module.exports = {
  // ...其他配置
  rules: {
    // ...prettier配置
    '@typescript-eslint/no-unused-vars': 'off',
    'vue/no-unused-vars': 'error'
  }
}

3. 可选：明确指定Pug模板解析配置 #

若仍存在解析问题，可在parserOptions中明确开启Pug模板支持：

module.exports = {
  // ...其他配置
  parserOptions: {
    parser: '@typescript-eslint/parser',
    templateParserOptions: {
      pug: true
    }
  }
}

验证修改 #

修改配置后，重启ESLint服务或重新lint目标组件文件，test变量的未使用报错会消失，因为ESLint已能识别到它在Pug模板中的引用。

内容的提问来源于stack exchange，提问作者Martin Pilaszek