CtrlK
BlogDocsLog inGet started
Tessl Logo

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

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

—

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

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.

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