Using Loreline with VS Code

To write Loreline scripts on your computer, we recommend using Visual Studio Code (VS Code for short). It's a free text editor available on Windows, macOS, and Linux. Combined with the Loreline extension, it gives you syntax highlighting, a live preview of your story, and editing tools, all in one place.

If you just want to try Loreline without installing anything, you can use the online Playground directly in your browser.

Loreline VS Code extension screenshot

Installing VS Code

Head to the official Visual Studio Code website and download the version for your system.

Don't be put off by VS Code's "AI code editor" tagline. You don't need to use any AI features, and we won't be using any here. It's just a free text editor that our Loreline extension runs on.

Download VS Code →

Open the installer and follow the instructions. Once installed, launch VS Code. You should see a welcome screen.

Installing the Loreline extension

Now let's add Loreline support to VS Code:

  1. Click the Extensions icon in the left sidebar (it looks like four small squares).
  2. In the search box at the top, type Loreline.
  3. Click Install on the Loreline extension.

That's all you need to do. VS Code now knows how to work with .lor files.

The video above walks you through installing the Loreline extension for VS Code step by step. You can see that before installation, VS Code doesn't recognize the .lor file syntax, and once Loreline is installed, syntax highlighting appears, and you can even click the ▶ (Play) icon to play the script!

You can also find the extension on the VS Code Marketplace.

Creating your first .lor file

Let's make sure everything works:

  1. In VS Code, open a folder where you want to keep your scripts: File → Open Folder.
  2. In the left sidebar, right-click and choose New File. Name it something like MyStory.lor.
  3. Type a few lines, for example:
barista: Hi there! How are you doing today?

You should see the text light up with colors. That means the extension is working.

To learn the Loreline language, head to the Writer's Guide. It will walk you through everything step by step.

Features

Configuration

All settings are under the loreline namespace in VS Code. Open Settings (Ctrl+,) and search for "loreline".

Setting Description
loreline.enableChoiceDecoration Enable visual decorations on choice option lines.
loreline.enableChoiceBackground Show a background color on choice option lines.
loreline.enableChoiceColor Apply a text color to choice option lines.
loreline.choiceBackgroundColor Custom background color for choice options (hex).
loreline.choiceTextColor Custom text color for choice options (hex).
loreline.enableTextStatementDecoration Enable styling on narrative text lines.
loreline.textStatementItalic Render narrative text in italic.
loreline.textStatementColor Color for narrative text lines.
loreline.pluralPipeColor Color for the pipe separator in plural expressions.

Going further