Introducing Syncfusion .NET MAUI Visual Studio Code Extension
Tags: dotnetmaui, mobile, maui, visualstudiocode
Published: 2024-04-17 02:40:40

---
title: Introducing Syncfusion .NET MAUI Visual Studio Code Extension
published: true
date: 2024-04-09 17:14:48 UTC
tags: dotnetmaui, mobile, maui, visualstudiocode
canonical_url: https://www.syncfusion.com/blogs/post/maui-visual-studio-code-extension
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1odtwuwi2s7qzchu6hbq.png
---
**TLDR:** Building .NET MAUI apps with Syncfusion controls just got easier! Introducing the Syncfusion .NET MAUI Visual Studio Code Extension. Seamlessly integrate Syncfusion controls with a handy code snippet utility. 

Syncfusion is glad to introduce the[.NET MAUI Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions "Syncfusion .NET MAUI Visual Studio Code Extension") in our [Essential Studio 2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release. It is a utility for adding Syncfusion .NET MAUI controls in the XAML file of a .NET MAUI app. This code snippet utility saves developers time when adding Syncfusion .NET MAUI controls to their projects.

This blog will explore using the new code snippet utility to add Syncfusion .NET MAUI components to your apps.

## Prerequisites

- [Visual Studio Code 1.87.1 or later](https://code.visualstudio.com/download "Visual Studio Code")
- [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp "C# Extension")
- [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit "C# Dev Kit")

## Installing the Syncfusion .NET MAUI Visual Studio Code Extension

We can install the Syncfusion .NET MAUI Extension directly from Visual Studio Code or the Visual Studio Marketplace.

Let’s see the steps to do so!

### Installing the extension from Visual Studio Code

Follow these steps to install the Syncfusion .NET MAUI Extension from Visual Studio Code:

1.Open Visual Studio Code.
2.Then, open the Command Palette by navigating to **View -> Command Palette.**
3.Now, search for **Install Extensions** in the **Command Palette** and expand the **Install Extensions** option when it appears.
4.Search for **Syncfusion .NET MAUI** in the search box to locate **.NET MAUI VS Code Extensions – Syncfusion.**
5.Install the . **NET MAUI VS Code Extensions – Syncfusion** extension by clicking the **Install** button.

## Installing the extension from Marketplace

Follow these steps to install the Syncfusion .NET MAUI extensions from Marketplace:

1.Open the [Syncfusion .NET MAUI Code Extensions](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions "Syncfusion .NET MAUI Visual Studio Code Extensions") in Visual Studio Code Marketplace and click **Install**.
2.A pop-up will appear requesting to open Visual Studio Code. Click on **Open Visual Studio Code**.
3.In the next pop-up that appears, click **Install** to install the extension.

## Adding Syncfusion .NET MAUI controls using the Visual Studio Code Extension

The code snippet utility for Visual Studio Code facilitates effortless insertion of diverse Syncfusion .NET MAUI controls with their respective features into the XAML code editor of the .NET MAUI app.

Follow these steps to add a Syncfusion .NET MAUI control to your .NET MAUI app:

1.Open an existing .NET MAUI app or create a new one in Visual Studio Code.
2.Then, open the required XAML file and position the cursor where you want to add the Syncfusion .NET MAUI control.
3.To access a Syncfusion .NET MAUI control with its features, type **sf** in the following format.
```
Sf-<Syncfusion component name>-<Syncfusion component feature>
```

For example, **sf-datagrid-grouping**

4.Select the required Syncfusion control and its features and press **Enter** or **Tab**. The Syncfusion .NET MAUI control and the code to use the feature will be added to the XAML file. Refer to the following image.![TODO section](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Select-the-required-Syncfusion-control-and-its-features.gif)
5.After adding the required Syncfusion .NET MAUI control to the XAML file, the instructions will be included in the **TODO** section for your reference. This will guide you in determining whether to add the View Model file or only add the namespace and NuGet entries to run the Syncfusion control.  
 ![TODO section](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/TODO-section.png)To explore further details about the added .NET MAUI control features, you can access the documentation page by clicking on the **help link**  at the top of the code snippet.  
 ![Help link](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Help-link.png)

## Configuring the .NET MAUI app

The Syncfusion [.NET MAUI Visual Studio Code Extension](https://help.syncfusion.com/maui/visual-studio-code-integration/code-snippet "Add Syncfusion .NET MAUI controls in the .NET MAUI app") utility adds only the code for the controls in the XAML file. So, we need to install the required NuGet packages and add namespaces by following these steps:

1.Open the .NET MAUI app’s project file and manually add the necessary Syncfusion .NET MAUI individual NuGet package(s) as a package reference for the Syncfusion .NET MAUI controls. We’ve included a commented code sample indicating each component’s corresponding NuGet package entry. Copy and paste the NuGet package entry into your .NET MAUI project file. This NuGet package will be automatically restored during the project’s build or save process.   
 ![Manually add the necessary Syncfusion .NET MAUI individual NuGet package(s)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Manually-add-the-necessary-Syncfusion-.NET-MAUI-individual-NuGet-packages.gif)
2.To integrate Syncfusion controls into your app, go to the XAML file and insert the necessary Syncfusion .NET MAUI namespace entries. We’ve included a commented code sample indicating the corresponding namespace entry for each component. Copy the namespace entry and paste it into your XAML file.  
 ![Insert the necessary Syncfusion .NET MAUI namespace-entries](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Insert-the-necessary-Syncfusion-.NET-MAUI-namespace-entries.gif)
3.Finally, run the app to see the Syncfusion .NET MAUI control.

## Conclusion
Thanks for reading! This blog explored the new [Syncfusion .NET MAUI Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.MAUI-VSCode-Extensions "Syncfusion .NET MAUI Visual Studio Code Extension") in the [Essential Studio 2024 Volume 1 release](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1"). I trust this blog will help you utilize our code snippet utility to seamlessly integrate Syncfusion [.NET MAUI controls](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") into your apps, saving you time and enhancing your app’s functionality.

To explore more updates from this release, please refer to our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v25.1.35 "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What’s New page") pages.

If you’re not a Syncfusion customer, we encourage you to try our [30-day free trial](https://www.syncfusion.com/downloads/maui "Free evaluation of the Essential Studio products") to experience these latest features firsthand.

We welcome your feedback and questions in the comments section below or through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We’re here to help you every step of the way!

## Related blogs

- [Syncfusion Essential Studio 2024 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2024-vol-1 "Blog: Syncfusion Essential Studio 2024 Volume 1 Is Here!")
- [Introducing the 11th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/dotnet-maui-2024-volume-1 "Blog: Introducing the 11th Set of New .NET MAUI Controls and Features")
- [Syncfusion’s Response to Xamarin’s End of Life: A Comprehensive Plan](https://www.syncfusion.com/blogs/post/xamarins-end-of-life "Blog: Syncfusion’s Response to Xamarin’s End of Life: A Comprehensive Plan")
- [Introducing Syncfusion .NET MAUI Template Studio for Visual Studio Code](https://www.syncfusion.com/blogs/post/maui-template-studio-visual-studio-code "Blog: Introducing Syncfusion .NET MAUI Template Studio for Visual Studio Code")