Rainbow Variable for VS Code

Rainbow Variables colors parameters and local variables with a repeatable rainbow palette inside each JavaScript or TypeScript function/method scope. It is inspired by the JetBrains Rainbow Variable plugin and brings the same quick visual distinction to VS Code.

Features

• Gives every method/function parameter and local variable a stable color within its scope.
• Reuses the surrounding function's color for captured variables inside nested functions.
• Starts a fresh color sequence for nested functions, lambdas, and class methods.
• Skips property names, imports, type-only syntax, and unsupported language documents.
• Updates highlights as you edit and exposes refresh/toggle commands in the Command Palette.

Supported Languages

• JavaScript
• JavaScript React
• TypeScript
• TypeScript React

Extension Settings

This extension contributes these settings:

• rainbowVariables.enabled: Enable or disable highlighting.
• rainbowVariables.colors: Palette used for parameters and variables.
• rainbowVariables.fontWeight: Font weight applied to highlighted identifiers.
• rainbowVariables.includeParameters: Color function and method parameters.
• rainbowVariables.includeVariables: Color local variables declared inside functions and methods.
• rainbowVariables.includeImports: Color imported bindings and their usages.
• rainbowVariables.supportedLanguages: VS Code language IDs where highlighting runs.
• rainbowVariables.maxFileSizeKb: Skip highlighting very large files.

Commands

• Rainbow Variables: Refresh
• Rainbow Variables: Show Status
• Rainbow Variables: Toggle

Use Rainbow Variables: Show Status after installing if highlights are not visible. It reports whether the active editor is skipped and how many identifiers were found.

Development

Run these from the extension root:

npm run compile
npm test

To make a local VSIX for installation, run:

npm run package:vsix

After installing the VSIX, reload VS Code so the new extension host loads the updated bundle.

Known Issues

The first version uses TypeScript's parser for JavaScript and TypeScript files. Other languages can be added later with language-specific parsers or token providers.

See the CHANGELOG for release history.