ESLintで不要なimport文を自動で削除したい

背景

ESLintで不要なimport文は検知されますが、--fixで自動で削除してもらえないです。

自動で削除するプラグインがあるのか調べてみます。

eslint-plugin-unused-imports

「未使用のimportを検索して削除する」と書かれています。

eslint-plugin-unused-importsの導入方法

eslintをinstallしているものとします

eslint-plugin-unused-importsのinstall

npm install eslint-plugin-unused-imports --save-dev

eslintrcの修正

.eslintrc

{
	"plugins": [~, "unused-imports"]
}

.eslintrc

{
    "rules": {
        "unused-imports/no-unused-imports": "error",
    },
}

eslint-plugin-unused-importsを実際に使ってみる

func.ts

export const func = () => {}

これを--fixで消えるか確認します。

確認したら消えていました！

問題点

問題点としては'func' is defined but never usedが重複しています。

そこで今回は"unused-imports/no-unused-vars":"off"にしました。

.eslintrc

rules: {
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars":"off",

公式documentではno-unused-varsをoffにして、unused-imports/no-unused-varsをonにしています。
こちらは未使用の変数定義を自動で削除してくれるそうです！

.eslintrc

{
    "rules": {
        "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
            "warn",
            {
                "vars": "all",
                "varsIgnorePattern": "^_",
                "args": "after-used",
                "argsIgnorePattern": "^_",
            },
        ],
    },
}

参考

• eslint発火時に不要なimportを削除する
• ESLintで不使用のimport自動削除
• eslint の設定で import をきれいにする
• よく導入する eslint ルールについてまとめてみる

最後に

便利なプラグインを生かして少しずつ開発生産性を高めたいです