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

【问题标题】：ESLint: 'chrome' is not defined (no-undef)ESLint: 'chrome' 未定义 (no-undef)
【发布时间】：2018-07-13 01:34:03
【问题描述】：

我将 ESLint 添加到我的 chrome 扩展项目中。我正在使用以chrome. 开头的 chrome API，但显然 eslint 指出它是错误的。

我想应该是这样的：

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

但显然不是。

UPD：我认为最好的答案是添加webextensions: true——正如 wOxxOm 建议的那样。因为它是一个 chrome 扩展——chrome. API 在这里被大量使用。

否则按照其他建议添加/* global chrome */ 会更好。

感谢您的回答。

【问题讨论】：

【解决方案1】：

你需要添加：

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

到您的 .eslintrc.json 文件或一般的 eslint 配置。

【讨论】：

eslintConfig 中的“webextensions”键对我不起作用。这是我来自 package.json 的 eslintConfig："eslintConfig": { "extends": "react-app", "env": {"webextensions": true}}, 知道为什么吗？
您也可以添加到env、"browser": true, 吗？在网络扩展旁边。
仍然没有运气..."eslintConfig": { "extends": "react-app", "env": { "webextensions": true, "browser": true } }, 到目前为止，唯一对我有用的解决方案是在使用“chrome”的 js 文件顶部添加 /* global chrome */。
确保您至少使用 ESLint 1.7.0

【解决方案2】：

你可以在你的 eslint 配置文件中添加这个来添加一个全局变量

"globals": {
    "chrome": true
}

【讨论】：

【解决方案3】：

编辑：在 create-react-app v4.0.0 中，自定义 ESLint 配置不再需要 EXTEND_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。 Docs here.

有几种不同的方法可以设置这个环境变量。例如，您可以在项目文件夹的根目录中创建一个.env 文件，其内容为：

EXTEND_ESLINT=true

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

/* global chrome */

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

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

【讨论】：

【解决方案4】：

在cmets中提到没有chrome环境，你可以在eslintdocs中找到更多关于可配置环境的信息。

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

【讨论】：