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

问题

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?

回答1:

eslint has a built-in fix option.

eslint ... --fix

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

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

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

回答2:

I use ts-prune for that, npx ts-prune will show you all unused exports in a project. However it doesn't do it automatically.

来源：https://stackoverflow.com/questions/64365300/how-can-i-remove-unused-imports-declarations-from-the-entire-project-of-react-ty