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?

EDIT: Thanks for your help, it's actually more involved again. I think I have it working and wrote about my steps here https://mattdufeu.co.uk/blog/setup-intellisense-vscode-react-js/

Girdler

Sorry I don't know the cause of this.. luckily React core has like 4 functions :) and most projects only use two or three at most. – Peppard

Check the console (Help > Toggle Developer Tools) - Visual Studio Code crashes pretty frequently, the Javascript engine might have crashed. I wouldn't suggest using VSCode for Javascript editing, at least for a few months until the bugs are ironed out. – Flunk

do you see salsa at the bottom right? if it has an exclamation point - it means the most recent version of salsa isn't being supported, make sure to install the most recent release of typescript as typescript@next – Longish

@AndyRay nothing in the developer tools. – Girdler

@gabdallah I didn't even see salsa as an option. Thank you – Girdler

The link to mattdufeu.co.uk/setup-intellisense-vscode-react-js appears to be broken. – Fitzgerald

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]

Woodwind

This certainly did something, not quite sure it was what I was expecting, but it did help. I'll tick this as it seemed to make the biggest difference – Girdler

Is it possible to get intellisense for react lifecycle methods as well? – Itinerancy

2019: Just solved same issue for me. I've been using yarn build, but IDK if that has anything to do with it. Can anyone explain why this works? – Kirven

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.

Keitel

This actually worked in VsCode. I was testing inside a text/babel block though and could not make this work. But moving back to a .js file, your answer helped me get Intellisens of React and ReactDOM members. Thanks! – Josephinejosephson

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;

Mentality

Answer 4

If you add an empty jsconfig.json file to your react project it will crash the build process. just fill it with something like

{
  "compilerOptions": {
    "target": "es6"
  }
}

Iced

maybe also add "exclude": ["node_modules"] – Pneumonic

Answer 5

Finally got this working, with go to definition and all working with react jsx. You need jsconfig.json, looking like this (note you need the "jsx": "react" property, and to specify the trailing 'index.jsx' in the aliases, if using the implicit class-as-folder-name paradigm):

{ 
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": { 
            "shared/*":       ["./components/shared/*/index.jsx"],
            "components/*":   ["./components/*/index.jsx"],
            "stores/*":       ["./lib/stores/*"],
            "services/*":     ["./lib/services/*"],
            "utils/*":        ["./lib/utils/*"]
        },
        "module": "commonjs",
        "target": "es6",
        "moduleResolution": "classic",
        "jsx": "react"
    }
}

Then imports like this all work:

import UserApi from 'services/api/UserApi';
import EditArea from 'components/views/Blog/EditArea';
import EditableLabel from 'shared/EditableLabel';

Acanthaceous

{ "compilerOptions": { "target": "es6", "jsx": "react" } } works for me! – Plead

Answer 6

All I needed to do was to hit Ctrl+space.

Reference

• How to trigger IntelliSense in Visual Studio Code

Gesso

Not quite sure, but I think I had "editor.quickSuggestions" set to false, which would explain why I had to hit Ctrl + space. Anyways, I have changed it to true for the time being. – Fitzgerald

Answer 7

I just reinstalled ES7+ React extension and closed vs code and opened the project in vscode using the cmd and suddenly the intellisence start working i hope this will work

Hampson

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Methodism