Eight enhanced rules that provide Babel-compatible alternatives to core ESLint rules. Each rule wraps the corresponding core ESLint rule with additional filtering logic to support experimental JavaScript features.
Prevents false positives when using capitalized decorators.
/**
* Enhanced new-cap rule that ignores capitalized decorators
* Wraps core ESLint new-cap rule using eslint-rule-composer
* @type {Function}
*/
'new-cap': ruleComposer.filterReports(newCapRule, filterFunction)Special Behavior: Allows decorators like @Decorator without triggering new-cap violations.
Usage Examples:
// Valid with babel/new-cap (would fail with core new-cap)
@Component
class MyComponent {}
@Injectable()
class Service {}
// Standard new-cap behavior still applies
var x = new Constructor(); // Valid
var y = new constructor(); // InvalidSupports optional chaining syntax with underscored properties.
/**
* Enhanced camelcase rule with optional chaining support
* Custom implementation (not using rule-composer)
* @type {Object}
*/
'camelcase': {
meta: {
docs: {
description: "enforce camelcase naming convention",
category: "Stylistic Issues",
recommended: false,
url: "https://eslint.org/docs/rules/camelcase"
},
schema: [{
type: "object",
properties: {
ignoreDestructuring: { type: "boolean" },
properties: { enum: ["always", "never"] }
},
additionalProperties: false
}],
messages: {
notCamelCase: "Identifier '{{name}}' is not in camel case."
}
},
create: Function
}Special Behavior: Doesn't complain about optional chaining like var foo = bar?.a_b;.
Options: Same as core ESLint camelcase rule.
Usage Examples:
// Valid with babel/camelcase (would fail with core camelcase)
var result = obj?.some_property;
var data = api?.fetch_data?.();
// Standard camelcase behavior still applies
var camelCase = true; // Valid
var snake_case = false; // Invalid (unless configured otherwise)Allows 'this' usage within class properties.
/**
* Enhanced no-invalid-this rule supporting class properties
* Wraps core ESLint no-invalid-this rule using eslint-rule-composer
* @type {Function}
*/
'no-invalid-this': ruleComposer.filterReports(noInvalidThisRule, (problem, metadata) => {
// Custom filtering logic for class properties and private class properties
return !inClassPropertyOrPrivateProperty;
})Special Behavior: Doesn't fail when 'this' is used inside class properties (ClassProperty) or private class properties (ClassPrivateProperty).
Usage Examples:
// Valid with babel/no-invalid-this (would fail with core no-invalid-this)
class MyClass {
property = this.getValue();
#privateProperty = this.getPrivateValue();
method() {
return this.property; // Still valid in methods
}
}Handles modern export syntax variations.
/**
* Enhanced object-curly-spacing rule with export syntax support
* Wraps core ESLint object-curly-spacing rule using eslint-rule-composer
* @type {Function}
*/
'object-curly-spacing': ruleComposer.filterReports(objectCurlySpacingRule, filterFunction)Special Behavior: Doesn't complain about export * as x from "mod"; or export x from "mod"; syntax.
Fixable: Yes (autofixable with --fix).
Usage Examples:
// Valid with babel/object-curly-spacing
export * as utils from "./utils";
export config from "./config";
// Standard object-curly-spacing behavior still applies
import { foo } from "module"; // Valid/invalid based on configuration
const obj = { key: value }; // Valid/invalid based on configurationSupports JSX fragment shorthand syntax.
/**
* Enhanced quotes rule with JSX fragment support
* Wraps core ESLint quotes rule using eslint-rule-composer
* @type {Function}
*/
'quotes': ruleComposer.filterReports(quotesRule, filterFunction)Special Behavior: Doesn't complain about JSX fragment shorthand syntax like <>foo</>;.
Usage Examples:
// Valid with babel/quotes (would fail with core quotes in some configs)
const element = <>Hello World</>;
const fragment = (
<>
<div>Content</div>
</>
);
// Standard quotes behavior still applies
const str1 = "double quotes"; // Valid/invalid based on configuration
const str2 = 'single quotes'; // Valid/invalid based on configurationHandles async iteration and class properties.
/**
* Enhanced semi rule with async iteration and class property support
* Wraps core ESLint semi rule using eslint-rule-composer
* @type {Function}
*/
'semi': ruleComposer.filterReports(semiRule, filterFunction)Special Behavior: Doesn't fail when using for await loops and includes proper semicolon handling for class properties.
Fixable: Yes (autofixable with --fix).
Usage Examples:
// Valid with babel/semi
async function process() {
for await (const item of asyncIterable) {
console.log(item);
}
}
class MyClass {
property = "value"; // Semicolon handling respects class property syntax
}
// Standard semi behavior still applies
const statement = "example"; // Valid/invalid based on configuration
function test() { return true } // Valid/invalid based on configurationSupports do expressions and optional chaining.
/**
* Enhanced no-unused-expressions rule with do expressions and optional chaining support
* Wraps core ESLint no-unused-expressions rule using eslint-rule-composer
* @type {Function}
*/
'no-unused-expressions': ruleComposer.filterReports(noUnusedExpressionsRule, filterFunction)Special Behavior: Doesn't fail when using do expressions or optional chaining call expressions.
Usage Examples:
// Valid with babel/no-unused-expressions
const result = do {
if (condition) {
"value1";
} else {
"value2";
}
};
// Optional chaining calls
obj?.method?.();
api?.fetchData?.();
// Standard no-unused-expressions behavior still applies
"unused literal"; // Invalid
someFunction(); // ValidAllows BigInt typeof checks.
/**
* Enhanced valid-typeof rule with BigInt support
* Wraps core ESLint valid-typeof rule using eslint-rule-composer
* @type {Function}
*/
'valid-typeof': ruleComposer.filterReports(validTypeofRule, filterFunction)Special Behavior: Doesn't complain when checking typeof value === 'bigint'.
Usage Examples:
// Valid with babel/valid-typeof (would fail with core valid-typeof in older versions)
const num = BigInt(9007199254740991);
if (typeof num === 'bigint') {
console.log('It is a BigInt');
}
// Standard valid-typeof behavior still applies
typeof value === 'string'; // Valid
typeof value === 'number'; // Valid
typeof value === 'invalid'; // InvalidMost active rules follow this pattern:
/**
* Standard pattern for wrapping core ESLint rules
* @param {Object} originalRule - Core ESLint rule implementation
* @param {Function} filterFunction - Custom filtering logic
* @returns {Function} Enhanced rule function
*/
ruleComposer.filterReports(originalRule, (problem, metadata) => {
// Custom filtering logic for Babel compatibility
// Returns false to suppress the problem, true to keep it
return shouldReport;
});The camelcase rule is an exception - it's a complete custom implementation rather than a wrapper.