JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1300
  • Score
    100M100P100Q110661F
  • License MIT

ESLint rules for sorting properties of object expressions, object destructings, and type literals interfaces for TypeScript by their keys.

Package Exports

  • eslint-plugin-sort-properties
  • eslint-plugin-sort-properties/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-sort-properties) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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, it is designed to be auto-fixable but way faster by fixing misorder of properties at once. It is up to 50x faster to fix, 3x to parse.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.

Demo GIF

Table of Contents

Rules

⚠️ Configurations set to warn in.
🌐 Set in the all configuration.
🌏 Set in the flat/all 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. Used in eslint<=8
🌏 flat/all Apply all rules in the sort-properties plugin. Used 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:

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