React intellisense in Visual Studio Code

user_2169215 0
Viewed 61968

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?

visual-studio-code reactjs intellisense javascript
6 Answers

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

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';
user_3667160
user_92133450
Related