0
0

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

Last updated at Posted at 2024-05-06

背景

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

image.png

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

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 = () => {}

image.png

これを--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",

image.png

公式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": "^_",
            },
        ],
    },
}

参考

最後に

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0