Orchestrating Visual Studio Code : Part 2 : Tasks and Launchers

10th May 2018

As developers, we are always leveraging various tools to help automate our day-to-day tasks. VS Code provides a built-in way of organizing all of these various workflows with Tasks. You can easily fire of a task without trying to remember what command to type, all while staying within the IDE. Combined with debug launchers, tasks can supercharge your environment and help you automate any process.

We are going to create a simple solution with a web-api project and then create some basic tasks to help us build and debug the application.

Setting Up the Environment

To get started, let’s create a basic web-api solution from the command line:

dotnet new sln --name WebApp

Next, let's create a webapi application in the /src folder.

mkdir src
cd src
dotnet new webapi

Go ahead and open your project in VSCode. The IDE should ask you if you'd like to add default folders. Say Yes and you should see a folder structure similar to the following:

│   WebApp.sln
│
├───.vscode
│       launch.json
│       tasks.json
│
└───src
    │   appsettings.json
    │   appsettings.development.json
    │   Program.cs
    │   Startup.cs
    │   WebApp.csproj
    │
    └───Controllers
            ValuesController.cs

source

Tasks and Launchers

As stated earlier, Tasks allow you to easily call commands and scripts from within the IDE. They can be used to automate any process that you may need; builds with gulp, building docker containers, pushing code to NuGet, etc. Launchers are used to launch your application with a debugger attached.

Both are defined in the .vscode folder in the root of your project:

├── .vscode
    ├── launch.json
    ├── tasks.json

If VSCode doesn't prompt you to automatically create the .vscode folder, you can always add it yourself.

Creating a Task

We'll start by creating a task to build our project.

{
    "version": "2.0.0",
    "tasks": [{
        "label": "build",
        "command": "dotnet",
        "type": "process",
        "args": [
            "build",
            "${workspaceFolder}/src/WebApp.csproj"
        ],
        "problemMatcher": "$msCompile"
    }]
}

tasks.json

To run your task, press F1 and then select Tasks:Run Task. Your task should be in the list the the label build. You'll see the solution being built in the VSCode output panel.

Creating a Debug Launcher

Debug Launchers are just that - a way to execute a process with the VSCode debugger attached. The preLaunchTask property tells the launcher to call our build task before launching the application.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Local Launch",
        "args": [],
        "cwd": "${workspaceFolder}/src",
        "env": {
            "ASPNETCORE_ENVIRONMENT": "development",
            "ASPNETCORE_URLS": "http://+:5000"
        },
        "internalConsoleOptions": "openOnSessionStart",
        "launchBrowser": {
            "args": "http://localhost:5000",
            "enabled": true,
            "linux": {
                "command": "xdg-open"
            },
            "osx": {
                "command": "open"
            },
            "windows": {
                "args": "/C start http://localhost:5000/api/values",
                "command": "cmd.exe"
            }
        },
        "preLaunchTask": "build",
        "program": "${workspaceFolder}/src/bin/Debug/netcoreapp2.0/WebApp.dll",
        "request": "launch",
        "sourceFileMap": {
            "/src": "${workspaceFolder}/src"
        },
        "stopAtEntry": false,
        "type": "coreclr"
    }]
}

launch.json

Launching Your Project

The launchBrowser section tells VSCode to open the page http://localhost:5000/api/values once the application is running. Go ahead and press F5 or the debug icon to launch your application.

You should see a webpage with the following response (default for webapi scaffold):

["value1","value2"]

Project Settings

Visual Studio Code support project-level settings via the file settings.json in the .vscode folder.

{
    "files.eol": "\n"
}

settings.json

Project Extensions

Visual Studio Code supports project-level extensions via the file extensions.json in the .vscode folder. When your project is first opened by a new developer, the IDE will prompt to install the extensions.

{
    "recommendations": [
        "editorconfig.editorconfig",
        "ms-vscode.csharp",
        "robertohuertasm.vscode-icons"
    ]
}

extensions.json

EditorConfig (editorconfig.editorconfig)

EditorConfig is used to maintain consistent formatting across developers in a project. http://editorconfig.org

OmniSharp C# (ms-vscode.csharp)

OniSharp is required to provide support for C#. It performs code anylsis with the Roslyn compiler and loads assemblies and projects. http://www.omnisharp.net

VSCode Icons (robertohuertasm.vscode-icons)

VSCode icons extend the built-in icons and provide an enhanced user experience.

Conclusion

At this point, we have learned how to configure the built-in project extension points in Visual Studio Code. By leveraging tasks, launchers, settings, and extensions, we are able to customize our project across development teams and provide functionality without leaving the IDE.

Source Code

https://github.com/christophla/blog-orchestrating-vscode/tree/part-2-tasks-and-launchers

Next Post : Debugging Docker Containers

In the next post we will learn how to leverage tasks and launchers to orchestrate building and debugging our application.

Let's start debugging!

Previous Post : Overview

https://christophertown.com/orchestrating-visual-studio-code-overview

Tags