OpenSilver Visual Studio Code Extension

Introduction

The OpenSilver Visual Studio Code Extension is designed to enhance productivity and simplify the creation and coding of OpenSilver projects within Visual Studio Code. It provides an easy way to create and manage OpenSilver projects, offering templates for C#, Visual Basic, and F#. Additionally, it provides commands to create new items such as classes and resource files, all within the Visual Studio Code workspace. The extension also includes a powerful XAML UI Designer, allowing developers to visually build XAML pages with ease.

Note: To create a new project within Visual Studio Code, you need the OpenSilver CLI Templates package. Additional information can be found in the OpenSilver documentation.

Recommendation: We highly recommend using the C# Dev Kit for an enhanced development experience in Visual Studio Code.

Debugging OpenSilver Applications

Debugging OpenSilver applications is straightforward. Since OpenSilver is built on top of Blazor WebAssembly, you can follow the official Microsoft Visual Studio Code debugging instructions. These instructions provide comprehensive steps for setting up and running a debugging session, ensuring a seamless development experience.

Commands Provided

The extension introduces a variety of new commands, such as building the solution and creating new project items. These commands are grouped under the OpenSilver category and can be accessed via the command palette.

The available commands are:

• New Project Items:

  • opensilver.newApplication: "Create a new OpenSilver Application"
  • opensilver.newProject: "Add a new OpenSilver Class Library"
  • opensilver.newChildWindow: "Create a new OpenSilver Child Window"
  • opensilver.newUserControl: "Create a new OpenSilver User Control"
  • opensilver.newPage: "Create a new OpenSilver Page"
  • opensilver.newClass: "Create a new Class"
  • opensilver.newResourceFile: "Create a new Resource (.resx) file"
  • opensilver.newXamlResourceDictionary: "Create a new XAML Resource Dictionary file"

• Other Commands:

  • opensilver.compileSolution: "Compile the Application"
  • opensilver.showXamlDesigner: "Show the XAML Designer"
  • opensilver.formatXaml: "Format the XAML file"

XAML UI Designer

One of the key features of this extension is the XAML UI Designer. This tool provides a visual interface for designing XAML pages, allowing developers to drag and drop components, modify properties, and see immediate previews of their changes. The designer offers support for editing existing XAML files, building new pages from scratch, and ensures all changes are synced directly with the code, improving development efficiency.

Create a Project from the Homepage

The extension adds a new command button to the Explorer panel homepage. When you open a new instance of Visual Studio Code, you’ll notice a button labeled ‘Create OpenSilver Project.’ Clicking this button opens the command palette, where you can choose from different templates.

After selecting a project template, you’ll be prompted to enter a solution name and location. A new solution, compatible with Visual Studio and the C# dev toolkit, will then be created.