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

configuration.mddocs/

Configuration Details

Comprehensive guide to configuring the sort-class-members rule with detailed examples and advanced patterns.

Capabilities

Order Configuration

The order array defines the expected sequence of class members using strings and objects.

/**
 * Defines the expected sort order of class members
 * @param order - Array of member selectors and group references
 */
interface OrderConfiguration {
  order: (string | MemberSelector)[];
}

String Values:

  • Direct member names: "constructor", "render", "componentDidMount"
  • Group references: "[properties]", "[methods]", "[static-methods]"
  • Regex patterns: "/on.+/" (matches names starting with "on")

Usage Examples:

// Basic ordering
{
  "order": [
    "[static-properties]",
    "[static-methods]",
    "[properties]",
    "constructor",
    "[methods]"
  ]
}

// Mixed with specific members
{
  "order": [
    "displayName",           // Specific property first
    "[static-properties]",   // Then other static properties
    "constructor",
    "componentDidMount",     // Specific lifecycle method
    "[methods]"             // Then other methods
  ]
}

// With regex patterns
{
  "order": [
    "/on.+/",               // Event handlers first
    "constructor",
    "[methods]"
  ]
}

Groups Configuration

Custom groups allow creating reusable member selectors for complex ordering patterns.

/**
 * Custom named groups of member selectors
 * @param groups - Object mapping group names to selector arrays
 */
interface GroupsConfiguration {
  groups: { [groupName: string]: (string | MemberSelector)[] };
}

Usage Examples:

{
  "order": [
    "[lifecycle-methods]",
    "[event-handlers]",
    "[render-methods]"
  ],
  "groups": {
    "lifecycle-methods": [
      "constructor",
      "componentDidMount",
      "componentDidUpdate",
      "componentWillUnmount"
    ],
    "event-handlers": [
      { "name": "/on.+/", "type": "method" }
    ],
    "render-methods": [
      { "name": "/render.+/", "type": "method" },
      "render"
    ]
  }
}

Member Selectors

Advanced member matching using multiple criteria for fine-grained control.

/**
 * Flexible member selector with multiple matching criteria
 */
interface MemberSelector {
  /** Member name - exact match or regex pattern */
  name?: string;
  /** Member type classification */
  type?: "method" | "property";
  /** Method accessor subtype */
  kind?: "get" | "set" | "accessor" | "nonAccessor";
  /** AST node type of property value */
  propertyType?: string;
  /** Must be part of getter/setter pair */
  accessorPair?: boolean;
  /** Sorting behavior within group */
  sort?: "alphabetical" | "none";
  /** Static vs instance classification */
  static?: boolean;
  /** Private member matching (requires custom parser) */
  private?: boolean;
  /** Async method matching */
  async?: boolean;
  /** TypeScript accessibility modifier */
  accessibility?: "public" | "private" | "protected";
  /** TypeScript abstract keyword */
  abstract?: boolean;
  /** TypeScript override keyword */
  override?: boolean;
  /** TypeScript readonly keyword */
  readonly?: boolean;
  /** Decorator-based grouping */
  groupByDecorator?: string | boolean;
}

Selector Examples:

// Match static methods named 'create'
{ "name": "create", "type": "method", "static": true }

// Match all private methods
{ "type": "method", "private": true }

// Match properties with arrow function values
{ "type": "property", "propertyType": "ArrowFunctionExpression" }

// Match async methods with alphabetical sorting
{ "type": "method", "async": true, "sort": "alphabetical" }

// Match methods with @observable decorator
{ "type": "method", "groupByDecorator": "observable" }

// Match getter/setter pairs
{ "accessorPair": true }

// Match TypeScript protected methods
{ "type": "method", "accessibility": "protected" }

Accessor Pair Positioning

Controls the relative positioning of getter and setter methods.

/**
 * Positioning requirement for getter/setter pairs
 */
type AccessorPairPositioning = "getThenSet" | "setThenGet" | "together" | "any";

Options:

  • "getThenSet": Getter must come immediately before setter
  • "setThenGet": Setter must come immediately before getter
  • "together": Getter and setter must be adjacent (either order)
  • "any": No positioning requirement

Usage Examples:

// Strict getter-first ordering
{
  "accessorPairPositioning": "getThenSet"
}

// Allow either order but must be adjacent
{
  "accessorPairPositioning": "together"
}

Advanced Configuration Options

Additional options for fine-tuning rule behavior.

/**
 * Additional configuration options
 */
interface AdvancedOptions {
  /** Stop reporting after first problem found */
  stopAfterFirstProblem?: boolean;
  /** Apply rule to TypeScript interfaces */
  sortInterfaces?: boolean;
  /** Locale for name comparison sorting */
  locale?: string;
}

Usage Examples:

{
  "stopAfterFirstProblem": true,    // Reduce noise in large files
  "sortInterfaces": true,           // Apply to TypeScript interfaces
  "locale": "en-US"                // Specify sorting locale
}

Complex Configuration Example

Real-world configuration combining multiple features:

{
  "order": [
    // Static class configuration
    "displayName",
    "[static-properties]",
    "[static-factory-methods]",
    
    // Instance properties by category
    "[observable-properties]",
    "[computed-properties]", 
    "[regular-properties]",
    "[conventional-private-properties]",
    
    // Constructor
    "constructor",
    
    // Lifecycle methods (React example)
    "[lifecycle-methods]",
    
    // Event handlers
    "[event-handlers]",
    
    // Instance methods
    "[action-methods]",
    "[render-helper-methods]",
    "[methods]",
    "[conventional-private-methods]",
    
    // Render method last
    "render"
  ],
  "groups": {
    "static-factory-methods": [
      { "name": "/create.+/", "type": "method", "static": true },
      { "name": "/from.+/", "type": "method", "static": true }
    ],
    "observable-properties": [
      { "type": "property", "groupByDecorator": "observable" }
    ],
    "computed-properties": [
      { "type": "property", "groupByDecorator": "computed" }
    ],
    "regular-properties": [
      { "type": "property", "groupByDecorator": false }
    ],
    "lifecycle-methods": [
      "componentDidMount",
      "componentDidUpdate", 
      "componentWillUnmount"
    ],
    "event-handlers": [
      { "name": "/on.+/", "type": "method", "sort": "alphabetical" }
    ],
    "action-methods": [
      { "type": "method", "groupByDecorator": "action" }
    ],
    "render-helper-methods": [
      { "name": "/render.+/", "type": "method" }
    ]
  },
  "accessorPairPositioning": "getThenSet",
  "stopAfterFirstProblem": false,
  "locale": "en-US"
}

Regular Expression Patterns

String patterns starting and ending with / are treated as regular expressions:

/**
 * Regular expression pattern matching for member names
 * @param pattern - Regex pattern wrapped in forward slashes
 */
type RegexPattern = `/${string}/`;

Pattern Examples:

"/on.+/"          // Matches: onClick, onSubmit, onKeyPress
"/_.+/"           // Matches: _privateMethod, _helperFunction  
"/^get.+/"        // Matches: getName, getValue (starts with 'get')
"/.*Handler$/"    // Matches: clickHandler, submitHandler (ends with 'Handler')
"/[A-Z].+/"       // Matches: PascalCase names

TypeScript Support

Enhanced support for TypeScript-specific language features:

/**
 * TypeScript-specific member selectors
 */
interface TypeScriptSelectors {
  /** Accessibility modifier */
  accessibility?: "public" | "private" | "protected";
  /** Abstract keyword */
  abstract?: boolean;
  /** Override keyword */
  override?: boolean;
  /** Readonly keyword */
  readonly?: boolean;
}

TypeScript Examples:

// Match protected methods
{ "type": "method", "accessibility": "protected" }

// Match abstract properties
{ "type": "property", "abstract": true }

// Match readonly properties
{ "type": "property", "readonly": true }

// Match override methods
{ "type": "method", "override": true }

Decorator Support

Support for ES decorators and TypeScript decorators:

/**
 * Decorator-based member grouping
 * @param groupByDecorator - Decorator name pattern or boolean
 */
type DecoratorGrouping = string | boolean;

Decorator Examples:

// Group by specific decorator name
{ "groupByDecorator": "observable" }        // @observable

// Group by decorator presence
{ "groupByDecorator": true }                // Any decorator

// Group by decorator pattern
{ "groupByDecorator": "/test.+/" }          // @testMethod, @testCase

// Combine with other selectors
{ 
  "type": "property", 
  "groupByDecorator": "computed",
  "sort": "alphabetical" 
}

docs

configuration.md

index.md

tile.json