sort-interfaces

💼 This rule is enabled in the following configs: recommended-alphabetical, recommended-line-length, recommended-natural.

🔧 This rule is automatically fixable by the --fix CLI option.

📖 Rule Details

Enforce sorted TypeScript interface properties.

Sorting interface properties provides a clear and predictable structure to the codebase, making it easier for developers to locate the various properties defined within an interface. It helps maintain consistency and allows for efficient maintenance and collaboration among team members.

It's safe. If you document interface properties line by line, property comments will also be sorted.

Important

If you use the adjacent-overload-signatures rule from the @typescript-eslint/eslint-plugin plugin, it is highly recommended to disable it to avoid conflicts.

💡 Examples

Alphabetical and Natural Sorting

// ❌ Incorrect
interface ButtonProps {
  variant?: 'solid' | 'outline' | 'text'
  full?: boolean
  disabled?: ComponentProps<'button'>['disabled']
  type?: 'submit' | 'button'
  color: 'main' | 'info' | 'success' | 'warning' | 'error'
  onClick?: () => void
  children?: string | number
  icon?: FC<SVGProps<SVGSVGElement>>
  className?: string
  size: 's' | 'm' | 'l'
}

// ✅ Correct
interface ButtonProps {
  children?: string | number
  className?: string
  color: 'main' | 'info' | 'success' | 'warning' | 'error'
  disabled?: ComponentProps<'button'>['disabled']
  full?: boolean
  icon?: FC<SVGProps<SVGSVGElement>>
  onClick?: () => void
  size: 's' | 'm' | 'l'
  type?: 'submit' | 'button'
  variant?: 'solid' | 'outline' | 'text'
}

Sorting by Line Length

// ❌ Incorrect
interface ButtonProps {
  variant?: 'solid' | 'outline' | 'text'
  full?: boolean
  disabled?: ComponentProps<'button'>['disabled']
  type?: 'submit' | 'button'
  color: 'main' | 'info' | 'success' | 'warning' | 'error'
  onClick?: () => void
  children?: string | number
  icon?: FC<SVGProps<SVGSVGElement>>
  className?: string
  size: 's' | 'm' | 'l'
}

// ✅ Correct
interface ButtonProps {
  color: 'main' | 'info' | 'success' | 'warning' | 'error'
  disabled?: ComponentProps<'button'>['disabled']
  variant?: 'solid' | 'outline' | 'text'
  icon?: FC<SVGProps<SVGSVGElement>>
  children?: string | number
  type?: 'submit' | 'button'
  size: 's' | 'm' | 'l'
  onClick?: () => void
  className?: string
  full?: boolean
}

🔧 Options

This rule accepts an options object with the following properties:

type CustomGroup = string
type Group = 'multiline' | CustomGroup

interface Options {
  type?: 'alphabetical' | 'natural' | 'line-length'
  'optionality-order'?: 'ignore' | 'optional-first' | 'required-first'
  order?: 'asc' | 'desc'
  'ignore-case'?: boolean
  groups?: (Group | Group[])[]
  'custom-groups'?: { [key: Group]: string[] | string }
  'ignore-pattern'?: string[]
  'partition-by-new-line'?: boolean
}

type

_{(default: 'alphabetical')}

• alphabetical - sort alphabetically.
• natural - sort in natural order.
• line-length - sort by code line length.

optionality-order

_{(default: 'ignore')}

• optional-first - put all optional members first.
• required-first - put all required members first.

order

_{(default: 'asc')}

• asc - enforce properties to be in ascending order.
• desc - enforce properties to be in descending order.

ignore-case

_{(default: false)}

Only affects alphabetical and natural sorting. When true the rule ignores the case-sensitivity of the order.

groups

_{(default: [])}

You can set up a list of interface groups for sorting. Groups can be combined. There are predefined group: 'multiline'.

custom-groups

_{(default: {})}

You can define your own groups for object keys. The minimatch library is used for pattern matching.

Example:

{
  "custom-groups": {
    "top": "id"
  }
}

ignore-pattern

_{(default: [])}

If you need to ignore a rule for some interfaces, you can specify their names or a pattern to ignore, for example: 'Component*' to ignore all interfaces whose names begin with the word Component.

The minimatch library is used for pattern matching.

partition-by-new-line

_{(default: false)}

When true, does not sort the interface's element if there is an empty string between them.

⚙️ Usage

Legacy Config

// .eslintrc
{
  "plugins": ["perfectionist"],
  "rules": {
    "perfectionist/sort-interfaces": [
      "error",
      {
        "type": "natural",
        "order": "asc"
      }
    ]
  }
}

Flat Config

// eslint.config.js
import perfectionist from 'eslint-plugin-perfectionist'

export default [
  {
    plugins: {
      perfectionist,
    },
    rules: {
      'perfectionist/sort-interfaces': [
        'error',
        {
          type: 'natural',
          order: 'asc',
        },
      ],
    },
  },
]

🚀 Version

This rule was introduced in v0.1.0.

📚 Resources

• Rule source
• Test source