eslint-plugin-sort-properties

This plugin provides rules that enforce the sorting of properties in object expressions, object destructuring for JavaScript, and type literals, interface members for TypeScript.\ Inspired by eslint-plugin-sort-keys-fix and eslint-plugin-sort-destructure-keys, it is designed to be auto-fixable. But with optimization, it is up to 11x faster to fix, 6x to parse, 60x to apply rule than these plugins._benchmark\ And this plugin can be configured to include leading/trailing comments as part of the property, so there's less chance of breaking the placement of comments.\ Additionally, inspired by the eslint-plugin-react/jsx-sort-props rule, it supports giving higher priority to function properties when sorting.

Table of Contents

• Rules
• Installation
• Available configurations
• Configuration (legacy: .eslintrc*)
• Configuration (new: eslint.config.js)
• Options

Rules

⚠️ Configurations set to warn in.\ 🌐 Set in the all configuration.\ Set in the js configuration.\ Set in the ts configuration.\ 🔧 Automatically fixable by the --fix CLI option.\ 💡 Manually fixable by editor suggestions.

Name	Description	⚠️	🔧	💡
sort-interface	Enforce interface members to be sorted.	🌐	🔧	💡
sort-object-destructing	Enforce properties in object destructuring to be sorted.	🌐	🔧	💡
sort-object-expression	Enforce properties in object expressions to be sorted.	🌐	🔧	💡
sort-type-literal	Enforce properties in type literals to be sorted.	🌐	🔧	💡

Installation

You'll first need to install ESLint:

npm install eslint --save-dev

Next, install eslint-plugin-sort-properties:

npm install eslint-plugin-sort-properties --save-dev

Available configurations

| | Name | Description | | :----------------------------------------------------------------------- | :---- | :--------------------------------------------------------------------------------- | | 🌐 | all | Apply all rules in the sort-properties plugin. Use flat/all in eslint>=9 | | | js | Apply JavaScript rules in the sort-properties plugin. Use flat/js in eslint>=9 | | | ts | Apply TypeScript rules in the sort-properties plugin. Use flat/ts in eslint>=9 |

Configuration (legacy: .eslintrc*)

⚠️ Important note\ To use rules for typescript(sort-interface, sort-type-literal), you must specify the parser as @typescript-eslint/parser.

module.exports = {
  // ...
  overrides: [
    {
      files: ["**/*.{ts,tsx}"],
      parser: "@typescript-eslint/parser",
    },
  ],
};

Use all to enable all rules. Here's an example configuration in your .eslintrc:

module.exports = {
  extends: ["plugin:sort-properties/all"],
};

or you can enable specific rules:

module.exports = {
  plugins: ["sort-properties"],
  rules: {
    "sort-properties/sort-interface": "warn",
    "sort-properties/sort-object-destructing": "warn",
    "sort-properties/sort-object-expression": [
      "warn",
      // See the options section below for more information
      {
        allowLineSeparatedGroups: false,
        caseSensitive: true,
        functionOrder: "higher",
        includeComments: "leading",
        minKeys: 2,
        natural: true,
        order: "asc",
      },
    ],
    "sort-properties/sort-type-literal": "warn",
  },
};

Configuration (new: eslint.config.js)

⚠️ Important note\ To use rules for typescript(sort-interface, sort-type-literal), you must specify the parser as @typescript-eslint/parser.

const tseslint = require("typescript-eslint");

// Use utility function for typescript-eslint
module.exports = tseslint.config(
  { ... }
);

// Or manually specify the parser
module.exports = [
  {
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      parser: tseslint.parser,
    },
  },
];

Use flat/all to enable all rules. Here's an example configuration in your eslint.config.js:

const sortPropertiesPlugin = require("eslint-plugin-sort-properties");

module.exports = [
  // ...
  sortPropertiesPlugin.configs["flat/all"],
];

or you can enable specific rules:

module.exports = [
  // ...
  {
    plugins: {
      "sort-properties": require("eslint-plugin-sort-properties"),
    },
    rules: {
      "sort-properties/sort-interface": "warn",
      "sort-properties/sort-object-destructing": "warn",
      "sort-properties/sort-object-expression": [
        "warn",
        // See the options section below for more information
        {
          allowLineSeparatedGroups: false,
          caseSensitive: true,
          functionOrder: "higher",
          includeComments: "leading",
          minKeys: 2,
          natural: true,
          order: "asc",
        },
      ],
      "sort-properties/sort-type-literal": "warn",
    },
  },
];

Options

All four rules shares most of the options below: