Since I’ve started developing applications on a .Net/Angular stack, I’ve been using Visual Studio 2019’s project template for .Net Web Apps with Angular. While it certainly makes things easy to get started, it definitely has its drawbacks. The most prominent one being the sheer weight of VS 2019, whereas VS Code feels much snappier. After being recommended by several colleagues to switch to VS Code, I’ve finally started moving over.

Extensions

I would suggest the following extensions as a bare minimum for .NET/Angular stack development:

• C# for Visual Studio Code — Intellisense, debugging and general development stuff for C#.

• Debugger for Chrome — Handle interactive debugging in Chrome. Alternatively, you can also get debuggers for FireFox or Edge.

• Angular Snippets (Angular 11) — Snippets to create Angular stuff from templates, like components and services.

• Angular Language Service — "Intellisense" but for Angular.

• EditorConfig for VSCode — Enforces your EditorConfig styles.

Debugging

After installing the C# extension by Omnisharp you should get an alert asking you for permission to create the necessary files to run the program. This will generate two files, launch.json and tasks.json, both contained within the .vscode folder for the project.

launch.json

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": ".NET Core Server",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceFolder}/api/bin/Debug/net5.0/api.dll",
        "args": [],
        "cwd": "${workspaceFolder}/api",
        "stopAtEntry": false,
        "env": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        },
      },
      {
        "name": ".NET Core Attach",
        "type": "coreclr",
        "request": "attach",
        "processId": "${command:pickProcess}"
      },
      {
        "name": "Node Server",
        "command": "npm start",
        "request": "launch",
        "type": "node-terminal",
      },
      {
        "name": "Chrome Client",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "https://localhost:5001",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}",
        "sourceMapPathOverrides": {
          "webpack:///./*": "${workspaceRoot}/*"
        }
      },
    ],
    "compounds": [
      {
        "name": "Server/Client",
        "configurations": [".NET Core Server", "Node Server", "Chrome Client"]
      }
    ]
  }