@babel/eslint-parser
本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
@babel/eslint-parser 能够借助强大的 ESLint 工具对任何有效的 Babel 代码进行静态检查。
何时应该使用 @babel/eslint-parser?
ESLint 的默认解析器和核心规则 仅支持最新的 ECMAScript 正式标准,不支持 Babel 提供的实验性语法(如新特性)和非标准语法(如 Flow 或 TypeScript 类型)。@babel/eslint-parser 是一个允许 ESLint 在 Babel 转换后的源代码上运行的解析器。
注意: 仅当您使用 Babel 转换代码时才需要 @babel/eslint-parser。若非这种情况,请使用对应您所选 ECMAScript 版本的解析器(请注意默认解析器支持所有非实验性语法以及 JSX)。
工作原理
ESLint 支持使用自定义解析器。使用此插件时,您的代码会通过 Babel 解析器(使用 Babel 配置文件中的配置)进行解析,生成的 AST 将被转换为符合 ESTree 规范的结构以便 ESLint 理解。所有位置信息(如行号、列号)都会保留,让您能轻松追踪错误。
注意: ESLint 核心规则不支持实验性语法,因此在使用 @babel/eslint-parser 时可能无法正常工作。若遇到核心规则问题,请使用配套的 @babel/eslint-plugin 插件。
用法
安装
- npm
- Yarn
- pnpm
- Bun
npm install eslint @babel/core @babel/eslint-parser --save-dev
yarn add eslint @babel/core @babel/eslint-parser --dev
pnpm add eslint @babel/core @babel/eslint-parser --save-dev
bun add eslint @babel/core @babel/eslint-parser --dev
注意: @babel/eslint-parser 需要 @babel/core@>=7.2.0 和有效的 Babel 配置文件才能运行。若尚未配置,请参阅 Babel 使用指南。
配置
要使用 @babel/eslint-parser,必须在 ESLint 配置文件中将 "@babel/eslint-parser" 指定为 parser(详见此处)。
- eslint.config.js
- .eslintrc.js
import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
languageOptions: {
parser: babelParser,
},
},
]);
module.exports = {
parser: "@babel/eslint-parser",
};
设置解析器后,您可按照 配置 ESLint 文档所述进行配置。
注意: 官方文档描述的 parserOptions 适用于默认解析器,不一定被 @babel/eslint-parser 支持。支持的 parserOptions 请见下方章节。
额外解析器配置
可在 ESLint 配置的 parserOptions 键下设置额外配置选项。请注意,对于默认不在 ECMAScript 5 中的功能,可能仍需配置 ecmaFeatures 属性才能确保 ESLint 正常工作。
-
requireConfigFile(defaulttrue) can be set tofalseto allow @babel/eslint-parser to run on files that do not have a Babel configuration associated with them. This can be useful for linting files that are not transformed by Babel (such as tooling configuration files), though we recommend using the default parser via glob-based configuration. Note: WhenrequireConfigFileisfalse, @babel/eslint-parser will still try to load the root babel config. If no configuration file is found, @babel/eslint-parser will not parse any experimental syntax. Though not recommended, if you have a babel config, but would like to prevent @babel/eslint-parser from loading Babel config, please specify- eslint.config.js
- .eslintrc.js
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"],
},
},
},
},
]);module.exports = {
parser: "@babel/eslint-parser",
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)允许在全局作用域使用 return 语句(需配合sourceType: "script")。此选项将被弃用,请改用sourceType: "commonjs" -
babelOptions是包含 Babel 配置选项的对象,会在运行时传递给 Babel 解析器。适用于用户不想使用 Babel 配置文件或通过其他工具(如使用babel-loader的 Webpack)运行 Babel 的场景。
allowImportExportEverywhere(默认值false)可设置为true,允许在构建环境支持的情况下,在任何允许语句的位置使用 import 和 export 声明。否则 import 和 export 声明只能出现在程序顶层。
自定义 Babel 配置路径
- eslint.config.js
- .eslintrc.js
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",
},
},
},
},
]);
module.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
sourceType: "module",
allowImportExportEverywhere: false,
ecmaFeatures: {
globalReturn: false,
},
babelOptions: {
configFile: "path/to/config.js",
},
},
};
使用 babel.config.mjs 配置
如果您的 Babel 配置不包含顶层 await,可在 Node.js 22.12 或更高版本中直接使用 .mjs 配置文件。否则可使用实验性的 worker 实现(请注意该实现仍处于实验阶段,如遇问题请反馈)。
- eslint.config.js
- .eslintrc.js
import babelParserExperimentalWorker from "@babel/eslint-parser/experimental-worker";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
languageOptions: {
parser: babelParserExperimentalWorker,
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: "path/to/babel.config.mjs",
},
},
},
},
]);
module.exports = {
parser: "@babel/eslint-parser/experimental-worker",
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: "path/to/babel.config.mjs",
},
},
};
使用基于 glob 的配置
此配置将对所有文件使用默认解析器,但匹配 "files/transformed/by/babel/*.js" glob 模式的文件除外。
- eslint.config.js
- .eslintrc.js
import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["files/transformed/by/babel/*.js"],
languageOptions: {
parser: babelParser,
},
},
]);
module.exports = {
rules: {
indent: "error",
},
overrides: [
{
files: ["files/transformed/by/babel/*.js"],
parser: "@babel/eslint-parser",
},
],
};
Monorepo 配置
此配置适用于 monorepo 项目(当您在每个子包而非 monorepo 根目录运行 ESLint 时),可避免在每个子包中重复 Babel 和 ESLint 配置。
- eslint.config.js
- .eslintrc.js
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",
},
},
},
},
]);
module.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
babelOptions: {
rootMode: "upward",
},
},
};
运行
./node_modules/.bin/eslint yourfile.js
TypeScript 支持
虽然 @babel/eslint-parser 能够解析 TypeScript,但我们目前不推荐使用 @babel/eslint-plugin 中的规则对 TypeScript 进行静态检查。原因如下:
- TypeScript 社区已围绕
@typescript-eslint形成生态 - 避免重复工作
@typescript-eslint底层使用 TypeScript 编译器,可实现类型感知规则(这是 Babel 无法提供的功能)