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

user_7344164 0
Viewed 59682

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?

eslint visual-studio-code typescript reactjs
3 Answers

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).

user_8631100

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

user_147015090

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.

user_35132730
Related