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:

1npm install eslint --save-dev

Next, install eslint-plugin-sort-properties:

1npm 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.

1module.exports = {
2  // ...
3  overrides: [
4    {
5      files: ["**/*.{ts,tsx}"],
6      parser: "@typescript-eslint/parser",
7    },
8  ],
9};

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

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

or you can enable specific rules:

1module.exports = {
2  plugins: ["sort-properties"],
3  rules: {
4    "sort-properties/sort-interface": "warn",
5    "sort-properties/sort-object-destructing": "warn",
6    "sort-properties/sort-object-expression": [
7      "warn",
8      // See the options section below for more information
9      {
10        allowLineSeparatedGroups: false,
11        caseSensitive: true,
12        functionOrder: "higher",
13        includeComments: "leading",
14        minKeys: 2,
15        natural: true,
16        order: "asc",
17      },
18    ],
19    "sort-properties/sort-type-literal": "warn",
20  },
21};

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.

1const tseslint = require("typescript-eslint");
2
3// Use utility function for typescript-eslint
4module.exports = tseslint.config(
5  { ... }
6);
7
8// Or manually specify the parser
9module.exports = [
10  {
11    files: ["**/*.{ts,tsx}"],
12    languageOptions: {
13      parser: tseslint.parser,
14    },
15  },
16];

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

1const sortPropertiesPlugin = require("eslint-plugin-sort-properties");
2
3module.exports = [
4  // ...
5  sortPropertiesPlugin.configs["flat/all"],
6];

or you can enable specific rules:

1module.exports = [
2  // ...
3  {
4    plugins: {
5      "sort-properties": require("eslint-plugin-sort-properties"),
6    },
7    rules: {
8      "sort-properties/sort-interface": "warn",
9      "sort-properties/sort-object-destructing": "warn",
10      "sort-properties/sort-object-expression": [
11        "warn",
12        // See the options section below for more information
13        {
14          allowLineSeparatedGroups: false,
15          caseSensitive: true,
16          functionOrder: "higher",
17          includeComments: "leading",
18          minKeys: 2,
19          natural: true,
20          order: "asc",
21        },
22      ],
23      "sort-properties/sort-type-literal": "warn",
24    },
25  },
26];

Options

All four rules shares most of the options below:

Name	Description	Type	Choices	Default
allowLineSeparatedGroups	If true, properties are separated independently by line breaks. Works same as eslint sort-keys rule.	Boolean		true
caseSensitive	Whether the comparison is case sensitive.	Boolean		true
functionOrder	The priority of properties which values are either method or arrow function. For example, if order is 'asc' and functionOrder is 'higher', function properties will be placed at the end. this option is not available for sort-object-destructing rule.		higher, lower, equal	higher
includeComments	Position of comments to consider as part of the property.		leading, trailing	leading
minKeys	Minimum number of keys to check order.	Integer		2
natural	Whether the comparison is using a natural order. See natural-compare	Boolean		true
order	The order of properties.	String	asc, desc	asc