Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>YAML RainbowNew to Visual Studio Code? Get it now.
YAML Rainbow

YAML Rainbow

Kaku-g

|
3 installs
| (0) | Free
Make deeply nested YAML easier to read with hierarchy-aware rainbow key colors and path highlighting.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

YAML Rainbow

YAML Rainbow makes deeply nested YAML easier to read by coloring keys by hierarchy depth and showing your current path.

This extension is a visual reading aid for YAML. It does not modify files, format YAML, reorder keys, validate schemas, or report diagnostics.

Features

  • Colors YAML keys by hierarchy depth.
  • Outlines the key under your cursor and each parent key in its path.
  • Shows the current YAML path in the VSCode status bar.
  • Automatically disables scanning for large files.
  • Uses a tolerant line-based scanner for YAML files that contain template-like syntax.

Screenshot

Screenshot placeholder for the MVP.

Configuration

Setting Default Description
yamlRainbow.enabled true Enable YAML Rainbow visual enhancements.
yamlRainbow.keyColors ["#7aa2f7", "#bb9af7", "#7dcfff", "#9ece6a", "#e0af68", "#f7768e"] Colors used for YAML keys by hierarchy depth.
yamlRainbow.activePathColor #ffcc66 Color used for active YAML path key outlines.
yamlRainbow.activePathBackground rgba(255, 204, 102, 0.12) Background color for the currently selected YAML path key.
yamlRainbow.showStatusBarPath true Show current YAML path in the VSCode status bar.
yamlRainbow.maxFileLines 3000 Disable YAML Rainbow automatically for files larger than this number of lines.
yamlRainbow.maxDepth 8 Compatibility setting. Key colors now cycle indefinitely by hierarchy depth.
yamlRainbow.indentSize 2 YAML indentation size used for hierarchy depth calculation.
yamlRainbow.debounceMs 120 Debounce delay for re-scanning documents after edits.

Commands

  • YAML Rainbow: Toggle
  • YAML Rainbow: Refresh

Known Limitations

  • Array index paths are simplified in the MVP. For example, containers.image may be shown instead of containers[0].image.
  • YAML Rainbow is not a YAML validator.
  • YAML Rainbow is not a formatter.
  • Complex flow-style YAML support is intentionally limited.

Development

Install dependencies:

npm install

Run checks:

npm run compile
npm test

Run the extension in VSCode:

  1. Open this folder in VSCode.
  2. Press F5.
  3. Open a .yaml or .yml file in the Extension Development Host.
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft