在 Visual Studio 代码中反应智能感知

Question

我确定我遗漏了一些简单的东西，但我根本无法让 React.js IntelliSense 在 Visual Studio 代码中工作。

我做了以下事情：

npm install typings
ext install Typings Installer Visual Studio 代码
ext install Typings Visual Studio 代码
typings init在我的"app"
typings install --ambient react-global 在我的 "app"
重启Visual Studio代码

这样就创建了一个 typings 文件夹。我的应用程序采用以下文件夹结构：

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

然而，当我在 test.js 并键入 React. 时，我没有得到 IntelliSense。

我想我错过了一些基本的东西？

编辑：感谢您的帮助，它实际上再次参与其中。我认为我有它的工作并在这里写下我的步骤http://mattdufeu.co.uk/setup-intellisense-vscode-react-js/

Answer 1

您需要将 jsconfig.json 添加到工作空间的根目录中

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

[注意：您甚至可以将 jsconfig.json 文件留空]

Answer 2

如果其他人在 2016 年 3 月或 4 月遇到此问题，您可能还希望在 github 中查看此问题是否已关闭：

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

本质上，使用import React, { Component } from 'react' ES6 风格的模块导入导致Salsa 的Intellisense 无法工作，解决方法是使用require:
var React = require('react'); var { Component } = React;

Answer 3

现在不再推荐打字（以及与此相关的 tsd）。我发现针对我的情况的一行答案只是使用命令

包含来自 npm 的类型定义

npm i @types/react --save-dev

intellisense 立即在 Visual Studio 代码中为我获取了新定义，但对于其他人，您可能需要重新启动 VSCode window.

我不确定它是否相关，但我的应用程序是使用 create-react-app 使用最新版本创建的。

Answer 4

如果您将一个空的 jsconfig.json 文件添加到您的 React 项目中，它将导致构建过程崩溃。只需用

之类的东西填充它

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

Answer 5

终于开始工作了，转到定义，所有工作都与 react jsx 一起工作。您需要 jsconfig.json，看起来像这样（注意您需要 "jsx": "react" 属性，并指定尾随 'index.jsx'别名，如果使用隐式 class-as-folder-name 范例）：

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

然后这样导入就可以了：

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

Answer 6

我需要做的就是按 Ctrl+space.

参考

How to trigger IntelliSense in Visual Studio Code

在 Visual Studio 代码中反应智能感知

React intellisense in Visual Studio Code

intellisense

reactjs

visual-studio-code

参考