getting-started.mdx

title	Getting Started
description	Get started with our ESLint Plugin Perfectionist by following this comprehensive guide. Learn how to install, configure, and use our tool to maintain a consistent and high-quality codebase
keywords	eslint introduction eslint plugin coding standards code quality javascript linting code consistency plugin features installation guide configuration guide

import CodeTabs from '../../components/CodeTabs.svelte' import dedent from 'dedent'

Getting Started

Before you start, take a moment to support the project by giving us a star on GitHub.

Your support helps the continued development and improvement of this project.

Installation

Let's get started. You'll need to install ESLint v8.45.0 or greater:

<CodeTabs code={[ { source: 'npm install --save-dev eslint', name: 'npm', value: 'npm', }, { source: 'pnpm add --save-dev eslint', name: 'pnpm', value: 'pnpm', }, { source: 'yarn add --dev eslint', name: 'yarn', value: 'yarn', }, { source: 'bun install --dev eslint', name: 'bun', value: 'bun', }, ]} type="package-manager" client:load lang="bash" />

Next, install eslint-plugin-perfectionist:

<CodeTabs code={[ { source: 'npm install --save-dev eslint-plugin-perfectionist', name: 'npm', value: 'npm', }, { source: 'pnpm add --save-dev eslint-plugin-perfectionist', name: 'pnpm', value: 'pnpm', }, { source: 'yarn add --dev eslint-plugin-perfectionist', name: 'yarn', value: 'yarn', }, { source: 'bun install --dev eslint-plugin-perfectionist', name: 'bun', value: 'bun', }, ]} type="package-manager" client:load lang="bash" />

Usage

Add perfectionist to the plugins section of your ESLint configuration. Then configure the rules you want to use under the rules section.

<CodeTabs code={[ { source: dedent` // eslint.config.js import perfectionist from 'eslint-plugin-perfectionist'

    export default [
      {
        plugins: {
          perfectionist,
        },
        rules: {
          'perfectionist/sort-imports': 'error',
        },
      },
    ]
  `,
  name: 'Flat Config',
  value: 'flat',
},
{
  source: dedent`
    // .eslintrc.js
    module.exports = {
      plugins: [
        'perfectionist',
      ],
      rules: {
        'perfectionist/sort-imports': 'error',
      },
    }
  `,
  name: 'Legacy Config',
  value: 'legacy',
},

]} type="config-type" client:load lang="tsx" />

Settings

Many rules have common settings. You can set them in the settings field.

The highest priority is given to the settings of a particular rule. Next comes the settings field, and then the default values.

In settings, you can set the following options:

• type — The type of sorting. Possible values are 'alphabetical', 'natural', 'line-length' and custom.
• order — The order of sorting. Possible values are 'asc' and 'desc'.
• fallbackSort — The fallback sorting type and order to use when two elements are equal.
• alphabet — The custom alphabet to use when type is custom.
• ignoreCase — Ignore case when sorting.
• ignorePattern — Ignore sorting for elements that match the pattern.
• specialCharacters — Control whether special characters should be kept, trimmed or removed before sorting. Values can be 'keep', 'trim' or 'remove'.
• locales - The locales of sorting. Values can be a string with a BCP 47 language tag, or an array of such strings. See String.prototype.localeCompare() - locales.
• partitionByComment — Partition the sorted elements by comments. Values can be true, false or regexp pattern.
• partitionByNewLine — Partition the sorted elements by new lines. Values can be true or false.

Example:

<CodeTabs code={[ { source: dedent` // eslint.config.js import perfectionist from 'eslint-plugin-perfectionist'

    export default [
      {
        plugins: {
          perfectionist,
        },
        rules: {
          'perfectionist/sort-objects': ['error', {
            type: 'alphabetical',
          }],
          'perfectionist/sort-interfaces': ['error'],
        },
        settings: {
          perfectionist: {
            type: 'line-length',
            partitionByComment: true,
          },
        },
      },
    ]
  `,
  name: 'Flat Config',
  value: 'flat',
},
{
  source: dedent`
    // .eslintrc.js
    module.exports = {
      plugins: [
        'perfectionist',
      ],
      rules: {
        'perfectionist/sort-objects': ['error', {
          type: 'alphabetical',
        }],
        'perfectionist/sort-interfaces': ['error'],
      },
      settings: {
        perfectionist: {
          type: 'line-length',
          partitionByComment: true,
        },
      },
    }
  `,
  name: 'Legacy Config',
  value: 'legacy',
},

]} type="config-type" client:load lang="tsx" />