Skip to content

VS Code Extension

The Doodle Engine VS Code extension adds syntax highlighting for .dlg dialogue files, so keywords, speakers, conditions, and comments each get their own color while you write. It is distributed as a VSIX installation file with the @doodle-engine/cli package, so every project that has installed its dependencies already has it on disk.

This page is for the CLI and text editor workflow. Doodle Studio has its own built-in .dlg highlighting and IntelliSense; Studio users do not need this extension.

Element Example
Structure keywords (NODE, CHOICE, IF, END) NODE start
Flow keywords (TRIGGER, REQUIRE, GOTO) GOTO rumors
Effect keywords (SET, ADD, REMOVE, MOVE, CLEAR, ADVANCE, START, ROLL) ADD variable gold -5
Media keywords (MUSIC, SOUND, VOICE, VIDEO, NOTIFY, INTERLUDE) MUSIC tension.ogg
Speaker names BARTENDER:
Condition types (hasFlag, questAtStage, variableGreaterThan, etc.) REQUIRE hasFlag metBartender
Effect targets (flag, variable, questStage, item, etc.) SET flag seenIntro
Localization keys @bartender.greeting
Quoted strings "Hello, traveler!"
Numbers -5, 20
Comments # This is a comment

The extension also enables:

  • Line comment toggling with Ctrl+/ (Cmd+/ on macOS)
  • Auto-closing double quotes

The extension is bundled with the @doodle-engine/cli npm package. After running npm install (or yarn/pnpm) in your project:

  1. Open VS Code
  2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
  3. Run Extensions: Install from VSIX…
  4. Open node_modules/@doodle-engine/cli/extensions/ in your project and select doodle-dlg-syntax.vsix

Then reload VS Code. Open any .dlg file in your project: keywords such as NODE and CHOICE appear in their own colors, and Ctrl+/ toggles line comments. If the file stays one color, check that its extension is .dlg and that the VSIX installed without errors.