使用 ESLint 防止在 IE11 中使用不支持的 JavaScript 功能？

Posted 2023-02-22

【中文标题】使用 ESLint 防止在 IE11 中使用不支持的 JavaScript 功能？

【英文标题】：Prevent use of unsupported JavaScript features in IE11 using ESLint?

【发布时间】：2019-04-09 04:23:40

【问题描述】：

我有一个现有的 ESLint 配置，其中“ecmaVersion”设置为“5”，我想修改它以允许使用 ES6 特性的 let 和 const。 Internet Explorer 11 主要支持*。但是，我想拒绝使用 IE11 不支持的任何 ES6 功能，例如类。如何使用 ESLint 做到这一点？

我确实找到了 eslint-plugin-ie11 插件，但它只涵盖了一些不受支持的功能。

*我也想阻止使用 let in 循环，IE11 不支持。

【问题讨论】：

为什么不使用 TypeScript 或 Babel？您可能正在查看错误的工具

我正在研究未来的此类选项，但这会影响一个相当大的项目，我希望找到一个增量和短期的解决方案。

如果您的大型项目没有使用上述技术，那么它很可能只是基于添加到 html 代码中的许多 *.js 文件。只需将所有文件重命名为例如*.src.js 并在那里使用 ES6，然后使用例如Babel babeljs.io/docs/en/babel-cli 将它们编译为 *.js 文件。迁移完成。 10 分钟重命名所有文件（甚至 1 个 bash 脚本）和 10 分钟配置 babel。

【参考方案1】：

您可以使用 no-restricted-syntax 规则添加 eslint 规则以禁止几乎任何您想要的语言功能。

来自the eslint docs

此规则允许您配置要限制使用的语法元素 ... 您可以找到 AST 节点名称的完整列表，您可以使用 on GitHub 并将 AST Explorer 与 espree 解析器一起使用，以查看您的代码包含哪些类型的节点。 ... 您还可以指定 AST selectors 进行限制，从而更精确地控制语法模式。 ... 此规则接受一个字符串列表，其中每个字符串都是一个 AST 选择器 ... [, or] 对象，其中指定了选择器和可选的自定义消息

因此，例如，如果您想阻止在 for...in 和 for.. .of 循环，

您可以将其添加到 eslintrc 的规则部分：

"no-restricted-syntax": ["error",
    
        "selector": "*:matches(ForOfStatement, ForInStatement) > VariableDeclaration.left:matches([kind=let], [kind=const])",
        "message": "let/const not allowed in lhs of for..in / for..of loops."
    ,
    
        "selector": "TemplateLiteral",
        "message": "template literal strings not allowed"
    ,
    "ArrowFunctionExpression"
]

然后，在这个文件上运行 eslint

for(const x of foo) 
for(let x of foo) 
for(const x in foo) 
for(let x in foo) 
console.log(`hello world`);
const bar = x => x + 1;

给出这些错误：

  1:5   error  let/const not allowed in lhs of for..in / for..of loops  no-restricted-syntax
  2:5   error  let/const not allowed in lhs of for..in / for..of loops  no-restricted-syntax
  3:5   error  let/const not allowed in lhs of for..in / for..of loops  no-restricted-syntax
  4:5   error  let/const not allowed in lhs of for..in / for..of loops  no-restricted-syntax
  5:13  error  template literal strings not allowed                     no-restricted-syntax
  6:13  error  Using 'ArrowFunctionExpression' is not allowed           no-restricted-syntax

✖ 6 problems (6 errors, 0 warnings)

并在这个文件上运行 eslint

let a = 1;
const b = 2;
for(var x of foo) 
for(var x in foo) 
console.log('hello world');
function bar(x)  return x + 1; 

没有错误

为 所有 es6 功能执行此操作或多或少是相同的，只是有更多的选择器