React intellisense in Visual Studio Code

问题

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 http://mattdufeu.co.uk/setup-intellisense-vscode-react-js/

回答1:

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!!

回答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.

回答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;

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

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

Hope it helps!

来源：https://stackoverflow.com/questions/35950385/react-intellisense-in-visual-studio-code

标签

reactjs

intellisense

visual-studio-code