Extension Development

Learn how to customize the theme to fit your needs, preview changes and package the extension.

This is a living document which means it is work in progress, not completed yet and can change at any time while the project is still in development major version zero 0.y.z!

This page documents how to develop the theme extension — from requirements to VSIX packaging and the development workflow steps.

Requirements

Download and install Visual Studio Code, or Visual Studio Code Insiders to update to the latest development state each day, with a minimal version of 1.12.0 or higher.

Setup

Uninstall all currently installed versions of the Nord extension!

Otherwise the installed and versioned extension will collide with the development extension that'll be configured in this guide.

Download

Clone the Nord Visual Studio Code repository from GitHub to your local extension directory where name of Nord's extension directory must follow VS Code's extension naming scheme of <PUBLISHER_NAME>.<EXTENSION_NAME>-<EXTENSION_VERSION>.

This results in the following directory name for the Nord extension: arcticicestudio.nord-visual-studio-code-0.0.0. Note that you can specify any version number you like, but using 0.0.0 indicates that this is a special version for development purposes.

git clone https://github.com/arcticicestudio/nord-visual-studio-code.git arcticicestudio.nord-visual-studio-code-0.0.0

To get the project without Git download the project as .zip archive file from the GitHub repository or click on the download button below. Afterwards extract the archive to your local extension directory following the directory naming scheme like described above.

Download

Both methods will use the develop branch to work with the latest development state.

Open the extension by adding the cloned/extracted repository directory to your workspace or opening the directory directly and set Nord as active color theme like documented in the installation & activation guide.

Workflow

In contrast to the immediately applied changes when editing the user settings it requires a complete restart/reload of VS Code when editing any JSON theme files provided by the extension.

To simplify the development without requiring to restart VS Code every time to preview changes

add the modified workbench UI or syntax theme key to your user settings
save the file to apply the changes immediately
add the changes to Nord's JSON theme file afterwards

This way allows to develop and preview the theme without being slowed down by the missing hot reload functionality.

Packaging

Visual Studio Code extensions are packaged using the custom and installable VSIX format.
To package, publish and manage extensions, VS Code uses the official CLI tool vsce.

Follow the official documentations to learn how to install and use the vsce CLI tool.
Run vsce package in your terminal from within Nord Visual Studio Code's repository to build the .vsix extension file.

Please read the theme documentation about how to install and activate the generated VSIX file locally.

Follow the Installation & Activation Guide for more details how to enable the theme.