I've recently moved this blog from WordPress to Gatsby. So far, I'm very happy with the move, but I missed a couple of the things WordPress gave me out of the box. One of those things were the various widgets you can add to the sidebar.
I’ve been getting back into React.js development and was missing the rich developer experience visual studio gives you with things like intellisense.
I thought I had something working as Ctrl+Space opened intellisense with a sensible suggestion, but this turned out to be the IDE using what I’d typed earlier to make an educated guess. Clever, but I was hoping for more.
Unfortunately I couldn’t find a simple “how to” guide and the stuff I did get from various github issues and stackoverflow didn’t really help.
After several dead ends and lots of hair pulling I eventually got intellisense working using these steps.
How To Setup Intellisense in VSCode for React.js
Step 1 – Create a jsconfig.json file
With a project folder open, look in the bottom right and you should see a lightbulb:
Click the lightbulb, and you should get a popup at the top of the IDE asking if you want to create a jsconfig.json file
Click “Create jsconfig.json” and vscode should do the rest.
Step 2 – Install Typings
The Typescript Definition Manager typings should be installed globally with
This will allow you to install typescript definition files which is what we’ll do next.
Step 3 – Install React Typescript Definitions
In the folder of the project enter the following commands:
> typings install dt~react --global
You should end up with a new “typings” folder with the following contents: