ESLint: 'chrome' 未定义 (no-undef)

Question

我在我的Chrome扩展项目中添加了ESLint。我正在使用以chrome.开头的Chrome API，但显然ESLint将其指向为错误。

我猜应该是这样的：

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

但显然不是。

- Yuri Tymochko

---

我不认为有Chrome环境。你尝试过 /* global chrome */ 吗？ - Andrew Li

WebExtensions: 真 - wOxxOm

Answer 1

您需要添加：

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

将以下内容添加到您的.eslintrc.json文件或者eslint配置中。

- Daniel Kmak

---

“eslintConfig” 中的 “webextensions” 键对我不起作用。这是我的 package.json 中的 eslintConfig："eslintConfig": { "extends": "react-app", "env": {"webextensions": true}}, 有任何想法为什么？ - gkpo

你能在 env 中加入 "browser": true, 吗？放在 webextensions 旁边。 - Daniel Kmak

仍然没有运气... "eslintConfig": { "extends": "react-app", "env": { "webextensions": true, "browser": true } }, 到目前为止，对我有效的唯一解决方案是在使用 "chrome" 的 js 文件顶部添加 /* global chrome */。 - gkpo

请确保您至少使用的是ESLint 1.7.0版本。 - Nick McCurdy

Answer 2

你可以在你的eslint配置文件中添加以下内容来增加一个全局变量。

"globals": {
    "chrome": true
}

- hiluluke

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作为全局变量），我还需要为create-react-app设置EXTEND_ESLINT环境变量，并将其设置为true。有几种不同的方法可以设置这个环境变量，例如，您可以在项目文件夹的根目录下创建一个.env文件，并加入以下内容： 文档在此处。

EXTEND_ESLINT=true

根据文档，我相信这是一个实验性的功能，但它可以将您的eslint配置提供给eslint-loader。 在启用此功能之前，我不得不手动注释掉

/* global chrome */

在每个文件中，因为构建过程没有使用我的eslint配置，所以无法识别我将chrome设置为全局。

虽然这个问题没有提到create-react-app，但我相信很多人会有和我一样的情况。

- Michael Yaworski

Answer 4

如评论中所提到的，没有chrome环境，您可以在eslint 文档中找到有关可配置环境的更多信息。

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

- holmberd