@babel/eslint-plugin
@babel/eslint-parser
的配套规则。@babel/eslint-parser
在与 Babel 配合使用方面做得很好,但它无法更改内置规则以支持实验性功能。@babel/eslint-plugin
重新实现了有问题的规则,因此它们不会给出误报或漏报。
¥Companion rules for @babel/eslint-parser
. @babel/eslint-parser
does a great job at adapting eslint
for use with Babel, but it can't change the built-in rules to support experimental features.
@babel/eslint-plugin
re-implements problematic rules so they do not give false positives or negatives.
需要 Node.js 10.13 或更高版本
¥Requires Node.js 10.13 or greater
安装
¥Install
- npm
- Yarn
- pnpm
- Bun
npm install @babel/eslint-plugin --save-dev
yarn add @babel/eslint-plugin --dev
pnpm add @babel/eslint-plugin --save-dev
bun add @babel/eslint-plugin --dev
在你的 ESLint 配置中加载该插件并启用所有你想要使用的规则(记住也禁用原始规则!)。
¥Load the plugin in your ESLint config and enable all the rules you would like to use (remember to disable the original ones as well!).
- eslint.config.js
- .eslintrc.json
import babelParser from "@babel/eslint-parser";
import babelPlugin from "@babel/eslint-plugin";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
languageOptions: {
parser: babelParser,
},
plugins: {
babel: babelPlugin
},
rules: {
"new-cap": "off",
"no-undef": "off",
"no-unused-expressions": "off",
"object-curly-spacing": "off",
"babel/new-cap": "error",
"babel/no-undef": "error",
"babel/no-unused-expressions": "error",
"babel/object-curly-spacing": "error"
}
},
]);
{
"plugins": ["@babel"],
"rules": {
"new-cap": "off",
"no-invalid-this": "off",
"no-undef": "off",
"no-unused-expressions": "off",
"object-curly-spacing": "off",
"semi": "off",
"@babel/new-cap": "error",
"@babel/no-invalid-this": "error",
"@babel/no-undef": "error",
"@babel/no-unused-expressions": "error",
"@babel/object-curly-spacing": "error",
"@babel/semi": "error"
}
}
规则
¥Rules
每条规则对应一条核心 eslint
规则,并具有相同的选项。
¥Each rule corresponds to a core eslint
rule and has the same options.
🛠 表示可以使用 --fix
自动修复。
¥🛠: means it's autofixable with --fix
.
在 ESLint 8 或更高版本中,你可以切换到内置规则 no-invalid-this
和 semi
。
¥On ESLint 8 or above, you can switch to the builtin rules no-invalid-this
and semi
.
-
@babel/new-cap
:处理装饰器 (@Decorator
)¥
@babel/new-cap
: handles decorators (@Decorator
) -
@babel/no-undef
:处理类访问器属性 (class A { accessor x = 2 }
)¥
@babel/no-undef
: handles class accessor properties (class A { accessor x = 2 }
) -
@babel/no-unused-expressions
:处理do
表达式¥
@babel/no-unused-expressions
: handlesdo
expressions -
@babel/object-curly-spacing
:处理导出默认声明export x from "mod";
(🛠)¥
@babel/object-curly-spacing
: handles export default declarationexport x from "mod";
(🛠) -
@babel/no-invalid-this
:处理类字段和私有类方法 (class A { a = this.b; }
)。¥
@babel/no-invalid-this
: handles class fields and private class methods (class A { a = this.b; }
). -
@babel/semi
:处理类属性 (🛠)。¥
@babel/semi
: Handles class properties (🛠).
TypeScript
虽然 @babel/eslint-parser
可以解析 TypeScript,但我们目前不支持使用 @babel/eslint-plugin
中的规则对 TypeScript 进行 linting。这是因为 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.