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

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との違い

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

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

ESLint - Pluggable JavaScript linter
no-duplicate-imports - Rules
no-duplicate-imports - RulesA 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まとめてくれるのめちゃくちゃ気持ちいい!

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

この記事を書いた人

コメント

コメントする

目次
閉じる