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
- Open any supported code file (TypeScript, JavaScript, Python, etc.)
- Place your cursor inside a function, method, or class
- Watch as the extension automatically dims unrelated code
- Move your cursor to different locations to see the focus shift dynamically
🛠️ Development
To run this extension in development mode:
- Clone the repository
- Run
npm install to install dependencies
- Press
F5 to launch a new VS Code window with the extension loaded
- 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.
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.
Enjoy!
