Yarn Spinner Editor

Learn about the Yarn Spinner Editor, our official extension for Visual Studio Code.

Back in the Beginner's Guide, you learned the basics of Yarn Spinner Scripting by using our online tool, Try Yarn Spinner.

While Try Yarn Spinner is great for the basics, and for experimenting, when you start creating more complex narratives, you need a great editor! It's time to meet Yarn Spinner for Visual Studio Code.

Yarn Spinner for Visual Studio Code

Yarn Spinner for Visual Studio Code is an extension for the free text editor, Visual Studio Code ("VS Code").

Yarn Spinner for Visual Studio Code gives you syntax highlighting for Yarn Spinner Scripts, as well as a graph view that displays the nodes, and relationships between the nodes, and a whole bunch of other useful features that we'll be exploring as we learn the to write Yarn Spinner Scripts using Visual Studio Code.

VS Code editing a Yarn script

Visual Studio Code is a powerful, flexible, open source code editor for Windows, macOS, and Linux. It supports extensions, which allow it to perform a wide range of useful tasks. The Yarn Spinner Extension is one of these.

If you've never used to VS Code before, head to their official website and install it for your operating system and platform before continuing.

If you're already familiar with VS Code and VS Code extensions, you can just install the extension secretlab.yarn-spinner, or click here and hit the install button, and you'll be ready to go.

Don't be too alarmed by the AI-powered nonsense Microsoft will try and sell you. You can disable most of the AI "features" via the Command Palette by pressing Shift + Command + P (Mac) or Ctrl + Shift + P (Windows/Linux), or choosing the View menu -> Command Palette..., and typing Chat: Hide Copilot and hitting Return/Enter:

Turning off the "helpful" "features".

Installing Yarn Spinner for Visual Studio Code

Once you've got VS Code installed on your system, you'll need to install Yarn Spinner for Visual Studio Code. To do this:

1

Launch Visual Studio Code

2

Open the Extensions view

To do this, select the blocks symbol from the left-hand sidebar, or press Command+Shift+K on macOS, or Control+Shift+X on Windows or Linux.

3

Search for the Yarn Spinner Extension

With the Extensions view open, type "Yarn Spinner" into the search field.

The Yarn Spinner Extension

4

Install the Extension

Once the results have loaded, look for the verified Yarn Spinner extension and click "Install" next to it.

That's all you need to do to install the extension! You're ready to write and edit Yarn Spinner Scripts in Visual Studio Code.