ESLint 如何配置以识别全局变量并规避未定义警告

在前端开发中，ESLint是一个非常重要的工具，它可以帮助我们发现代码中的潜在问题，提高代码质量。然而，在使用ESLint时，有时会遇到全局变量被认为是未定义的警告，这可能会影响我们的开发效率。本文将介绍如何配置ESLint以识别全局变量并规避未定义警告。

我们需要了解为什么会出现全局变量未定义的警告。ESLint默认遵循严格的作用域规则，它会认为在当前文件中没有定义的变量是未定义的。但是，在实际开发中，我们可能会使用一些全局变量，例如在浏览器环境中的window、document等。

要解决这个问题，我们可以通过配置ESLint的globals选项来识别全局变量。globals选项是一个对象，键是全局变量的名称，值是一个布尔值，表示该全局变量是否可以被重新赋值。例如，如果我们要识别window和document这两个全局变量，可以在.eslintrc.js文件中进行如下配置：

module.exports = {
  globals: {
    window: true,
    document: true
  }
};

上述配置表示window和document这两个全局变量可以被重新赋值。如果我们不希望某个全局变量被重新赋值，可以将其值设置为false。

除了在配置文件中逐个添加全局变量外，我们还可以使用eslint-plugin-node插件来识别一些常见的全局变量。该插件会自动识别一些Node.js环境中的全局变量，例如process、module等。要使用该插件，我们需要先安装它：

npm install eslint-plugin-node --save-dev

然后，在.eslintrc.js文件中添加如下配置：

module.exports = {
  plugins: [
    'node'
  ],
  extends: [
    'plugin:node/recommended'
  ]
};

通过以上配置，ESLint就可以识别一些常见的全局变量，并规避未定义警告。这样，我们就可以更加专注于编写业务逻辑，提高开发效率。