Skip to main content

VS Code extension


VS Code extension

The Zilla Visual Studio Code extension enables you to manage your Zilla config files easily in VS Code.

Introduction

The VS Code extension includes:

  • Zilla Diagram, which provides a visual representation of your Zilla config similar to a network diagram. It displays all of the configured Zilla elements and how they connect.
  • Yaml IntelliSense, which helps you write and maintain your zilla.yaml config.

Install the VS Code extension

For installation and setup instructions, visit the VS Code Marketplaceopen in new window, or search for the official Zilla extension on the Extensions tab in VS Code.

Using vscode.dev

The Zilla extension can be installed on vscode.dev for those users who don't have it installed on their local environment.

  • Go to vscode.devopen in new window
  • Search for the Zilla VSCode extension and install it
  • Create a file called zilla.yaml
  • Paste your yaml and the extension will be able to render the diagram

Browsing GitHub repos

vscode.dev
vscode.dev

Zilla Diagram

The extension will render the active zilla.yaml file when the Toggle Diagram View Toggle Diagram View button in the top right corner is pressed.

  • Clicking anywhere on the diagram will take your cursor to that location in the zilla.yaml file.
  • the ? icon that appears on a clicked element will take you to the appropriate docs page
diagram
diagram
  • Missing connections and errors can be seen in the diagram view.
diagram error
diagram error
  • The Add dropdown lets you create new elements in the zilla.yaml file.
  • The Export dropdown lets you download your diagram.
  • the View switch will toggle between side-by-side and top-bottom layouts.
diagram controls
diagram controls

Yaml IntelliSense

  • Property and Value validation highlighting
property highlight
property highlight
value highlight
value highlight
  • Syntax and Context aware autocomplete
syntax autocomplete
syntax autocomplete
context autocomplete
context autocomplete