How to remove all the unsed imports from a React Js project? (VSCode)

Question

How do i remove un-used imports from all my files in Visual Studio Code, my warning console looks like this

I have tried useing shift+alt+o but that only removes imports from the current file

Pachston

You haven't tried going through it manually and fixing each issue? – Kynthia

Similar question:- #46723201 – Atoll

@AmanGupta Like i said shift+alt+o only removes the unused imports from the Current file – Pachston

@Kynthia it is really not feasable when you have like 20 different files, a lot of time is wasted over a period of time – Pachston

Even going through 100 files and pressing shift-alt-o is unlikely to take more than 5 minutes, and you only need to do it once ... not sure what the problem is ... ? – Towardly

Answer 1

There is an eslint plugin for that. It works fine with me.

It's called eslint-plugin-unused-imports.

In the file for eslint configuration:

"plugins": ["unused-imports"],
"rules": {
    "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "error",
    "unused-imports/no-unused-vars": [
        "warn",
        { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
    ]
}

Then, on your vscode config:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

I hope it helps. 😁

Rieth