ESLintでimport文を自動で並べ替える

Typescriptでコードを書く際にimport文が増えるとnpmライブラリのimportだったりローカルライブラリのimportだったりがゴチャ混ぜになって分かりづらくなる。

そこでimport文を自動で並べ替えてくれるeslint-plugin-simple-import-sortプラグインを導入した。

yarn add -D eslint-plugin-simple-import-sort

.eslintrc.js に以下を追加。

module.exports = {
  plugins: ['simple-import-sort'],
  rules: {
    'simple-import-sort/imports': 'error'
  },
  // ...
}

これで例えば以下のようなimport文があった際にnpmライブラリと独自ライブラリの間に1行開けて並べ替えてくれるようになる。

// before
import React from 'react'
import { logout } from '@/client/firebaseHelpers'
import useSWR from 'swr'

// after
import React from 'react'
import useSWR from 'swr'

import { logout } from '@/client/firebaseHelpers'

また、以下の設定を追加しておくと

module.exports = {
  rules: {
    'sort-imports': ['error', { ignoreDeclarationSort: true }]
  },
  // ...
}

importで複数読み込む際にアルファベット順に並べ替えてくれるようになる。

// before
import { User, Profile } from '@prisma/client'

// after
import { Profile, User } from '@prisma/client'

これでimport文の可読性が改善できた。

参考

• Sort imports with ESLint | remarkablemark