How can I remove unused imports/declarations from the entire project of React Typescript?

Question

I'm trying to remove unused imports and declarations as answered in this SO thread for Angular. I'm trying to achieve the goal using eslint-plugin-react, but not found any option to remove the unused imports and daclarations from the entire project, with a single command.

Here is my .eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "unused-imports"
    ],
    "rules": {
        "indent": [
            "warn",
            "tab"
        ],
        "linebreak-style": [
            "warn",
            "windows"
        ],
        "quotes": [
            "warn",
            "double"
        ],
        "semi": [
            "warn",
            "always"
        ],
        "@typescript-eslint/no-unused-vars": "on",
        "unused-imports/no-unused-imports-ts": "on"
    }
}

Or is there a way to do the same using ESLint or Typescript Hero extensions in VS Code?

Solution 1

Using unused-imports plugin and unused-imports/no-unused-imports-ts rule, eslint --fix will remove the imports.

Here is an example repo which --fix removes the unused imports.

https://github.com/moshfeu/eslint-ts-unused-imports

Old answer

eslint has a built-in fix option.

eslint ... --fix

If rules contains no-unused-vars, eslint will "fix" the unused import by removing them (along with other auto fixes).

Solution 2

You can also use shortcuts in VSCode, if needs to be done quick and without extra effort:

Option + Shift + O for Mac

Alt + Shift + O for Windows

Solution 3

TL;DR

Use unused-imports/no-unused-imports instead of no-unused-vars, as rule name.

---

If you're using the ESLint version, eslint-plugin-unused-imports, you may want to change the rule name to unused-imports/no-unused-imports instead of the blanket no-unused-vars.

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

Refer to the author's GitHub for detailed usage.

For me, no-unused-var does not come with an auto fixer (it'll merely mentioned then number of errors/warnings but when I switch to unused-imports/no-unused-imports, all of the issues are automagically fixed.