DEV Community

Azat S.
Azat S.

Posted on

ESLint plugin for sorting objects, imports, types, enums, JSX props, etc.

Image description

Do you appreciate it when your code has a neat and organized appearance?
I certainly do!

A well-structured and standardized codebase not only improves readability but also enhances collaboration among team members. To achieve this, developers often rely on various tools and best practices. One such tool that can significantly boost your code quality is the ESLint Plugin Perfectionist.

ESLint Plugin Perfectionist

This ESLint plugin sorts imports, objects, TypeScript interfaces and types, JSX props and other stuff.

There are three types of sorting in the plugin: alphabetical sorting, natural sorting and sorting by line length.

All the rules of the plugin are fixable. This means that after installation you don't need to fix anything manually, just run the eslint command with the --fix flag

This is safe, the code will not break. The plugin takes into account comments, JSDoc, spreads in objects, etc.

How to start using it?

First of all, you need to install ESLint itself on the project:

npm install --save-dev eslint

Enter fullscreen mode Exit fullscreen mode

Next, install the plugin:

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

Enter fullscreen mode Exit fullscreen mode

The easiest way to start using the plugin is to import one of the three ready-made configs into your .eslintrc config. For example, the config with alphabetical sorting:

{
  "extends": [
    "plugin:perfectionist/recommended-alphabetical"
  ]
}

Enter fullscreen mode Exit fullscreen mode

After installation, the linter may show many errors in the code. However, this is not a problem because all of the plugin's rules can be fixed. This means that you do not need to fix anything manually. Just run eslint with the -fix flag, and the plugin will fix everything automatically.

Try it:

https://github.com/azat-io/eslint-plugin-perfectionist

Top comments (0)