VSCode Focus Vibe

VSCode Focus Vibe is a Visual Studio Code extension that enhances code readability by dynamically dimming unrelated code based on the cursor's location in the document's symbol hierarchy. This helps you focus on the code that matters most in your current context.

🔍 Features

• Smart Symbol Detection: Automatically detects the symbol hierarchy (classes, functions, methods, etc.) where your cursor is located
• Progressive Dimming: Applies different opacity levels based on the distance from your current focus area
• Live Updates: Automatically updates the focus effect as you move your cursor or edit the document
• Highly Configurable: Customize opacity levels, dimming increments, and which symbols to include
• Multi-Language Support: Works with any language that provides document symbols (TypeScript, JavaScript, Python, Java, C#, Go, Rust, PHP, and more)

How it Works

When you place your cursor inside a function, method, or class:

• The innermost symbol (where your cursor is) remains at 100% opacity
• Parent symbols get progressively dimmed based on their hierarchy level
• Unrelated code outside the symbol hierarchy is dimmed to the minimum opacity
• The effect updates in real-time as you navigate through your code

🎯 Demo

Open the included examples/test-sample.ts file and try placing your cursor in different locations:

• Inside a method of the Calculator class
• Inside nested namespace functions
• Inside complex nested structures

You'll see how the extension intelligently highlights only the relevant code for your current context.

⚙️ Extension Settings

This extension contributes the following settings:

• vscode-focus-vibe.enabled: Enable/disable the focus highlighting effect (default: true)
• vscode-focus-vibe.minimumOpacity: Minimum opacity for the outermost dimmed code (default: 0.1, range: 0.01-0.9)
• vscode-focus-vibe.opacityIncrement: Opacity increment per hierarchy level (default: 0.2, range: 0.05-0.5)
• vscode-focus-vibe.includeBlocks: Include control flow blocks like 'if', 'while', etc., in focus detection (default: false)

🚀 Commands

• Toggle VSCode Focus: Quickly enable/disable the focus effect

You can access this command through:

• Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
• Assign a custom keyboard shortcut

📝 Usage

1. Open any supported code file (TypeScript, JavaScript, Python, etc.)
2. Place your cursor inside a function, method, or class
3. Watch as the extension automatically dims unrelated code
4. Move your cursor to different locations to see the focus shift dynamically

🛠️ Development

To run this extension in development mode:

1. Clone the repository
2. Run npm install to install dependencies
3. Press F5 to launch a new VS Code window with the extension loaded
4. Open a code file and test the functionality

📋 Requirements

• Visual Studio Code 1.102.0 or higher
• Language support that provides document symbols (most languages are supported)

🐛 Known Issues

• Performance may be affected in very large files with complex symbol hierarchies
• Some languages with limited symbol provider support may not work as expected

📰 Release Notes

0.0.1

Initial release of VSCode Focus Vibe:

• Smart symbol hierarchy detection
• Progressive dimming effects
• Real-time cursor tracking
• Configurable opacity settings
• Multi-language support

---

Enjoy focused coding with VSCode Focus Vibe! 🎯

---

Following extension guidelines

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

• Extension Guidelines

Working with Markdown

You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

• Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
• Toggle preview (Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
• Press Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.

For more information

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy!