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?

Mosh Feu · Accepted Answer · 2021-01-21T12:14:01.717

71

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

edited Jan 21 '21 at 12:14

answered Oct 21 '20 at 12:23

Mosh Feu

28,354
16
88
135

2

Okay, can you please add a little about the right configuration of eslint? – DevLoverUmar Oct 22 '20 at 03:34
2

Sorry, it wasn't clear. I've updated my answer. Let me know if it's more clear now. – Mosh Feu Oct 26 '20 at 13:32
Glad to head :) If it answers your question, please accept it so it will help to other people. Thanks. – Mosh Feu Oct 26 '20 at 15:38
27

The `no-unused-vars` rule actually does not have an auto fixer available. Imports will not be removed by default. – Tiamo Idzenga Dec 23 '20 at 11:05
@MoshFeu - Your answer says `no-unused-vars` but your example repo uses `unused-imports/no-unused-imports-ts` (which works with --fix) – charles-allen Jan 15 '21 at 04:46
Just a heads-up in case if you're using eslint `--fix`, there is bug now which will remove the first comment after the unused import, which is a bit painful if you're trying to fix issues in a big project. See [issue](https://github.com/sweepline/eslint-plugin-unused-imports/issues/28) – Vimal Maheedharan Jul 04 '21 at 14:40

Vadym · Answer 2 · 2023-05-01T20:16:24.260

33

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

Option + Shift + O for Mac

Alt + Shift + O for Windows

edited May 01 '23 at 20:16

answered Nov 03 '21 at 16:10

Vadym

857
7
14

10

Exactly what i was looking for. Any way to apply it to all files at once? – Anestis Kivranoglou Jun 29 '22 at 15:33
@AnestisKivranoglou I couldn't find the way, but you can use npm packages that are offered for this case – Vadym Aug 24 '22 at 16:30
1

Anyone else tried this with `0` instead of `o`? – Zolbayar Jul 18 '23 at 05:12

score 26 · Answer 3 · answered Jul 11 '21 at 16:47

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.

score 17 · Answer 4 · answered Oct 17 '22 at 23:10

Add this to your VS Code settings.json:

"editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
   "source.fixAll": true,
   "source.organizeImports": true,
   "source.sortMembers": true
 }

Everytime you save a file it'll automatically remove the unused imports. It's a good method of house keeping for future edits but won't help existing unused imports, unless you go to those files directly.

Solution originally posted by Damir Drempetić here: https://dev.to/bornfightcompany/easily-sort-imports-and-remove-unused-declarations-on-each-save-in-vs-code-35k1

This is actually a lot better thanks @DanEngoMan – Oussama Boumaad Jul 29 '23 at 01:07 — Oussama Boumaad, Jul 29 '23 at 01:07

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

4 Answers4

Old answer

TL;DR

Linked