.NET/Angular 프로젝트용 VS 코드 구성

I'm in the process of transitioning to VS Code from Visual Studio, and the launch configurations are pretty flexible. Here's how to set up a full stack application with a .NET API and an Angular frontend.

요약하면, 우리는 .NET API와 Angular 프런트엔드를 개별적으로 빌드/실행하기 위한 구성을 생성한 다음 복합 구성으로 작업 공간을 생성하여 둘 다 실행하려고 합니다. 이렇게 하면 한 번의 F5 클릭으로 전체 스택 애플리케이션을 빌드/실행할 수 있습니다.

launch.json(.NET API)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Launch",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net5.0/example-api.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  ]
}

VS Code에서 .NET을 디버깅하려면 Microsoft's C# Extension이 필요하므로 아직 설치하지 않은 경우 설치하십시오. 우리의 launch.json은 실행할 프로그램, 환경 변수 및 사전 실행 작업만 지정합니다.

작업.json(.NET API)

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/example-api.csproj",
        "/property:GenerateFullPaths=true",
        "/consoleloggerparameters:NoSummary"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

tasks.json 파일은 .NET 빌드 인수만 지정하고 problemMatcher는 모든 빌드 문제를 식별하기 위해 VS Code가 빌드 출력에서 ​​찾을 내용을 정의합니다.

launch.json(앵귤러 프런트엔드)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Node Launch",
      "command": "npm run start",
      "request": "launch",
      "type": "node-terminal",
      "serverReadyAction":{
        "action": "startDebugging",
        "name": "Chrome Client",
        "pattern":"listening on (.*)localhost:([0-9]+)"
      }
    },
    {
      "name": "Chrome Client",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/*"
      }
    }
  ]
}

이것은 조금 더 복잡합니다. Node 애플리케이션을 시작하는 Node Launch 구성이 있고 여기에서 serverReadyAction 도 정의합니다. 여기에는 VS Code가 출력에서 ​​일치시키려고 시도하는 정규식 패턴이 포함되며 일단 일치하면 지정된 작업을 수행하며 이 경우 Chrome Client 작업을 실행합니다.
Chrome Client 작업은 일부 주소에서 Chrome 인스턴스를 시작하기 위한 기본 구성일 뿐입니다.

example.code-workspace(VS 코드 작업 공간)

{
  "folders": [
    {
      "path": "."
    },
    {
      "path": "../example-api"
    }
  ],
  "settings": {},
  "launch": {
    "version": "0.2.0",
    "compounds": [
      {
        "name": "Launch Workspace",
        "configurations": [".NET Launch", "Node Launch"]
      }
    ]
  }
}

여기에서 VS Code 작업 공간을 만들고 여기에 프로젝트를 추가할 수 있습니다. 이렇게 하면 Workspace 구성 내에서 개별 프로젝트 구성에 액세스할 수 있으므로 단일 구성으로 전체 "솔루션"을 실행하는 방법을 정의할 수 있습니다.