如何配置ESLint检测let、const等ES6语法适配旧浏览器？

嘿，你的方向完全正确！不用Babel的情况下，通过ESLint确实能精准拦截let、const这类ES6语法，以及ES6新增API的使用。下面一步步完善你的配置：

1. 巩固基础配置（你当前的配置已经踩对了核心点） #

你的.eslintrc.js里这两个配置是拦截ES6语法的关键，必须保留：

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: false, // 禁用ES6全局变量标识，让ESLint不把Promise、Map这类ES6 API当成合法全局变量
  },
  parserOptions: {
    ecmaVersion: 5, // 告诉解析器按ES5语法标准检查，遇到let/const、箭头函数这类ES6语法直接抛语法错误
  },
  // 接下来补充规则...
}

当ecmaVersion:5生效时，ESLint会把所有ES6专属语法（包括let/const声明、箭头函数、模板字符串、解构赋值等）都视为非法语法，直接报错拦截，这正好满足你排查语法层面兼容问题的需求。

2. 补充规则拦截ES6 API的使用 #

光拦语法还不够，旧浏览器（比如IE11）还不支持ES6新增的API（比如Array.prototype.includes、Promise、fetch）——这些代码语法上是ES5，但API是ES6的，照样会导致兼容问题。你可以通过两种方式处理：

方式一：启用no-undef规则（基础版，零额外依赖） #

把no-undef设为error级别，因为你已经把es6:false，ESLint不会把ES6的全局API（比如Promise）视为合法变量，所以代码中使用时会直接报'Promise' is not defined的错误：

module.exports = {
  // ... 其他配置
  rules: {
    "no-undef": "error", // 拦截未定义的变量，自然也包括ES6专属的全局API
  }
}

方式二：使用eslint-plugin-compat插件（进阶版，精准指定兼容版本） #

如果需要针对具体浏览器版本（比如要兼容IE11、Chrome 49）做更细致的检查，可以安装eslint-plugin-compat插件：

1. 先安装依赖：

npm install eslint-plugin-compat --save-dev

2. 在配置中启用插件并指定目标浏览器：

module.exports = {
  // ... 其他配置
  plugins: ["compat"],
  rules: {
    "compat/compat": "error", // 拦截不兼容目标浏览器的API调用
  },
  settings: {
    targets: {
      browsers: ["IE 11", "Chrome >= 49", "Firefox >= 45"] // 替换成你需要兼容的浏览器版本
    }
  }
}

这个插件会根据你指定的浏览器版本，精准检测代码中使用的API是否兼容，比no-undef更灵活。

3. 额外规则优化（可选） #

如果你想强制团队使用ES5的变量声明方式（用var代替let/const），可以加上prefer-var规则并设为error：

rules: {
  // ... 其他规则
  "prefer-var": "error", // 强制使用var，避免不小心写出let/const
}

测试验证 #

配置完成后，你可以写一段包含ES6特性的代码测试：

const test = "hello"; // 应该报语法错误
let num = 123; // 应该报语法错误
const arr = [1,2,3];
console.log(arr.includes(2)); // 如果用了compat插件，IE11不支持includes，会报错

如果ESLint能正确抛出这些错误，说明配置已经生效啦。

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