eslint-plugin-perfectionist weekly downloads statistics

ESLint Plugin Perfectionist

<img src="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/logo.svg" alt="ESLint Plugin Perfectionist logo" align="right" height="160" />

An ESLint plugin that sets rules to format your code and make it consistent.

This plugin defines rules for sorting various data, such as objects, imports, TypeScript types, enums, JSX props, Svelte attributes, etc. alphabetically, naturally, or by line length.

All rules are automatically fixable. It's safe!

Why

Sorting imports and properties in software development offers numerous benefits:

• Readability: Finding declarations in a sorted, large list is a little faster. Remember that you read the code much more often than you write it.

• Maintainability: Sorting imports and properties is considered a good practice in software development, contributing to code quality and consistency across the codebase.

• Code Review and Collaboration: If you set rules that say you can only do things one way, no one will have to spend time thinking about how to do it.

• Code Uniformity: When all code looks exactly the same, it is very hard to see who wrote it, which makes achieving the lofty goal of collective code ownership easier.

• Aesthetics: This not only provides functional benefits, but also gives the code an aesthetic appeal, visually pleasing and harmonious structure. Take your code to a beauty salon!

Documentation

See docs.

Try it on your own code in the Playground.

Alphabetical Sorting

<picture> <source srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-light.webp" media="(prefers-color-scheme: light)" /> <source srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-dark.webp" media="(prefers-color-scheme: dark)" /> <img src="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-alphabetical-light.webp" alt="ESLint Plugin Perfectionist alphabetical usage example" /> </picture>

Sorting by Line Length

<picture> <source srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-light.webp" media="(prefers-color-scheme: light)" /> <source srcset="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-dark.webp" media="(prefers-color-scheme: dark)" /> <img src="https://raw.githubusercontent.com/azat-io/eslint-plugin-perfectionist/main/docs/public/examples/example-line-length-light.webp" alt="ESLint Plugin Perfectionist line length usage example" /> </picture>

Installation

You'll first need to install ESLint v8.45.0 or greater:

npm install --save-dev eslint

Next, install eslint-plugin-perfectionist:

npm install --save-dev eslint-plugin-perfectionist

Usage

Add eslint-plugin-perfectionist to the plugins section of the ESLint configuration file and define the list of rules you will use.

Flat Config (eslint.config.js)

import perfectionist from 'eslint-plugin-perfectionist'

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

Legacy Config (.eslintrc.js)

<!-- prettier-ignore -->

module.exports = {
  plugins: [
    'perfectionist',
  ],
  rules: {
    'perfectionist/sort-imports': [
      'error',
      {
        type: 'natural',
        order: 'asc',
      }
    ]
  }
}

Configs

The easiest way to use eslint-plugin-perfectionist is to use ready-made configs. Config files use all the rules of the current plugin, but you can override them.

Flat Config (eslint.config.js)

<!-- prettier-ignore -->

import perfectionist from 'eslint-plugin-perfectionist'

export default [
  perfectionist.configs['recommended-natural'],
]

Legacy Config (.eslintrc.js)

<!-- prettier-ignore -->

module.exports = {
  extends: [
    'plugin:perfectionist/recommended-natural-legacy',
  ],
}

List of Configs…