@babel/eslint-plugin provides companion ESLint rules for @babel/eslint-parser. It re-implements core ESLint rules to eliminate false positives and negatives when working with experimental Babel features like decorators, class fields, private methods, accessor properties, do expressions, and modern export syntax.
npm install @babel/eslint-plugin --save-devCommonJS (main entry point):
const babelEslintPlugin = require("@babel/eslint-plugin");
const { meta, rules, rulesConfig } = babelEslintPlugin;ESM (when default export is available):
import babelEslintPlugin from "@babel/eslint-plugin";
const { meta, rules, rulesConfig } = babelEslintPlugin;Destructured imports (with TypeScript types):
const { meta, rules, rulesConfig } = require("@babel/eslint-plugin");Configuration in .eslintrc.json:
{
"plugins": ["@babel"],
"rules": {
"@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"
}
}Each rule corresponds to a core ESLint rule and has the same options. Remember to disable the original ESLint rules when enabling the @babel equivalents.
Access to plugin name and version information.
const meta: {
name: string;
version: string;
};Collection of all ESLint rules provided by the plugin.
const rules: {
"new-cap": ESLintRule;
"no-invalid-this": ESLintRule;
"no-undef": ESLintRule;
"no-unused-expressions": ESLintRule;
"object-curly-spacing": ESLintRule;
"semi": ESLintRule;
};Default configuration object with all rules set to "off".
const rulesConfig: {
"new-cap": "off";
"no-invalid-this": "off";
"no-undef": "off";
"no-unused-expressions": "off";
"object-curly-spacing": "off";
"semi": "off";
};Extends ESLint's new-cap rule to handle decorators properly. Prevents false positives when using decorator syntax (@Decorator).
// Rule: "@babel/new-cap"
// Handles: @MyDecorator class MyClass{}
// Options: Same as ESLint new-cap ruleUsage Example:
// ✅ Valid - decorator syntax
@MyDecorator(options)
class MyComponent {
// class implementation
}
// Configuration
{
"rules": {
"new-cap": "off", // Disable original
"@babel/new-cap": "error" // Enable Babel version
}
}Extends ESLint's no-invalid-this rule to handle class fields and private class methods. Prevents false positives in modern class syntax.
// Rule: "@babel/no-invalid-this"
// Handles: class A { field = this.value; #private() { return this.field; } }
// Options: Same as ESLint no-invalid-this ruleUsage Example:
// ✅ Valid - class field with this reference
class MyClass {
value = 42;
field = this.value; // Valid this usage
#privateMethod() {
return this.field; // Valid this usage in private method
}
}Extends ESLint's no-undef rule to handle class accessor properties. Prevents false positives when using accessor syntax in classes.
// Rule: "@babel/no-undef"
// Handles: class A { accessor x = 2; }
// Options: Same as ESLint no-undef ruleUsage Example:
// ✅ Valid - class accessor property
class MyClass {
accessor x = 2; // Accessor property syntax
getValue() {
return this.x;
}
}Extends ESLint's no-unused-expressions rule to handle do expressions and optional call expressions. Prevents false positives when using experimental syntax.
// Rule: "@babel/no-unused-expressions"
// Handles: do { /* expression block */ } and optional call expressions
// Options: Same as ESLint no-unused-expressions ruleUsage Example:
// ✅ Valid - do expression
const result = do {
if (condition) {
"success";
} else {
"failure";
}
};
// ✅ Valid - optional call expression
obj?.method?.();Extends ESLint's object-curly-spacing rule to handle export default from syntax. Prevents false positives when using export x from 'module' syntax with autofixing.
// Rule: "@babel/object-curly-spacing"
// Handles: export x from './module';
// Options: Same as ESLint object-curly-spacing rule
// Features: Autofixable (🛠)Usage Example:
// ✅ Valid - export default from syntax
export x from './utils';
export y from './helpers';
// Configuration with options
{
"rules": {
"object-curly-spacing": "off",
"@babel/object-curly-spacing": ["error", "always"]
}
}Extends ESLint's semi rule to handle class properties. Manages semicolon usage in class property definitions with autofixing support.
// Rule: "@babel/semi"
// Handles: class A { prop = value; }
// Options: Same as ESLint semi rule
// Features: Autofixable (🛠)Usage Example:
// ✅ Valid - class properties with semicolons
class MyClass {
property = "value"; // Semicolon handled properly
#private = 42; // Private property
method() {
return this.property;
}
}
// Configuration options
{
"rules": {
"semi": "off",
"@babel/semi": ["error", "always", {
"omitLastInOneLineBlock": true
}]
}
}All rules conform to the ESLint Rule Module interface.
interface ESLintRule {
meta?: {
type?: "problem" | "suggestion" | "layout";
docs?: {
description?: string;
category?: string;
recommended?: boolean;
};
fixable?: "code" | "whitespace";
schema?: any;
};
create(context: RuleContext): RuleListener;
}
interface RuleContext {
id: string;
options: any[];
settings: { [name: string]: any };
parserPath: string;
parserOptions: ParserOptions;
parserServices: ParserServices;
getAncestors(): ESNode[];
getDeclaredVariables(node: ESNode): Variable[];
getFilename(): string;
getScope(): Scope;
getSourceCode(): SourceCode;
markVariableAsUsed(name: string): boolean;
report(descriptor: ReportDescriptor): void;
}The plugin automatically adapts its behavior based on the ESLint version:
Rules follow standard ESLint error reporting patterns. Each rule may report violations with:
Common configuration patterns:
// Disable original rule, enable Babel version
{
"rules": {
"semi": "off",
"@babel/semi": "error"
}
}
// Use with options (same as original ESLint rule)
{
"rules": {
"@babel/object-curly-spacing": ["error", "always", {
"arraysInObjects": false,
"objectsInObjects": false
}]
}
}