如何在VS Code中运行依赖ReactJS的.NET Framework 4.5项目

• C# Dev Kit：微软官方C#开发工具集，兼容.NET Framework与.NET Core/.NET全版本项目
• NuGet Package Manager：用来管理.NET项目的NuGet依赖包
• JavaScript and TypeScript Nightly：官方JS/TS语法支持，适配ReactJS代码高亮与校验
• ESLint：前端代码规范校验工具，适配React项目代码检查
• Debugger for Chrome/Edge：用于调试React前端代码
• .NET Framework Targeting Pack Installer：辅助VS Code识别.NET Framework 4.5目标开发包

前置依赖安装（VS Code外环境） #

• 安装.NET Framework 4.5 Developer Pack：必须安装开发版本而非运行时版本，才能提供编译所需的目标框架组件
• 安装.NET 6 LTS SDK或更高LTS版本：C# Dev Kit依赖.NET SDK基础组件，安装后重启电脑让系统PATH生效，即可解决Failed to spawn 'dotnet --info'和找不到.NET Core SDK的报错
• 安装Node.js 16+ LTS：提供ReactJS所需的前端运行环境，自带npm包管理工具
• 安装Visual Studio Build Tools 2022：安装时勾选「.NET桌面开发」工作负载，确保MSBuild编译工具可用
• 安装NuGet CLI并添加到系统PATH：用于还原.NET项目的NuGet依赖包

项目配置 #

1. 打开项目根目录，确认所有扩展已启用
2. 新建.vscode文件夹，在文件夹内新建settings.json，添加如下配置，指定MSBuild路径并抑制无效警告：

{
  "msbuild.useDotnetHost": false,
  // 路径替换为你本地MSBuild的实际安装路径
  "msbuild.path": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2022\\BuildTools\\MSBuild\\Current\\Bin\\MSBuild.exe",
  "csharp.suppressDotnetInstallWarning": true,
  // 如有解决方案文件可添加下方配置
  "dotnet.defaultSolution": "abc.sln"
}

3. 还原项目依赖：
   • 打开终端执行nuget restore abc.csproj还原.NET后端依赖
   • 进入React代码根目录（通常为ClientApp或wwwroot/react文件夹），执行npm install安装前端依赖
4. 新建.vscode/launch.json配置调试项：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Framework 启动",
      "type": "clr",
      "request": "launch",
      // 路径替换为你项目编译后的exe输出路径
      "program": "${workspaceFolder}/bin/Debug/abc.exe",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "env": {
        "ASPNET_ENVIRONMENT": "Development"
      }
    },
    {
      "name": "React 启动",
      "type": "chrome",
      "request": "launch",
      // 端口替换为你React开发服务实际启动端口
      "url": "http://localhost:3000",
      // 路径替换为你React代码的根目录
      "webRoot": "${workspaceFolder}/ClientApp"
    }
  ]
}

5. 新建.vscode/tasks.json配置编译与启动任务：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "编译.NET项目",
      "command": "msbuild",
      "args": [
        "abc.csproj",
        "/property:Configuration=Debug",
        "/property:Platform=AnyCPU"
      ],
      "group": "build",
      "problemMatcher": "$msCompile"
    },
    {
      "label": "启动React开发服务",
      "type": "npm",
      "script": "start",
      // 路径替换为你React代码的根目录
      "options": {
        "cwd": "${workspaceFolder}/ClientApp"
      },
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    }
  ]
}

运行项目 #

1. 执行「编译.NET项目」任务完成后端代码编译
2. 执行「启动React开发服务」任务启动前端开发服务
3. 分别启动.NET Framework 启动和React 启动两个调试配置，即可同时调试前后端代码

内容的提问来源于stack exchange，提问作者HiteshAgashe