VSCode中ESLint未触发未使用变量警告问题排查

问题场景 #

配置的.eslintrc.json如下：

{
  "extends": "eslint:recommended",
  "env": {
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2017
  },
  "rules": {
    "no-unused-vars": "warn"
  }
}

测试文件test.js仅包含一行代码：

var blah = "foo";

该行未触发no-unused-vars警告，但ESLint可正常提示其他错误，说明工具运行正常。

原因分析 #

在全局作用域中用var声明的变量会被挂载到全局对象（Node.js环境下是global，浏览器环境下是window），ESLint默认将这类变量视为已被使用，因此不会触发未使用变量的警告。

解决方案 #

方案1：修改no-unused-vars规则配置 #

调整.eslintrc.json中的规则，强制检查全局作用域的变量：

{
  "extends": "eslint:recommended",
  "env": {
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2017
  },
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

• vars: "all"：开启对所有变量的检查，包括全局作用域的var变量
• varsIgnorePattern: "^_"：可选配置，忽略以下划线开头的未使用变量（可按需调整）

方案2：改用let/const声明变量 #

let和const声明的变量不会挂载到全局对象，ESLint会正常检测这类未使用的变量：

let blah = "foo"; // 会触发no-unused-vars警告

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