ESLint：“chrome”未定义（no-undef）

Question

我将 ESLint 添加到我的 chrome 扩展项目中。我正在使用以

chrome.

开头的 chrome API，但显然 eslint 将其指向错误。

我想应该是这样的：

"env": {
  "browser": true,
  "chrome": true,
  "es6": true
},

但显然不是。

Answer 1

您需要添加：

"env": {
    // ...
    "webextensions": true
}

一般情况下您的

.eslintrc.json

文件或 eslint 配置。

Answer 2

您可以将其添加到 eslint 配置文件中以添加全局变量

"globals": {
    "chrome": true
}

Answer 3

编辑：在

create-react-app v4.0.0

中，不再需要

EXTEND_ESLINT

标志来自定义 ESLint 配置，因此在 4.0.0 版本之后不需要以下答案。

我们还将

eslint-plugin-hooks

升级到版本 4.0.0 并删除了

EXTEND_ESLINT

标志，因为不再需要自定义 ESLint 配置。

---

我正在使用

create-react-app

并发现除了定义之外：

# This is YAML btw
env:
  # ...
  webextensions: true

在我的

eslint

配置中（将

chrome

添加为全局），我还必须将

EXTEND_ESLINT

的

create-react-app

环境变量设置为

true

。 文档在这里。

设置此环境变量有几种不同的方法。例如，您可以在项目文件夹的根目录中创建一个

.env

文件，其内容为：

EXTEND_ESLINT=true

从文档来看，我相信这是一个实验性功能，但它为

eslint

提供了您的

eslint-loader

配置。在设置启用此功能之前，我必须手动注释

/* global chrome */

在每个文件中，由于构建过程没有使用我的

eslint

配置，因此无法识别我将

chrome

设置为全局。

虽然这个问题没有提到

create-react-app

，但我相信很多人都会和我有同样的情况来回答这个问题。

Answer 4

正如评论中提到的，没有

chrome

环境，您可以在 eslint docs 中找到有关可配置环境的更多信息。

您可以为每个文件指定全局变量作为顶行注释，或者在配置文件中，请参阅指定全局变量。您还可以编写自定义 Eslint Chrome 插件来设置全局变量和解析器选项（这就是环境为您所做的事情）并将其导入到您的配置文件中。