在 Visual Studio Code 中反应智能感知

Posted 2023-03-15

【中文标题】在 Visual Studio Code 中反应智能感知

【英文标题】：React intellisense in Visual Studio Code

【发布时间】：2016-06-27 07:09:31

【问题描述】：

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

我做了以下事情：

npm install typings ext install Typings Installer 在 Visual Studio 代码中 ext install Typings 在 Visual Studio 代码中 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. 时，我没有得到 IntelliSense。

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

编辑：感谢您的帮助，实际上它再次涉及更多。我认为我已经成功了，并在这里写了我的步骤http://mattdufeu.co.uk/setup-intellisense-vscode-react-js/

【问题讨论】：

对不起，我不知道这是什么原因.. 幸运的是 React 核心有 4 个功能 :) 大多数项目最多只使用两个或三个。

检查控制台（Help > Toggle Developer Tools）——Visual Studio Code 经常崩溃，javascript 引擎可能已经崩溃。我不建议使用 VSCode 进行 Javascript 编辑，至少在解决错误之前的几个月内。

你看到右下角的莎莎酱了吗？如果它有一个感叹号 - 表示不支持最新版本的萨尔萨，请确保将最新版本的打字稿安装为 typescript@next

@AndyRay 在开发者工具中什么都没有。

@gabdallah 我什至不认为莎莎是一种选择。谢谢

【参考方案1】：

我认为您需要将 jsconfig.json 添加到工作区的根目录

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

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

我遇到了与 Angular 相同的问题，这为我解决了。

希望这会有所帮助！

【讨论】：

这确实起到了作用，不太确定这是我所期待的，但它确实有帮助。我会打勾，因为它似乎有最大的不同

是否也可以为反应生命周期方法获得智能感知？

2019：刚刚为我解决了同样的问题。我一直在使用yarn build，但如果这与它有任何关系，请使用 IDK。谁能解释一下为什么这行得通？

【参考方案2】：

现在不再推荐使用类型（以及就此而言 tsd）。我发现我的情况的单行答案就是在命令中包含来自 npm 的类型定义

npm i @types/react --save-dev

intellisense 立即在 Visual Studio Code 中为我获取了新定义，但对于其他人，您可能需要重新启动 VSCode 窗口。

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

【讨论】：

这实际上在 VsCode 中有效。我在 text/babel 块内进行测试，但无法完成这项工作。但是回到 .js 文件，您的回答帮助我获得了 React 和 ReactDOM 成员的 Intellisens。谢谢！

我不确定这是做什么的，但是这个真的对我有用！

2021，我遇到了麻烦，这个解决方法对我来说非常有效

【参考方案3】：

如果其他人在 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;

【参考方案4】：

如果你将一个空的 jsconfig.json 文件添加到你的 react 项目中，它会导致构建过程崩溃。 只需用类似的东西填充它

  "compilerOptions": 
    "target": "es6"
  

【讨论】：

也可以加"exclude": ["node_modules"]

【参考方案5】：

终于得到了这个工作，去定义和所有的反应jsx工作。 您需要 jsconfig.json，看起来像这样（注意您需要“jsx”：“react”属性，并在别名中指定尾随 'index.jsx'，如果使用隐式类 - 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';

希望对你有帮助！

【讨论】：

"compilerOptions": "target": "es6", "jsx": "react" 为我工作！