or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.md
tile.json

tessl/npm-eslint-plugin-sort-class-members

ESLint rule for enforcing consistent ES6 class member order with extensive customization options.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-sort-class-members@1.21.x

To install, run

npx @tessl/cli install tessl/npm-eslint-plugin-sort-class-members@1.21.0

index.mddocs/

ESLint Plugin Sort Class Members

ESLint Plugin Sort Class Members provides a single, highly configurable ESLint rule for enforcing consistent ES6 class member ordering. It supports extensive customization through named groups, member type matching, accessibility modifiers, decorators, and automatic fixing.

Package Information

  • Package Name: eslint-plugin-sort-class-members
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install eslint eslint-plugin-sort-class-members --save-dev

Core Imports

ESM Import:

import sortClassMembers from "eslint-plugin-sort-class-members";

CommonJS:

const sortClassMembers = require("eslint-plugin-sort-class-members");

Basic Usage

Traditional ESLint Configuration

Add to .eslintrc.json:

{
  "plugins": ["sort-class-members"],
  "rules": {
    "sort-class-members/sort-class-members": [
      2,
      {
        "order": [
          "[static-properties]",
          "[static-methods]",
          "[properties]",
          "[conventional-private-properties]",
          "constructor",
          "[methods]",
          "[conventional-private-methods]"
        ],
        "accessorPairPositioning": "getThenSet"
      }
    ]
  }
}

Flat Config (ESLint 9+)

Add to eslint.config.js:

import sortClassMembers from "eslint-plugin-sort-class-members";

export default [
  // Use the default configuration
  sortClassMembers.configs["flat/recommended"],
  
  // Or customize specific options
  {
    rules: {
      "sort-class-members/sort-class-members": [
        2,
        {
          "accessorPairPositioning": "together",
          "stopAfterFirstProblem": true
        }
      ]
    }
  }
];

Architecture

The plugin consists of several key components:

  • Plugin Object: Main export containing metadata, rules, and predefined configurations
  • Sort Class Members Rule: The core ESLint rule with extensive configuration schema
  • Built-in Groups: Predefined member groups like [properties], [methods], [static-methods]
  • Member Matching System: Flexible criteria-based system for matching class members
  • Auto-fix Engine: Automatic code fixing that preserves comments, decorators, and formatting

Capabilities

Plugin Registration

Main plugin object with metadata, rules, and predefined configurations.

interface ESLintPlugin {
  meta: {
    name: string;
    version: string;
  };
  rules: {
    "sort-class-members": ESLintRule;
  };
  configs: {
    recommended: ESLintConfig;
    "flat/recommended": FlatESLintConfig;
  };
}

Sort Class Members Rule

The main ESLint rule that enforces class member ordering with extensive configuration options.

interface ESLintRule {
  meta: {
    type: "suggestion";
    docs: {
      description: string;
      category: string;
      recommended: boolean;
      url: string;
    };
    fixable: "code";
    schema: JSONSchema[];
  };
  create: (context: ESLintContext) => ESLintVisitor;
}

interface ESLintVisitor {
  ClassDeclaration: (node: ASTNode) => void;
  ClassExpression: (node: ASTNode) => void;
  TSInterfaceDeclaration?: (node: ASTNode) => void;
}

Configuration Options

Comprehensive configuration system for customizing class member ordering rules.

interface SortClassMembersOptions {
  /** Array defining the expected sort order of class members */
  order?: (string | MemberSelector)[];
  /** Custom named groups of member selectors */
  groups?: { [groupName: string]: (string | MemberSelector)[] };
  /** Positioning requirement for getter/setter pairs */
  accessorPairPositioning?: "getThenSet" | "setThenGet" | "together" | "any";
  /** Stop reporting after first problem found */
  stopAfterFirstProblem?: boolean;
  /** Apply rule to TypeScript interfaces as well */
  sortInterfaces?: boolean;
  /** Locale for name comparison sorting */
  locale?: string;
}

interface MemberSelector {
  /** Member name (exact match or regex pattern) */
  name?: string;
  /** Member type */
  type?: "method" | "property";
  /** Accessor subtype */
  kind?: "get" | "set" | "accessor" | "nonAccessor";
  /** Property value type for properties */
  propertyType?: string;
  /** Must be part of getter/setter pair */
  accessorPair?: boolean;
  /** Sorting within matched group */
  sort?: "alphabetical" | "none";
  /** Static vs instance members */
  static?: boolean;
  /** Private members (requires custom parser) */
  private?: boolean;
  /** Async methods */
  async?: boolean;
  /** TypeScript accessibility modifier */
  accessibility?: "public" | "private" | "protected";
  /** TypeScript abstract keyword */
  abstract?: boolean;
  /** TypeScript override keyword */
  override?: boolean;
  /** TypeScript readonly keyword */
  readonly?: boolean;
  /** Group by decorator name or presence */
  groupByDecorator?: string | boolean;
}

Configuration Details

Built-in Groups

The plugin provides several predefined groups for common use cases:

interface BuiltInGroups {
  "[properties]": { type: "property" };
  "[getters]": { kind: "get" };
  "[setters]": { kind: "set" };
  "[accessor-pairs]": { accessorPair: true };
  "[static-properties]": { type: "property", static: true };
  "[conventional-private-properties]": { type: "property", name: "/_.+/" };
  "[arrow-function-properties]": { propertyType: "ArrowFunctionExpression" };
  "[methods]": { type: "method" };
  "[static-methods]": { type: "method", static: true };
  "[async-methods]": { type: "method", async: true };
  "[conventional-private-methods]": { type: "method", name: "/_.+/" };
  "[everything-else]": {};
}

Predefined Configurations

Traditional Configuration

interface TraditionalConfig {
  plugins: ["sort-class-members"];
  rules: {
    "sort-class-members/sort-class-members": [
      number,
      SortClassMembersOptions
    ];
  };
}

Flat Configuration

interface FlatConfig {
  name: "sort-class-members/flat/recommended";
  plugins: {
    "sort-class-members": ESLintPlugin;
  };
  rules: {
    "sort-class-members/sort-class-members": [
      number,
      SortClassMembersOptions
    ];
  };
}

Auto-fix Support

The rule provides automatic code fixes by reordering class members while preserving:

  • JSDoc comments and their association with members
  • TypeScript/Babel decorators
  • Proper spacing and line breaks
  • Code formatting and indentation

Auto-fixing only applies "before" positioning moves to avoid conflicts with other rules.