Visual Studio 2015 中没有 React 智能感知

问题描述 投票:0回答:2

我没有看到任何 ReactJS 的智能感知,例如像 React.createClass 这样的方法,尽管我在根文件夹中看到 _references.js 文件。 _references.js 文件包含对各种 React js 文件的帮助引用。

我的react文件的扩展名是JS而不是JSX。

visual-studio intellisense
2个回答
10
投票

我通过导入 NuGet 包“react.js”并将脚本引入本地解决了这个问题。

我还在我的项目中添加了

_references.js
~/Scripts/。 Visual Studio 在“添加...”下有一个名为“_references.js intellisense file”的帮助程序,如下所示:

/// <autosync enabled="true" />
/// <reference path="bootstrap.js" />
/// <reference path="jquery-2.1.4.js" />
/// <reference path="react/jsxtransformer-0.13.1.js" />
/// <reference path="react/react-0.13.1.js" />
/// <reference path="react/react-with-addons-0.13.1.js" />

之后,我就可以在 jsx 文件中使用智能感知了。 _references.js 文件似乎不喜欢从 Facebook 的 CDN 运行。


0
投票

要修复 Visual Studio 中有关在 Visual Studio 2015 中使用 React 的问题,请按照以下步骤操作

要解决此问题,我们需要在项目解决方案中配置 TyScript、WebPack 和 IntelliSense

步骤:

  1. 进入项目根文件夹打开CMD并输入以下命令

  2. npm install -g webpack
    ”(用于全局安装 Web-Pack)

  3. npm install --save typescript
    ”(为应用程序安装打字稿)

  4. 在您的解决方案中创建一个名为“webpack.config.js”的js文件和一个名为“tsconfig.json”的打字稿配置文件

  5. 为 //---webpack.config.js 添加以下内容

     module.exports = {
     entry: "./Content/src/food.tsx",
     mode: "development",
     output: {
         filename: "bundle.js"
     }, 
     resolve: {
         extensions: [ '.ts', '.js', '.tsx', '.jsx']
     },
    
     devtool: 'source-map',
    
     // Add the loader for .ts files.
     module: {
         rules: [
           {
               test: /\.tsx?$/,
               loader: 'awesome-typescript-loader'
           }
         ]
     }
    

    };


  1. 为 //------------tsconfigs 添加以下内容 -(注意: 在以下 JS 的“include”参数中提及 ts 文件位置。如果 ts 文件已经放置/在“./Content/src/”中创建,则无需更改。)

     {
     "compilerOptions": {
         "target": "es6",
         "module": "commonjs",
         "moduleResolution": "node",
         "noResolve": false,
         "noImplicitAny": false,
         "removeComments": true,
         "sourceMap": true,
         "allowJs": false, 
         "jsx": "react"
     },
     "include": [ "./Content/src/**/*" ],
     "exclude": [
     "./plugins/**/*",
     "./typings/**/*",
     "./built/**/*",
     "node_modules",
     "wwwroot",
     "Scripts/*"    
    

    ]
    }

//完成此配置后,IntelliSense 将起作用,但为了使 React 工作,我们仍然需要 React 类型定义。要配置它,我们需要安装 React 并输入脚本。您必须在项目的根文件夹中编写以下命令。

  1. “tsc -v”(此命令将帮助您检查React的版本
  2. 如果版本高于2则运行以下命令 [

npm install --save React @types/react npm install --save react-dom @types/react-dom

npm install --save typescript awesome-typescript-loader source-map-loader 


//Run this to create package.json
npm init


]
  1. 如果您的 Intellisencse 无法正常工作,请在项目的根文件夹中再次尝试使用以下命令。 [

//如果 Intellisense 不起作用,请运行以下命令

 typings install dt~react dt~react-dom -–save

  npm install   
  npm link typescript  

  npm install --save typescript 

]

  1. 尝试构建您的解决方案并检查它是否成功或失败 - (如果失败,则排除您在 tsconfig.json 的“include”参数中给出的路径的 tsx 文件,并排除 tsconfig.json。在此之后,您的解决方案将构建成功,但仍然需要使用 webpack 构建您的 dsx 文件。并且您需要通过在 CMD 中输入“
    webpack
    ”命令从命令行执行 webpack。之后您的 typescript 文件也将被编译,您将能够毫无错误地使用 React。)
© www.soinside.com 2019 - 2024. All rights reserved.