.NET MAUI – Develop with Visual Studio Code

Update: Completed sample of this article is now available in GitHub, can be accessed from .NET MAUI Samples

In the previous post, described how we can set up a Dev environment for playing with .NET MAUI and steps to create a new project from the template provided and then went on to build and run using .NET CLI.

And in this post, am going to detail how we can achieve build, run, attach the debugger and add breakpoints within Visual Studio Code. Will continue with the same TestApp project that we created earlier.

The steps narrated in this post requires 2 extensions installed to VS Code and an optional one to enhance the experience:

1. C#
2. Mono Debug
3. Intellicode (Optional)

Launch VS Code, from the File menu, select Open Folder … option and select the TestApp folder where project artifacts are available. Optionally, this can be saved as a workspace to take advantage of the other VS Code features.

In VS Code, Build and Run action is to be configured as Tasks and it can be invoked with menu options or shortcuts (even it can be chained to execute in an order).

To define such a Task, complete the steps as described below:

From the Terminal menu, select Run Build Task … option (or) press Ctrl+Shift+B to open the Command Palette with this Task in context.

Since no such task definition is available, this will offer an option to create a new Task from the template, choose the options to proceed.

Now a list of available Task Templates will be presented, select the .NET Core template as we’re going to run the same dotnet command from within VS Code.

Now tasks.json file is created from the .NET Core default template and it will be placed in the .vscode directory in the project root folder (TestApp in this sample).

Since Build and Run requires a different set of parameters, we’ve to define separate task definitions for each one of them. Before explaining them in detail, once again will take a look at the commands used in the CLI process (here project (TestApp.csproj) and configuration (Debug) is assumed to default values from the execution context).

For Build: dotnet build -f:net6.0-android

For Run: dotnet build -f:net6.0-android -t:Run

So in total, we’ve to pass 5 parameters for the Build task

1. build (static option)
2. Project to build (Project file)
3. Configuration to use (Debug / Release)
4. Target framework (net6.0-android / net6.0-ios / net6.0-maccatalyst)
5. Action (Build / Rebuild / Clean)

And 7 parameters for the Run task (the First 4 from the above list and the other 4 from the below list).

Have mentioned it for Android, iOS folks can refer to the MSBuild command to pass appropriate values for defining the iOS task as the parameters with prefix -p: are actually MSBuild properties.

1. -t:Run (static option)
2. -p:AndroidAttachDebugger (Attach the debugger or not)
3. -p:AndroidSdbHostPort=10000 (static value – port # to listen)

Since it is getting automated, we can model it in such a way that the value for the dynamic parameters would be passed during invocation using VS Code variable substitution option for better reuse. Have given links below to get more insights on them.

Variable Substitution in Tasks and Input Variables

With this the actual task Build and Run Task definition would look like the one as shown below (${input.<name>} is a runtime value, where <name> refers to the id that is getting substituted):

The next step is to create a Launch task, from the Run menu, choose Add Configuration … option and select C# Mono as the environment option in the next step, this will create a launch.json file in the same .vscode directory.

Launch.json file would look like this:

In the above default definition, we require only the lower Attach section with an additional preLaunchTask attribute so as to chain the Run task as a prerequisite to this debugger attach request, update the port # as 10000 to match the value in the Run task, and then delete the top Launch section.

In the end, this should look like this:

Now we’re ready to build and run the project from within VS Code:

Press Ctrl+Shift+B to invoke the Build task (will also work from the menu option).

In the Command window, select the Project, then Build action, followed by Target framework, and finally Configuration.

Build task output:

Now it’s time to see the output on the Emulator and most importantly, add breakpoints and debug the code:

Press F5 to invoke the Run task:

Similar to Build action, in the Command window, select the Project, then Target framework, followed by Configuration, and finally the option to Attach debugger.

Now open MainPage.xaml.cs in the editor and place a breakpoint in the button click event handler, post-launch of App in the emulator (with Attach debugger opted-in), when clicked on the button, breakpoint gets resolved and we can inspect the variables in the Watch window too. We’re debugging the preview bits of the MAUI application, cool isn’t it?

Emulator output:

Such a long post, will try to keep it short in the upcoming ones. In the next post, will look into the details of the SDK-style Project file, the Application Flow.

Stay connected as we continue to learn and share the experiences from this exciting journey of being a software developer.