Constant Visualizer

A VS Code extension that enhances code readability by displaying string constant values directly above their references.

Features

• Shows string constant values above their usage in the code
• Supports both single and double-quoted strings
• Works with TypeScript and JavaScript files
• Beautiful pink-themed visualization that matches VS Code's theme
• Automatically updates as you type

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Constant Visualizer"
4. Click Install

Usage

The extension automatically activates for TypeScript and JavaScript files. When you use a string constant in your code, its value will be displayed above the reference in a subtle pink theme.

To enable/disable the visualization:

1. Open the command palette (Ctrl+Shift+P)
2. Type "Enable Constant Visualization"
3. Press Enter

Example

const WELCOME_MESSAGE = "Welcome to the app!";
console.log(WELCOME_MESSAGE); // The value "Welcome to the app!" will appear above WELCOME_MESSAGE

Requirements

• VS Code version 1.74.0 or higher

Extension Settings

This extension contributes the following settings:

• const-visualizer.enable: Enable/disable constant visualization

Known Issues

Please report any issues on the GitHub repository.

Release Notes

0.0.1

Initial release of Constant Visualizer:

• Basic constant value visualization
• Support for TypeScript and JavaScript files
• Pink-themed display

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This extension is licensed under the MIT License.