同じディレクトリからのimportをまとめるeslintの設定

2021 6/18

2021年6月18日 2021年6月18日

大規模リファクタリングしてて、ファイルのいたる所で以下のような状況になった

import { Button } from '@/components/atoms'
import { Text } from '@/components/atoms'

同じ場所からのimportなんだからまとめて下記のようにしたい

import { Button, Text } from '@/components/atoms'

大規模リファクタリングしてるとこういうケースが至る所で出てくるから、全部手作業で修正するのがだるすぎる
勝手に修正してくれるlintないかなーと思ったらあったので設定したらめちゃくちゃ便利だったのでメモしておく

import/no-duplicates

ルート直下にある.eslintrc.jsonに以下の記述を追加するだけ

{
  "plugins": [
    "@typescript-eslint",
    "import"
  ],
  ...
  "rules": {
    ...
    "import/no-duplicates": "error",
  }
}

たったこれだけでセーブした時にauto fixしてくれるようになったし、eslintコマンドの–fixでも修正してくれるようになった
“error”としたのでCIでも検知して落ちてくれる

結論としては上記のものを設定するだけで終わり

公式でno-duplicate-importsなるものがあって、そっちを最初使おうとしたんだがこっちはerrorまでは出してくれるけれどもauto fixはしてくれなかった

あわせて読みたい

no-duplicate-imports - ESLint - Pluggable JavaScript Linter A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

大規模リファクタリングしてるとfixしなければならない箇所が膨大に出てくるのでできればauto fixして欲しい

ってことで今回は公式のno-duplicate-importsではなくimportプラグインの方のno-duplicatesを使うことにした

auto fixでimportまとめてくれるのめちゃくちゃ気持ちいい！

これめんどいから便利な設定ないかなーって思ったら大抵あるよね
サボろうとする心大事

よかったらシェアしてね！