Home

Awesome

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" width="160" />

Version Monthly Download Code Coverage GitHub License

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:

Documentation

See docs.

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:

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)

<!-- prettier-ignore -->
module.exports = {
  extends: [
    'plugin:perfectionist/recommended-natural-legacy',
  ],
}

List of Configs

NameDescription
recommended-alphabeticalAll plugin rules with alphabetical sorting in ascending order
recommended-naturalAll plugin rules with natural sorting in ascending order
recommended-line-lengthAll plugin rules with sorting by line length in descending order

Rules

<!-- begin auto-generated rules list -->

🔧 Automatically fixable by the --fix CLI option.

NameDescription🔧
sort-array-includesEnforce sorted arrays before include method🔧
sort-astro-attributesEnforce sorted Astro attributes🔧
sort-classesEnforce sorted classes🔧
sort-enumsEnforce sorted TypeScript enums🔧
sort-exportsEnforce sorted exports🔧
sort-importsEnforce sorted imports🔧
sort-interfacesEnforce sorted interface properties🔧
sort-intersection-typesEnforce sorted intersection types🔧
sort-jsx-propsEnforce sorted JSX props🔧
sort-mapsEnforce sorted Map elements🔧
sort-named-exportsEnforce sorted named exports🔧
sort-named-importsEnforce sorted named imports🔧
sort-object-typesEnforce sorted object types🔧
sort-objectsEnforce sorted objects🔧
sort-setsEnforce sorted Set elements🔧
sort-svelte-attributesEnforce sorted Svelte attributes🔧
sort-switch-caseEnforce sorted switch case statements🔧
sort-union-typesEnforce sorted union types🔧
sort-variable-declarationsEnforce sorted variable declarations🔧
sort-vue-attributesEnforce sorted Vue attributes🔧
<!-- end auto-generated rules list -->

FAQ

Can I automatically fix problems in the editor?

Yes. To do this, you need to enable autofix in ESLint when you save the file in your editor. Instructions for your editor can be found here.

Is it safety?

On the whole, yes. We are very careful to make sure that the work of the plugin does not negatively affect the work of the code. For example, the plugin takes into account spread operators in JSX and objects, comments to the code. Safety is our priority. If you encounter any problem, you can create an issue.

Why not Prettier?

I love Prettier. However, this is not his area of responsibility. Prettier is used for formatting, and ESLint is also used for styling. For example, changing the order of imports can affect how the code works (console.log calls, fetch, style loading). Prettier should not change the AST. There is a cool article about this: "The Blurry Line Between Formatting and Style" by @joshuakgoldberg.

Versioning Policy

This plugin is following Semantic Versioning and ESLint's Semantic Versioning Policy.

Contributing

See Contributing Guide.

License

MIT © Azat S.