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:
- Open this folder in VSCode.
- Press
F5.
- Open a
.yaml or .yml file in the Extension Development Host.
| |