Vite+Vue3环境下ESLint no-unused-vars规则误报问题求助

环境依赖 #

当前项目使用Vite + Vue3开发，已安装以下依赖：

• eslint (8.33.0)
• eslint-plugin-vue (9.9.0)
• vite-plugin-eslint (1.8.1)

Vite配置文件（vite.config.js） #

[...]
import eslint from 'vite-plugin-eslint'

export default ({ mode }) => {
  return defineConfig({
    […some conf…],
    plugins: [
     basicSsl(), // 启用本地https服务
     vue(),
     vuetify(),
     { // 开发环境下不因为ESLint错误终止服务
       ...eslint({
         failOnWarning: false,
         failOnError: false,
         lintOnStart:true,
         include:['src/**/*.js', 'src/**/*.vue']
       }),
       apply: 'serve',
       enforce: 'post'
     }
   ]
 })
}

ESLint配置文件（.eslintrc.cjs） #

module.exports = {
  root: true,
  env: {
    browser: true,
    es2022: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended'
  ],
  globals: {
    "process":false
  },
  rules: {
    'no-console': [
      "warn",
      { "allow": ["clear", "info", "error", "dir", "trace", "log"] }
    ],
    'no-extra-semi': 'off',
    'no-useless-escape': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/html-self-closing': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/order-in-components': 'off',
    'vue/component-definition-name-casing': 'off'
  }
}

问题代码片段 #

在.vue文件中编写的循环代码：

for (let [value, id] of existingLabels) {
   values.push({id:id, value:value});
}
[…]
for (let monthName in this.valuesGrouped[year]) {
  if (!this.checked.includes(year+'-'+monthName)) {
    this.checked.push(year+'-'+monthName);
  }
}

ESLint报错信息 #

210:19  error  'value' is defined but never used  no-unused-vars
210:26  error  'id' is defined but never used     no-unused-vars

140:36  error  'monthName' is defined but never used  no-unused-vars

原因及解决方案 #

问题原因 #

ESLint默认使用的Espree解析器对ES2022+语法（如数组解构的for-of循环、for-in循环变量的模板字符串使用）的变量使用检测存在偏差，尤其是在Vue单文件组件中，无法正确识别你代码中实际已使用的变量，从而触发no-unused-vars错误。

解决方案 #

方案1：配置更适配现代语法的解析器

安装@babel/eslint-parser（仅用于ESLint语法解析，无需配置Babel编译流程）：

npm install @babel/eslint-parser --save-dev

修改.eslintrc.cjs，添加解析器配置：

module.exports = {
  root: true,
  parser: '@babel/eslint-parser', // 添加解析器
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module'
  },
  env: {
    browser: true,
    es2022: true
  },
  // 其余原有配置保持不变
}

方案2：调整no-unused-vars规则配置（临时 workaround）

如果不想安装额外依赖，可以修改ESLint规则，放宽对变量使用的检测：

rules: {
  // ... 其余原有规则
  'no-unused-vars': [
    'error',
    {
      // 忽略以下划线开头的变量（若后续有未使用变量可按此命名）
      varsIgnorePattern: '^_',
      argsIgnorePattern: '^_',
      // 确保解析器识别解构和循环中的变量使用
      destructuredArrayIgnorePattern: '^_',
      caughtErrorsIgnorePattern: '^_'
    }
  ]
}

推荐方案1，从根本上解决语法解析的兼容性问题，避免后续出现类似的语法检测错误。

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