Sorting your imports with ESLint

Sorting your imports with ESLint - DEV Community

找的千辛万苦的一篇文档,一定要看

On files that use a lot of resources, imports can become a mess. Enforcing styles and patterns can be helpful, however, doing that manually doesn't seem to be the best use of time.

Fortunately, nowadays there are some amazing tools out there that can help us keep our imports organized automatically.

For this article, we will be using eslint-plugin-simple-import-sort. This is an ESLint plugin that enables not only sorting with some nice defaults but also grouping based on defined patterns.

The target

Let's take for the following code:

// an import using an alias path
import { Header, Card } from 'components';
// an import from a package that we want to always see first
import React, { useState } from 'react';
// an ui package
import { Button } from 'ui-package';
// a relative import that is in the same folder
import { parseTableData } from './utils';
// a relative import that is up in the tree
import { generatePath } from '../../domain';

The organization we would like to enforce is:

  • The "react" import should always come first
  • Package imports should come next, sorted by alphabetical order
  • The named imports should be sorted in alphabetical order
  • It should skip a line before relative imports that are in other folders
  • It should skip a line before the imports that are in the current folder

Set up

To set up the plugin, first, it's needed to have ESLint integrated into your project.

The first step is installing the plugin:

yarn install eslint-plugin-simple-import-sort

Then, in your ESLint config file (.eslintrc.json) add the plugin in the "plugins" list.

# eslintrc.json

{
  "plugins": ["react", "simple-import-sort"], 
  "rules": {
    // increase the severity of rules so they are auto-fixable
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  }
}

This should be enough to sort the paths and the named exports alphabetically.

One step further

Now, going one step further. It's also possible to set custom groupings, so it skips lines before sets of imports.

In the ESLint config file, add the following override:

{
  "overrides": [
    // override "simple-import-sort" config
    {
      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
      "rules": {
        "simple-import-sort/imports": [
          "error",
          {
            "groups": [
              // Packages `react` related packages come first.
              ["^react", "^@?\\w"],
              // Internal packages.
              ["^(@|components)(/.*|$)"],
              // Side effect imports.
              ["^\\u0000"],
              // Parent imports. Put `..` last.
              ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
              // Other relative imports. Put same-folder imports and `.` last.
              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
              // Style imports.
              ["^.+\\.?(css)$"]
            ]
          }
        ]
      }
    }
  ]
}

Finish line

And you're all set! The sorting should happen automatically when ESLint is run in the auto-fix mode.

Here's the code after sorted:

import React, { useState } from 'react';
import { Card, Header } from 'components';
import { Button } from 'ui-package';

import { generatePath } from '../../domain';

import { parseTableData } from './utils';

Let's keep in touch! Any feedback is appreciated.
You can also find me on Twitter.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值