大規模リファクタリングしてて、ファイルのいたる所で以下のような状況になった
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との違い
結論としては上記のものを設定するだけで終わり
公式で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まとめてくれるのめちゃくちゃ気持ちいい！
これめんどいから便利な設定ないかなーって思ったら大抵あるよね
サボろうとする心大事