VSCode auto import React built-in hooks like useState, useEffect

Question

In VSCode, how can I get auto import suggestions for React built-in hooks, like useState, useEffect, etc?

Just like what we get in CodeSandbox:

Enabled extensions (maybe there is some conflict between them, though I'm not getting any errors):

Bathilda

I've been using this extension for that. marketplace.visualstudio.com/items?itemName=steoates.autoimport – Mulct

when i define one of each hooks, other hooks can add but when was not hook imported not work. – Certain

Not sure what I did to fix it. But maybe I didn't have "@types/react" and "@types/react-dom" installed back then. You should install those. – Bathilda

I use a mix of JS and TS and I found marketplace.visualstudio.com/…. I can confirm it works with JSX useState. – Wallflower

Answer 1

So, one thing you can do is try updating your local settings file:

inside your project directory:

<project>/.vscode/settings.json

{
  // other vscode settings specific to this project...
  "typescript.suggest.autoImports": true, // or
  "javascript.suggest.autoImports": true
}

Midkiff

Answer 2

Sometimes, extensions interfere with the functionality. With me, Vetur(Vue extension) was interfering with the React auto imports. I had to disable, and restart the VS Code. Now I can auto import from React. I enabled the Vetur again and restarted VS Code. Both Vue and React is working fine.

In the end, check if you are able to see the issue with some extension.

Klepht