React intellisense in Visual Studio Code

Question

I'm sure I'm missing something simple, but I simply can't get React.js IntelliSense to work in Visual Studio code.

I have done the following:

• npm install typings
• ext install Typings Installer in Visual Studio Code
• ext install Typings in Visual Studio Code
• typings init in the root directory of my "app"
• typings install --ambient react-global in the root of my "app"
• restarted Visual Studio Code

That's created a typings folder. My app is structured in the following folder structure:

├───public
│   ├───css
│   └───scripts
|       └───test.js
└───typings
    ├───browser
    │   └───ambient
    │       └───react-global
    └───main
        └───ambient
            └───react-global

Yet when I'm in test.js and type React. I get no IntelliSense.

I presume I'm missing something fundamental?

Answer 1

You need to add jsconfig.json to the root of your workspace

https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

[Note: you can even leave the jsconfig.json file empty]

Answer 2

Now that typings (and for that matter tsd) are both no longer recommended. I found the one line answer for my situation was just to include type definitions from npm with the command

npm i @types/react --save-dev

intellisense picked up the new definitions for me immediately in Visual Studio Code, but perhaps for someone else you may need to restart your VSCode window.

I'm not sure if it's relevant but my app was created with create-react-app with the latest version.

Answer 3

If anyone else encounters this question in March or April 2016, you might also wish to check this issue in github to see if it has been closed:

https://github.com/Microsoft/vscode-react-native/issues/61

Essentially, using import React, { Component } from 'react' ES6-style module import causes Salsa's Intellisense not to work, the workaround is to use require:
var React = require('react'); var { Component } = React;