eslint-plugin-sort-class-members

What is eslint-plugin-sort-class-members?

eslint-plugin-sort-class-members is an ESLint plugin that helps enforce consistent ordering of class members in JavaScript and TypeScript classes. It allows developers to define a specific order for class properties and methods, improving code readability and maintainability.

What are eslint-plugin-sort-class-members's main functionalities?

Sorting class members by type

This feature allows you to define a specific order for class members, such as static properties, static methods, instance properties, the constructor, and instance methods. The provided code sample configures ESLint to enforce this order.

module.exports = {
  "plugins": ["sort-class-members"],
  "rules": {
    "sort-class-members/sort-class-members": [
      2,
      {
        "order": [
          "[static-properties]",
          "[static-methods]",
          "[properties]",
          "constructor",
          "[methods]"
        ],
        "accessorPairPositioning": "getThenSet"
      }
    ]
  }
};

Grouping class members by visibility

This feature allows you to group class members by their visibility (public, protected, private) and whether they are static or instance members. The provided code sample configures ESLint to enforce this grouping.

module.exports = {
  "plugins": ["sort-class-members"],
  "rules": {
    "sort-class-members/sort-class-members": [
      2,
      {
        "order": [
          "[public-static-properties]",
          "[protected-static-properties]",
          "[private-static-properties]",
          "[public-static-methods]",
          "[protected-static-methods]",
          "[private-static-methods]",
          "[public-properties]",
          "[protected-properties]",
          "[private-properties]",
          "constructor",
          "[public-methods]",
          "[protected-methods]",
          "[private-methods]"
        ],
        "groups": {
          "public-static-properties": [{"name": "^publicStatic[A-Z]", "type": "property", "static": true, "visibility": "public"}],
          "protected-static-properties": [{"name": "^protectedStatic[A-Z]", "type": "property", "static": true, "visibility": "protected"}],
          "private-static-properties": [{"name": "^privateStatic[A-Z]", "type": "property", "static": true, "visibility": "private"}],
          "public-static-methods": [{"name": "^publicStatic[A-Z]", "type": "method", "static": true, "visibility": "public"}],
          "protected-static-methods": [{"name": "^protectedStatic[A-Z]", "type": "method", "static": true, "visibility": "protected"}],
          "private-static-methods": [{"name": "^privateStatic[A-Z]", "type": "method", "static": true, "visibility": "private"}],
          "public-properties": [{"name": "^public[A-Z]", "type": "property", "visibility": "public"}],
          "protected-properties": [{"name": "^protected[A-Z]", "type": "property", "visibility": "protected"}],
          "private-properties": [{"name": "^private[A-Z]", "type": "property", "visibility": "private"}],
          "public-methods": [{"name": "^public[A-Z]", "type": "method", "visibility": "public"}],
          "protected-methods": [{"name": "^protected[A-Z]", "type": "method", "visibility": "protected"}],
          "private-methods": [{"name": "^private[A-Z]", "type": "method", "visibility": "private"}]
        }
      }
    ]
  }
};

Other packages similar to eslint-plugin-sort-class-members

typescript-eslint

typescript-eslint is a popular ESLint plugin for TypeScript that includes a rule called 'member-ordering' which can be used to enforce the order of class members. While it is not as specialized as eslint-plugin-sort-class-members, it provides a broader set of linting rules for TypeScript projects.

README

eslint-plugin-sort-class-members

ESLint rule for enforcing consistent ES6 class member order.

Installation

Install ESLint and eslint-plugin-sort-class-members:

$ npm install eslint eslint-plugin-sort-class-members --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-sort-class-members globally.

Usage

Add sort-class-members to the plugins section of your .eslintrc configuration file, and configure the rule under the rules section.

{
  "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]"
      ]
    }]
  }
}

When using the default configuration (shown above), the following patterns are considered problems:

class Foo {
  b = 'bar';

  c(){}

  constructor(){} // error Expected constructor to come before method c

  static a(){} // error Expected static method a to come before property b
}

When using the default configuration (shown above), the following patterns are not considered problems:

class Foo {
  static a(){}

  b = 'bar';

  constructor(){}

  c(){}
}

Configuration

The rule accepts two configuration properties:

• order: Used to specify the expected sort order of class members.
• groups: May optionally be used to created customized named groups of members so that order can be more easily maintained. Groups can be referenced by name by using square brackets. E.g., "[group-name]".

{
  "order": [
    "constructor",
    "[event-handlers]", // reference the custom group defined in the "groups" property
    "[everything-else]" // a few groups are provided by default (see list below)
  ],
  "groups": {
    "event-handlers": [{ "name": "/on.+/", "type": "method" }]
  }
}

Members can be matched by name (exact match or regexp), by type ("method" or "property"), and by whether or not the member is static. Each match may be described by an object with three properties, all of which are optional.

• name: a string matching the name of the member. If the string starts and ends with / it will be interpreted as a regular expression. E.g., "/_.+/".
• type: "method"|"property". Note that class properties currently require a custom parser like babel-eslint.
• static: true|false to restrict the match to static or instance members.

A few examples:

• { "name": "create", "type": "method", "static": true } would match a static method named create.
• { "static": true } would match all static methods and properties.
• { "name": "/on.+/", "type": "method" } would match both static and instance methods whose names start with "on".
• "/on.+/" is shorthand for { "name": "/on.+/" }, and would match all static and instance methods and properties whose names start with "on".

Note that you can simply use a string if you only want to match on the name.

The following groups are provided by default:

• [properties]: matches all properties
• [static-properties]: matches all static properties
• [conventional-private-properties]: matches properties whose name starts with an underscore
• [methods]: matches all methods
• [static-methods]: matches all static methods
• [conventional-private-methods]: matches methods whose name starts with an underscore
• [everything-else]: matches all class members not matched by any other rule

NOTE: Currently only ES2016 property initializers are matched by "type": "property". Properties added via assignment are not considered by this rule.