如何用ESLint检测Worker脚本？按文件指定环境失效问题

问题概述 #

在.eslintrc.json中将browser、worker、node均设为false，意图按脚本逐个指定环境时，/* eslint-env browser */可正常生效，但/* eslint-env worker */无法检测到Worker环境中不存在的全局变量（如document）。

解决步骤 #

1. 升级ESLint到最新版本 #

旧版本ESLint对worker环境的注释支持存在缺陷，执行以下命令升级：

npm update eslint --save-dev

2. 排查配置是否被覆盖 #

运行以下命令查看目标Worker脚本的实际生效配置，确认env.browser是否被意外设为true：

eslint --print-config 你的Worker脚本路径.js

若输出中env.browser为true，说明其他配置（如extends引入的规则集）覆盖了你的设置，需针对性调整。

3. 使用overrides字段配置（推荐） #

相比文件注释，通过配置文件的overrides按文件模式指定环境更可靠。修改.eslintrc.json：

{
  "env": {
    "es2020": true,
    "browser": false,
    "worker": false,
    "node": false
  },
  "overrides": [
    {
      "files": ["**/*.worker.js"], // 匹配你的Worker脚本命名规则
      "env": {
        "worker": true
      }
    },
    {
      "files": ["**/*.js"],
      "excludeFiles": ["**/*.worker.js"],
      "env": {
        "browser": true
      }
    }
  ]
}

4. 手动禁用多余全局变量 #

若上述方法仍不生效，可在Worker脚本顶部手动禁用浏览器专属全局：

/* eslint-env worker */
/* global document:off */
const p = document.createElement('p'); // 此时ESLint会抛出未定义错误

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