for of循环中ESLint报'child已定义未使用'错误的原因与解决

在VSCode 1.74.2中编写如下for...of循环代码：

for (let child of main.childNodes) {
  if (child.textContent === w.toUpperCase()) {
    const classes = child.classList;
    classes.toggle('show');
    break;
  }
}

明明已经使用了child的textContent和classList属性，但ESLint（版本^8.30.0）却抛出错误：child is defined but never use (no-unused-vars)。

当前.eslintrc配置：

module.exports = {
  extends: ['eslint:recommended'],
  parser: 'babel-eslint',
  rules: {},
};

package.json中相关依赖：

"eslint": "^8.30.0",
"eslint-webpack-plugin": "^3.2.0"

请问该错误的原因是什么，如何消除？

错误原因 #

问题出在**babel-eslint解析器与ESLint 8.x版本不兼容**：

• babel-eslint已被官方弃用，ESLint 8.x不再支持该解析器，官方推荐使用@babel/eslint-parser替代。
• 旧解析器无法正确识别for...of循环中变量的属性访问操作，导致ESLint误判child变量未被使用。

解决方法 #

方案一：更换为兼容的解析器（推荐） #

1. 卸载旧解析器：

npm uninstall babel-eslint

2. 安装新的兼容解析器及Babel核心依赖：

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

3. 更新.eslintrc配置：

module.exports = {
  extends: ['eslint:recommended'],
  parser: '@babel/eslint-parser',
  rules: {},
};

方案二：临时调整ESLint规则 #

如果暂时无法更换解析器，可以通过规则配置忽略该变量的未使用检测：
修改.eslintrc的rules字段：

module.exports = {
  extends: ['eslint:recommended'],
  parser: 'babel-eslint',
  rules: {
    "no-unused-vars": ["error", { "varsIgnorePattern": "child" }]
  },
};

注意：这只是临时规避方案，长期来看还是建议使用方案一从根源解决兼容性问题。

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