如何让 eslint 遵守 babel 规则？答案

【问题标题】：How to get eslint to comply with babel rules?如何让 eslint 遵守 babel 规则？
【发布时间】：2022-01-05 13:08:04
【问题描述】：

我有一个简单的 babel 配置，将最新的 ES 代码转换为目标 12.x，但是当我尝试使用最新的 ES 功能（例如可选链接）时，eslint 不喜欢它。

我的 babel 配置是这样的：

{
  "sourceMaps": "inline",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "module-resolver",
      {
        "alias": {
          "^@/(.+)": "./src/\\1"
        }
      }
    ]
  ]
}

还有一个像这样的 eslint 配置：

module.exports = {
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:jest/recommended',
    'plugin:jest/style',
    'plugin:cypress/recommended',
    'eslint-config-prettier',
  ],
  env: {
    node: true,
    es6: true,
    jest: true,
    browser: true,
  },
  plugins: ['no-autofix', 'jest', 'cypress'],
  rules: {
    ...
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2019,
    ecmaFeatures: {
      jsx: true,
    },
  }
};

如何告诉 eslint ES 版本实际上不是 node v12.x 而是“最新”？

【问题讨论】：

标签： javascript node.js ecmascript-6 babeljs eslint

【解决方案1】：

原来我需要将parserOptions.ecmaVersion 更新为2021

【讨论】：

【解决方案2】：

如果您正在使用 ESLint 8（并且应该），在您的 ESLint 配置中，将 es6: true 替换为 es2021: true 并删除 ecmaVersion: 2019。根据the documentation这个

添加所有 ECMAScript 2021 全局变量并自动设置 ecmaVersion解析器选项为12。

如果你真的想解析最新的语言版本而不是 ES2021，那么在parserOptions 中你可以设置ecmaVersion: "latest"。

【讨论】：