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": [
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        "ecmaVersion": 12
    "plugins": [
    "rules": {
        "indent": [
        "linebreak-style": [
        "quotes": [
        "semi": [
        "@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?


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.

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

Answered By – Mosh Feu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More