How To Setup Intellisense in VSCode for React.js

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.

No Intellisense

Before – No Intellisense

Dead Ends

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:

VSCode Lightbulb

VSCode 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

Create JSConfig.json

Create JSConfig.json

Click “Create jsconfig.json” and vscode should do the rest.

Step 2 – Install Typings

The Typescript Definition Manager typings should be installed globally with

> npm install typings --global

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 init
> typings install dt~react --global

You should end up with a new “typings” folder with the following contents:

│   index.d.ts
│
└───globals
    └───react
            index.d.ts
            typings.json

Step 4 – Install typescript

You can install typescript globally, but I prefer to put it in each project with the following command

Npm install typescript@next

Which vscode detects automatically, so there’s nothing else to it.

Step 5 – Confirm it Works

Now you should be able to see some intellisense for react.js.

VSCode With Intellisense

VSCode With Intellisense

Conclusion

While attempting to get this working I found some what appears to be old and obsolete advice.

  • I haven’t created a CODE_TSJS or VSCODE_TSJS environment variable
  • There are also a couple places mentioning ‘tsd’, but that has been superseded by typings.
  • I don’t have (Salsa) in the bottom right of the IDE. In a different setup I had the version number of typescript, but that doesn’t appear to be essential.

In all honestly, I don’t really know what I’m doing, but it appears to work. Hopefully it will work for you too, but please let me know if it doesn’t in a comment below or on twitter.

6 thoughts on “How To Setup Intellisense in VSCode for React.js

  1. Peter says:

    there should be typings install dt~react –global

  2. Debbie says:

    Thank you! It worked like a charm!

  3. Gonzalo says:

    Works, after install typescript and restart visual studio code. Thanks..

  4. Dan says:

    Hey!

    This worked for me. Thank you!

    I spent a full day trying to get intellisense working with react, working with eslint, working with vscode beautify, working with blah blah blah! I never had any intention of learning about typescript or typings or tsd.whatever lol! I guess thats how it goes in this line of work.

    Have you made any ground on this front? Is this still your way of setting things up? I wonder if it is really necessary to install typescript? I’m still trying to wrap my head around eslint config. Any insight?

    Thanks for the very helpful post.

    • DuFeu DuFeu says:

      I’m glad it helped.

      From what I’ve read, support is much easier in the newer versions of VSCode. I think it comes with a version of TypeScript installed and it gets picked up automatically.

      Sorry, I haven’t kept up with ESLint.

Leave a Reply

Your email address will not be published. Required fields are marked *