VSCode removing React from imports on save

user_2582459 0
Viewed 1349

after switching to vscode 1.68.1

every time on saving the file its automatically removing the React from the import at first i though this could be an eslint issue as i am using eslint for formatting but after removing eslint plugin issue remains the same

here is my settings.json

{
    "eslint.alwaysShowStatus": true,
    "editor.formatOnSave": true,
    "files.eol": "\r\n",
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.organizeImports": true
    },
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "prettier.arrowParens": "avoid",
    "prettier.embeddedLanguageFormatting": "off",
    "prettier.enable": false,
    "eslint.format.enable": false,
   
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    }
}

and here is the .eslintrc

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react", "react-hooks"
    ],
    "rules": {
        "linebreak-style": ["error", "windows"],
        "react/forbid-prop-types": 0,
        "react/prop-types": 0,
        "max-len": ["error", { "code": 220 }]
    },
    "settings": {
        "import/resolver": {
          "node": {
            "moduleDirectory": ["node_modules", "src/"]
          }
        }
      }
};
vscode-extensions eslint visual-studio-code
4 Answers

Try adding these rules in eslintrc:

{
  "rules": {
    "react/jsx-uses-react": 0,
    "react/react-in-jsx-scope": 0
  }
}

OR

Try adding "jsx": "react" to your jsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "*": ["*", "src/*"]
    }
  }
}

This helps VS-Code understand that React is implicitly referenced by the jsx elements in your file.

I had the same problem in multiple projects, after adding these rules, solves the problem for me.

user_81087700 
{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "on",
    "react/react-in-jsx-scope": "on"
  }
}

Add these rules to your eslint config

user_663840

I also had the same problem, when removing the extensions I found it was vscode, downgrading to version 1.67.2 solved it

user_193997470

Try removing the "source.organizeImports": true line from your settings, or setting it to false.

I think VS Code thinks the React import is unnecessary because its only used implicitly (which can be a problem if your compiler requires an explicit import to bundle correctly).

user_26420190
Related