reactjstypescriptvisual-studio-codeeslint

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?


Solution

  • 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

    Setup

    yarn add -D eslint-plugin-unused-imports
    
    // eslint.config.js
    
    import tseslint from "typescript-eslint";
    import unusedImports from "eslint-plugin-unused-imports";
    
    export default tseslint.config(
      {
        plugins: {
          "unused-imports": unusedImports,
        },
        rules: {
          "unused-imports/no-unused-imports": "warn",
        },
      }
    );
    

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