Using Visual Studio Code for .NET MAUI Development

In August 2023, Microsoft made an official announcement regarding the retirement of Visual Studio for Mac, scheduled to take place by August 31, 2024 (in another 6 months), as stated in a blog post here.

In the same blog post, Visual Studio Code along with the C# Dev Kit is projected as a viable alternative for cross-platform .NET development. For further information on the C# Dev Kit, refer to this article.

And for .NET MAUI too, there’s an officially supported extension hosted on VS Marketplace. To know more about this, take a look at this article. C# Dev Kit is a dependency for this .NET MAUI extension.

License Requirement:

As depicted, similar to the C# Dev Kit extension, the .NET MAUI extension is also subject to the Visual Studio subscription license requirements, necessitating a valid license linked to the user’s sign-in account. Kindly note that a community license on a personal email account is also compatible.

Installation:

1. First download and install .NET SDK from here
   • .NET MAUI is supported on .NET 7 or later
   • Then verify the SDK version with the command: dotnet --version
2. Then install .NET MAUI Workload with the below command
   • dotnet workload install maui
   • On Linux, only the Android workload is supported:
   • dotnet workload install maui-android
   • Then verify the installation with the command: dotnet workload list
3. Then download and install Visual Studio Code
4. As it’s easier to install the .NET MAUI extension from within VS Code. So, launch VS Code and open the Extensions view from the sidebar (Shortcut: Ctrl+Shift+X)
5. In the Search bar at the top, type .net maui and press enter
6. From the search results, look for .NET MAUI and click on the Install action to proceed (Since I’ve already installed it, the screenshot does not show the Install action on this extension)
7. There’s also a guided wizard to complete the extension setup

Creating a New Project:

Screenshots are furnished to provide additional details.

To create a new project, open the Explorer view from the sidebar (Shortcut: Ctrl+Shift+E).

Then click on the Create .NET Project action button at the bottom.

This will list the installed Project templates for the user to select. Select the .NET MAUI App template for this walk-through.

For now, only the Project templates published by Microsoft are getting listed in the project types dropdown.

Upon selecting the template, the subsequent step will involve choosing a folder to host the project artifacts.

And then, provide a unique name for the project.

The user will be able to create a new .NET MAUI project in the selected folder. Afterward, the project will be listed in the Explorer view.

The newly introduced feature in VS Code is the Solution Explorer, which bears a striking resemblance to the one found in Visual Studio.

If the Solution Explorer is not visible, collapse the nodes, if they are open and then right-click on an empty area in the Explorer view. Then, ensure that the Solution Explorer is selected in the context menu.

Device Targets:

Expand the Solution Explorer node and choose the project node.

Then on the Status Bar at the bottom, look for the Curly Braces icon adjacent to the filetype. (If the status bar is hidden, make it visible from the View → Appearance sub-menu).

By clicking on the Curly Brace icon, the Debug Target popup will be displayed, as depicted in the screenshot below.

Click on the Startup Project link to choose the startup project within a multi-project solution.

Click on the Debug Target link to access the options for managing the target framework or the target device for deployment. The list of available options will vary depending on the OS platform and the device(s) connected at that time. Both the device and its corresponding framework are displayed in the list.

Once the target device has been chosen, press F5 or select Start Debugging from the Run menu. An option to choose the debugger will appear, displaying the list of available debuggers. Proceed to select .NET MAUI.

Debugging:

To debug a C# file, open the file in the editor and place breakpoints at appropriate locations by clicking on the left side of line #, quite like Visual Studio.

Then Start the debugging session with the same steps as described above. Once the session is active, Variables, Watch, and Call Stack all come alive. To add a variable to the Watch panel, select Add to Watch from the context menu.

Gaps:

• Third-party project templates are not getting listed
• Multi-file item template, such as XAML and its code-behind, is not yet supported
  • In the meantime, utilize CLI templates from the Terminal
• Support for IntelliSense in XAML files is currently unavailable. However, it is expected to be available soon, as iterated in the monthly standups

All-in-One Templates Pack:

This comes with so many features that elevate the overall user experience when working with .NET MAUI. To delve into a detailed exploration of these features, please consult this article.

To install:

dotnet new install VijayAnand.MauiTemplates

Refer to this article, particularly for working with item templates within VS Code.

The .NET MAUI App project created using this All-in-One template pack is equipped with a VS Code workspace file bearing the same name as the project file. This file mentions the essential extensions such as C#, .NET MAUI, and IntelliCode. Open the workspace file in VS Code to optimize your workflow.

dotnet new mauiapp -o MyApp

code MyApp.code-workspace

Review and Support:

If you find these templates and extensions useful, kindly support the work by adding your review to the VS Marketplace and also by adding a Star to the GitHub repository where it’s hosted. Also, share this article with your team, inner circle, and social media.

And a considerable amount of my time is spent on adding new features to the templates pack if you would like to recognize the work and sustain the momentum, kindly consider sponsoring the project in GitHub here. Thanks in advance.

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