Visual Studio Code中的React智能感知

Question

我确定我错过了一些简单的东西，但是我无法让React.js IntelliSense在Visual Studio Code中工作。

我已经完成以下步骤：

• npm install typings
• 在Visual Studio Code中安装 Typings Installer 扩展
• 在Visual Studio Code中安装Typings扩展
• 在我的“应用程序”的根目录下运行typings init
• 在我的“应用程序”的根目录下运行typings install --ambient react-global
• 重新启动Visual Studio Code

这将创建一个typings文件夹。我的应用程序结构如下：

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

然而，当我在test.js中输入React.时，我没有获得智能提示。

我认为我可能缺少一些基本的东西？

编辑：感谢您的帮助，实际上它又变得更加复杂了。我认为我已经解决了问题，并在这里记录了我的步骤https://mattdufeu.co.uk/blog/setup-intellisense-vscode-react-js/

- MattDuFeu

---

抱歉，我不知道这个问题的原因...幸运的是，React核心只有大约4个函数 :) 大多数项目最多只使用两个或三个。 - azium

检查控制台（帮助>切换开发人员工具）- Visual Studio Code经常崩溃，Javascript引擎可能已经崩溃。我不建议在几个月内使用VSCode进行Javascript编辑，直到错误得到修复。 - Andy Ray

你在右下角看到了Salsa吗？如果它有一个感叹号 - 这意味着最新版本的Salsa不受支持，请确保安装了最新版本的TypeScript，即typescript@next。 - user5004821

@AndyRay 开发者工具中没有任何内容。 - MattDuFeu

@gabdallah 我甚至没有看到莎莎酱作为一个选项。谢谢。 - MattDuFeu

链接到 http://mattdufeu.co.uk/setup-intellisense-vscode-react-js/ 的网页似乎已经失效。 - Henke

Answer 1

你需要在工作区的根目录下添加jsconfig.json。

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

[注意：您甚至可以将 jsconfig.json 文件保持为空白]

- Umamaheswaran

---

这肯定做了些事情，不太确定这是否是我期望的，但它确实有所帮助。我会把这个打钩，因为似乎它产生了最大的差异。 - MattDuFeu

能否为React的生命周期方法获得Intellisense（智能感知）功能？ - Qwerty

2019年：刚刚为我解决了同样的问题。我一直在使用yarn build，但我不知道这是否有任何关系。有人能解释一下为什么这个方法有效吗？ - JoePC

Answer 2

现在 typings（包括 tsd）已不再推荐使用。我发现解决我的问题只需要在命令行中安装 npm 的类型定义：

npm i @types/react --save-dev

在 Visual Studio Code 中，智能感知功能立即使用了新的类型定义，也许其他人需要重新启动 VSCode 窗口。

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

- Brandon Culley

---

这在 VsCode 中实际上是有效的。我当时在一个 text/babel 块内进行测试，但是无法使其正常工作。但是转回到 .js 文件，你的答案帮助我获取了 React 和 ReactDOM 成员的 Intellisens。谢谢！ - Tore Aurstad

Answer 3

如果在2016年3月或4月遇到这个问题，你可能也希望检查一下github上的这个问题是否已经关闭：https://github.com/Microsoft/vscode-react-native/issues/61 本质上，使用`import React, { Component } from 'react'`这种ES6风格的模块导入会导致Salsa的智能感应无法工作，解决方法是使用require：
`var React = require('react'); var { Component } = React;`

- Ahmad Ragab

Answer 4

如果你在React项目中添加一个空的jsconfig.json文件，它将会导致构建过程崩溃。只需填充一些内容即可，例如：

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

- Hojat Jafari

---

也许还可以添加 "exclude": ["node_modules"] - Bersan

Answer 5

我只需要按下Ctrl+space即可。

参考资料

• 如何在Visual Studio Code中触发IntelliSense

- Henke

---

不太确定，但我认为我把 "editor.quickSuggestions" 设置为 false，这就解释了为什么我必须要按 Ctrl + space。 无论如何，目前我已将其改为 true。 - Henke

Answer 6

最终让这个工作起来了，包括使用react jsx的定义跳转等。 你需要一个jsconfig.json文件，它应该长这样（注意你需要 "jsx": "react" 属性，并在别名中指定尾随的 'index.jsx'，如果使用隐式的类作为文件夹名称范例）：

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

- Ryan Weiss

---

{ "compilerOptions": { "target": "es6", "jsx": "react" } } 对我来说可行！ - Enrique Briones Arcos

Answer 7

我刚刚重新安装了ES7+ React扩展，关闭了vs code并使用cmd在vscode中打开了项目，突然智能感知开始工作了，希望这样可以解决问题。

- AMAL MURALI

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community