Get started with VS Code

This page is an introduction to VS Code and the Semarchy extension.

Overview of the VS Code environment

Basic layout

Understanding the key features and layout of VS Code is essential for making the most out of the Semarchy extension. Here are the main VS Code components you will interact with:

  • Activity Bar: the vertical bar on the far left of the interface. It provides quick access to different views like the Explorer, Search, Source Control, and Extensions.

  • Primary Side Bar: provides access to various sections within each view:

    • Explorer: displays a tree view of your project files and directories.

    • Search: enables searches across your entire project or within specific folders.

    • Source Control: integrates version control systems like Git directly into VS Code.

    • Extensions: allows you to browse, install, and manage extensions.

  • Editor: the central part of the VS Code interface where you write and edit your code. It supports multiple tabs, so you can work on several files simultaneously.

  • Panel: includes additional views below the editor region. By default, it contains output, debug information, errors and warnings, and an integrated terminal.

  • Status Bar: located at the bottom of the VS Code window, it displays information about your current project and the files you are editing.

For more information about the VS Code user interface, see the official VS Code documentation.

Useful features and shortcuts

Data entry assistance tools

VS Code provides useful data entry assistance tools that streamline the design process, reduce errors, and enhance productivity:

  • Autocomplete: assists you by predicting and displaying possible completions as you type.

  • Snippets: predefined templates that make it easier to insert repetitive design patterns. They can be triggered by typing a keyword and pressing Tab or Enter.

  • IntelliSense: a powerful feature that provides smart suggestions, including variables, methods, functions, and keywords, based on the context of your current file. To activate IntelliSense, press Control+Space.

Quality and validation tools

VS Code offers a variety of tools to help verify and ensure that your files are valid and that your MDM project can be successfully deployed. These tools include:

  • Linters: VS Code supports various linters through extensions that analyze your file for syntax errors, potential issues, and style violations, providing immediate feedback within the editor.

  • Validation extension: the Semarchy extension can validate the structure and content of your files based on predefined schemas or rules. Errors and warnings are highlighted directly in the editor.

  • Output panel: this view displays diagnostic messages, logs, build and compilation messages, debugging information, task execution results, and output from extensions, to help you monitor and troubleshoot your projects effectively.

Keyboard shortcuts

The table below includes some useful shortcuts for designing in VS Code.

Action Windows shortcut Mac shortcut

Open the Command Palette

Control+Shift+P

Command+Shift+P

Activate IntelliSense

Control+Space

Control+Space

Switch tabs

Control+Page Up or
Control+Page Down

Command+Option+Left Arrow or
Command+Option+Right Arrow

Search text in all files

Control+Shift+F

Command+Option+F

Search file in workspace

Control+P

Command+P

For the full keyboard shortcuts reference, see the official VS Code documentation.

Install the Semarchy extension

Prerequisites

Before you begin, ensure you have the following installed on your development environment:

Installation procedures

Use any of these methods to install the Semarchy extension into VS Code:

VSIX file

  1. Download the extension file from the Semarchy website.

  2. Open VS Code.

  3. In the Activity Bar, select Extensions.
    The Primary Side Bar opens.

  4. Next to the Extensions view title, select the view and More Actions Views and More Actions button.

  5. In the drop-down menu, select Install from VSIX.
    A file dialog appears.

  6. Locate the file semarchy-extension-<version>.vsix on your local machine and click Install.

  7. After the installation completes, you should see the Semarchy extension listed under the Installed section of the Extensions view.

VS Code marketplace

  1. In the Activity Bar, select Extensions.
    The Primary Side Bar opens.

  2. Type Semarchy into the search bar located the top of the Extensions view and press Enter.

  3. Browse through the search results to find the Semarchy extension.

  4. Click on the extension to open its details page.

  5. On the details page, click the Install button to add the Semarchy extension to your VS Code environment.

  6. After the installation completes, you should see the Semarchy extension listed under the Installed section of the Extensions view.