CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-plugin-babel

An eslint plugin companion to babel-eslint that re-implements problematic rules to support experimental JavaScript features

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

active-rules.mddocs/

Active Rules

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.

Capabilities

new-cap Rule

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();  // Invalid

camelcase Rule

Supports 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)

no-invalid-this Rule

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
  }
}

object-curly-spacing Rule

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 configuration

quotes Rule

Supports 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 configuration

semi Rule

Handles 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 configuration

no-unused-expressions Rule

Supports 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();    // Valid

valid-typeof Rule

Allows 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';  // Invalid

Rule Implementation Pattern

Most 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.

Install with Tessl CLI

npx tessl i tessl/npm-eslint-plugin-babel

docs

active-rules.md

deprecated-rules.md

index.md

plugin-configuration.md

rule-configuration.md

tile.json