如何让ESLint检测配置环境中无polyfill的不可用内置全局变量？

嘿，这个问题问得相当到位！正好ESLint本身加上配套插件就能完美解决你的两个需求，我来给你详细说明：

要实现这个，核心是利用ESLint的env配置项搭配no-undef规则：

• 第一步：在你的.eslintrc（或其他ESLint配置文件）里明确指定目标环境，比如你要兼容ES5，就这么写：

  {
    "env": {
      "es5": true,
      "browser": true // 如果是浏览器环境，按需添加
    }
  }
  

  这个配置会告诉ESLint：当前环境只支持ES5的全局变量和对应环境的基础全局对象。
• 第二步：确保开启no-undef规则（这个规则默认是开启的，如果你没手动关闭就不用额外配置）。它会自动检测代码中使用的、不在env配置范围内的全局变量——比如在ES5环境里用Promise或者Map，ESLint就会抛出类似'Promise' is not defined的错误。

这个需求光靠ESLint核心规则搞不定，得借助eslint-plugin-compat这个专门做兼容性检查的插件，而且它还能结合你是否引入polyfill来灵活控制告警：

1. 安装插件 #

先把插件装到项目开发依赖里：

npm install eslint-plugin-compat --save-dev
# 或者用yarn
yarn add eslint-plugin-compat --dev

2. 配置ESLint #

在.eslintrc里添加插件和启用规则：

{
  "plugins": ["compat"],
  "rules": {
    "compat/compat": "error" // 可以根据需求设为"warn"或"error"
  }
}

3. 指定目标兼容环境 #

接下来需要告诉插件你的目标兼容范围，有两种常用方式：

• 方式一：在项目根目录创建.browserslistrc文件，比如指定兼容到ES5对应的浏览器版本：

  IE 11
  Chrome 49
  

• 方式二：在package.json里添加browserslist字段：

  {
    "browserslist": ["IE 11", "Chrome 49"]
  }
  

  插件会自动读取这个配置，识别哪些API在目标环境里原生不可用。

4. 标记已引入的polyfill #

如果你已经通过core-js或其他方式给某个API打了polyfill，不想让ESLint再告警，有两种处理方式：

• 全局标记：在.eslintrc里添加settings配置，告诉插件哪些API已经被polyfill：

  {
    "settings": {
      "polyfills": ["Object.assign", "Object.values"]
    }
  }
  

• 局部标记：在代码里通过注释单独标记某一行使用了polyfill的API：

  // eslint-env polyfills: Object.assign
  const obj = Object.assign({}, { a: 1 });
  

  这样插件就会忽略这个API的兼容性检查了。

简单总结一下：核心规则no-undef负责全局变量的检查，eslint-plugin-compat负责内置对象方法的兼容性校验，两者搭配就能完全满足你的需求啦！

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