Skip to main content
Design resources
Back

Setting up Visual Studio Code

Visual Studio Code (VS Code) is a free, open-source code editor available for Windows, macOS, and Linux.

Follow these steps to set up VS Code for designing with the GOV.UK Prototype Kit.

1. Download and install VS Code

To install:

  1. Download Visual Studio Code.
  2. Select the appropriate installer for your operating system.
  3. Run the downloaded installer and follow the on-screen instructions to complete the installation.

2. Opening your prototype

To open an existing prototype, go to the menu bar and select ‘File > Open’ and select your prototype folder.

3. Opening the integrated terminal

The integrated terminal allows you to run command-line operations within VS Code like npm install and npm run dev.

To open it press Ctrl + ` (backtick) on your keyboard. Alternatively, go to the menu bar and select ‘Terminal > New Terminal’.

4. Enabling auto save

Auto save automatically saves your changes, which means they will refresh in your browser automatically.

To enable it:

  1. Go to the settings cog icon in the bottom left of your window and select ‘Settings’. In the new tab you can either search for ‘auto save’ or it may appear in the list of commonly used settings.
  2. Select ‘onFocusChange’ from the auto save dropdown. This will automatically save your file when you change tabs or when the focus moves out of the VS Code window.

Learn more about auto save in VS Code.

5. Using the auto format feature

Auto format helps maintain consistent code formatting.

Shortcut to use it:

  1. Shift + Alt + F (Windows)
  2. Shift + Option + F (macOS)

This feature may not fully support Nunjucks code within HTML files. You might need to adjust the formatting manually for those lines.

Learn more about code formatting shortcuts.

6. Recommended extensions

Enhance your development experience with the following VS Code extensions from the Visual Studio Marketplace:

GOV.UK Design System snippets

Provides reusable code also known as snippets for the GOV.UK Design System components. Start typing the component you want and select it from the pop up.

Install GOV.UK Design System snippets.

Code Spell Checker

A basic spell checker that works well with code and documents, helping to catch common spelling errors.

Install Code Spell Checker.

TODO Tree

Quickly searches your workspace for comment tags like TODO and FIXME, displaying them in a tree view for easy navigation.

Install TODO Tree.