Skip to main content

@babel/eslint-parser

@babel/eslint-parser 让你可以用超棒的ESLint检查所有有效的 Babel 代码。

何时应该使用 @babel/eslint-parser？​

🌐 When should I use @babel/eslint-parser?

ESLint 的默认解析器和核心规则只支持最新最终的 ECMAScript 标准，不支持 Babel 提供的实验性（例如新特性）和非标准（例如 Flow 或 TypeScript 类型）语法。@babel/eslint-parser 是一个解析器，可以让 ESLint 在经过 Babel 转换的源代码上运行。

🌐 ESLint's default parser and core rules only support the latest final ECMAScript standard and do not support experimental (such as new features) and non-standard (such as Flow or TypeScript types) syntax provided by Babel. @babel/eslint-parser is a parser that allows ESLint to run on source code that is transformed by Babel.

注意： 只有在你使用 Babel 转换代码时才需要使用 @babel/eslint-parser。如果不是这种情况，请使用你选择的 ECMAScript 版本对应的解析器（注意默认解析器支持所有非实验语法以及 JSX）。

它是如何工作的？​

🌐 How does it work?

ESLint 允许使用［自定义解析器］(https://eslint.nodejs.cn/docs/developer-guide/working-with-custom-parsers)。当使用这个插件时，你的代码会被 Babel 的解析器解析（使用你［Babel 配置文件］(./configuration.md) 中指定的配置），生成的 AST 会被转换成 ESLint 可以理解的［ESTree］(https://github.com/estree/estree) 兼容结构。所有位置信息，比如行号和列号，也会被保留，这样你就可以轻松追踪错误。

🌐 ESLint allows for the use of custom parsers. When using this plugin, your code is parsed by Babel's parser (using the configuration specified in your Babel configuration file) and the resulting AST is transformed into an ESTree-compliant structure that ESLint can understand. All location info such as line numbers, columns is also retained so you can track down errors with ease.

注意： ESLint 的核心规则不支持实验性语法，因此在使用 @babel/eslint-parser 时可能无法正常工作。对于你遇到问题的核心规则，请使用配套的 @babel/eslint-plugin 插件。

用法​

🌐 Usage

安装​

🌐 Installation

npm install eslint @babel/core @babel/eslint-parser --save-dev

注意： @babel/eslint-parser 需要 @babel/core@>=7.2.0 和一个有效的 Babel 配置文件才能运行。如果你还没有设置好，请查看 Babel 使用指南。

设置​

🌐 Setup

要使用 @babel/eslint-parser，必须在你的 ESLint 配置文件中将 "@babel/eslint-parser" 指定为 parser（更多详细信息请参见 这里）。

🌐 To use @babel/eslint-parser, "@babel/eslint-parser" must be specified as the parser in your ESLint configuration file (see here for more detailed information).

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParser,
    },
  },
]);

设置好解析器后，你可以按照 配置 ESLint 文档中描述的方式来配置你的设置。

🌐 With the parser set, your configuration can be configured as described in the Configuring ESLint documentation.

注意： 官方文档 中描述的 parserOptions 是针对默认解析器的，并不一定被 @babel/eslint-parser 支持。请查看下方部分了解支持的 parserOptions。

额外的解析器配置​

🌐 Additional parser configuration

你可以在 ESLint 配置中的 parserOptions 键下设置额外的配置选项。请注意，对于 ESLint 正常工作，默认不在 ECMAScript 5 中的功能，可能仍然需要 ecmaFeatures 配置属性。

🌐 Additional configuration options can be set in your ESLint configuration under the parserOptions key. Please note that the ecmaFeatures config property may still be required for ESLint to work properly with features not in ECMAScript 5 by default.

  • requireConfigFile（默认 true）可以设置为 false，以允许 @babel/eslint-parser 在没有关联 Babel 配置的文件上运行。这对于 lint 一些没有经过 Babel 转换的文件（例如工具配置文件）很有用，不过我们还是建议通过 基于 glob 的配置 使用默认的解析器。注意：当 requireConfigFile 是 false 时，@babel/eslint-parser 仍然会尝试加载根目录的 Babel 配置。如果找不到配置文件，@babel/eslint-parser 将不会解析任何实验性语法。虽不推荐，但如果你有 Babel 配置，但又想阻止 @babel/eslint-parser 加载 Babel 配置，请指定

    import babelParser from "@babel/eslint-parser";
    import { defineConfig } from "eslint/config";

    export default defineConfig([
      {
        files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
        languageOptions: {
          parser: babelParser,
          parserOptions: {
            requireConfigFile: false,
            babelOptions: {
              babelrc: false,
              configFile: false,
              // your babel options
              presets: ["@babel/preset-env"],
            },
          },
        },
      },
    ]);

    eslint.config.js

  • sourceType 可以设置为 "module"（默认）、"script" 或 "commonjs"。

  • ecmaFeatures.globalReturn（默认 false）在与 sourceType: "script" 一起使用时允许在全局范围内使用 return 语句。此选项将被弃用，请改用 sourceType: "commonjs"。

  • babelOptions 是一个包含 Babel 配置 选项 的对象，这些选项会在运行时传递给 Babel 的解析器。对于那些可能不想使用 Babel 配置文件，或者通过其他工具（例如带有 babel-loader 的 Webpack）运行 Babel 的情况，这会很有用。

自定义 Babel 配置路径​

🌐 customize Babel config path

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParser,
      parserOptions: {
        requireConfigFile: false,
        babelOptions: {
          babelrc: false,
          configFile: "path/to/babel.config.js",
        },
      },
    },
  },
]);

使用基于 glob 的配置​

🌐 use glob-based configuration

这个配置会对除了 "files/transformed/by/babel/*.js" 通配符找到的文件之外的所有文件使用默认解析器。

🌐 This configuration would use the default parser for all files except for those found by the "files/transformed/by/babel/*.js" glob.

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["files/transformed/by/babel/*.js"],
    languageOptions: {
      parser: babelParser,
    },
  },
]);

Monorepo 配置​

🌐 Monorepo configuration

此配置对于 monorepo 很有用，当你在每个包上运行 ESLint 而不是从 monorepo 根文件夹运行时，因为它避免了在每个包上重复 Babel 和 ESLint 配置。

🌐 This configuration is useful for monorepo, when you are running ESLint on every package and not from the monorepo root folder, as it avoids to repeat the Babel and ESLint configuration on every package.

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParser,
      parserOptions: {
        babelOptions: {
          rootMode: "upward",
        },
      },
    },
  },
]);

运行​

🌐 Run

./node_modules/.bin/eslint yourfile.js

TypeScript​

虽然 @babel/eslint-parser 可以解析 TypeScript，但我们目前不支持使用 @babel/eslint-plugin 的规则来对 TypeScript 进行 lint。这是因为 TypeScript 社区主要围绕 @typescript-eslint 展开，我们也想避免重复工作。另外，由于 @typescript-eslint 在底层使用了 TypeScript，它的规则可以具备类型感知能力，这是 Babel 做不到的。

🌐 While @babel/eslint-parser can parse TypeScript, we don't currently support linting TypeScript using the rules in @babel/eslint-plugin. This is because the TypeScript community has centered around @typescript-eslint and we want to avoid duplicate work. Additionally, since @typescript-eslint uses TypeScript under the hood, its rules can be made type-aware, which is something Babel doesn't have the ability to do.