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

Answer 1

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"
  }
}

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;

Answer 4

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';

Hope it helps!

Answer 5

I think 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]

I had the same issue with angular this resolved it for me.

Hope this helps!!