QMK Layer Indicator

A VS Code extension that displays your current QMK keyboard layer in the status bar with color-coded indicators and layer icons.

🎯 Recommended Pairing

This extension works best when paired with the QMK CRKBD Firmware Configuration - a custom Corne keyboard firmware that includes:

• 6 distinct layers with unique functionalities
• RGB underglow that changes color based on the active layer
• 4 encoders with RGB control mappings
• Pre-configured layer output for seamless integration with this extension

The firmware is specifically designed to work with this VS Code extension, providing both visual feedback in your editor and physical RGB feedback on your keyboard.

Features

• 🔴 Real-time layer detection - Automatically detects QMK layer changes
• 🎨 Color-coded layers - Each layer has a distinct color for easy identification
• 🎯 Layer icons - Visual icons for different layer types
• ⚡ Click to connect - Simple click-to-connect functionality
• ⚙️ Configurable - Customize QMK CLI path, colors, and display options

Layer Types

The extension supports the following layer types with default icons and colors:

Installation

From VS Code Marketplace

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

From VSIX

1. Download the latest .vsix file from Releases
2. Open VS Code
3. Run Extensions: Install from VSIX... from the Command Palette (Ctrl+Shift+P)
4. Select the downloaded .vsix file

Requirements

• QMK CLI must be installed and accessible in your PATH
• QMK firmware must be configured to output layer information to console

QMK Setup

For the best experience, use the QMK CRKBD Firmware Configuration which includes pre-configured layer output and RGB feedback.

Alternatively, you can add the following to your QMK keymap to enable layer output:

// In your keymap.c file
layer_state_t layer_state_set_user(layer_state_t state) {
    switch (get_highest_layer(state)) {
        case _BASE:
            uprintf("LAYER:BASE\n");
            break;
        case _NUMS:
            uprintf("LAYER:NUMS\n");
            break;
        case _MEDIA:
            uprintf("LAYER:MEDIA\n");
            break;
        case _SYSTEM:
            uprintf("LAYER:SYSTEM\n");
            break;
    }
    return state;
}

Note: The recommended CRKBD firmware includes additional RGB underglow feedback that changes color based on your active layer, providing both visual feedback in VS Code and physical feedback on your keyboard.

Usage

1. Connect to QMK: Click the "🔌 QMK Disconnected" status bar item to start monitoring
2. Layer switching: Change layers on your keyboard - the status bar will update automatically
3. Disconnect: Click the layer indicator to stop monitoring

Commands

• QMK Layer Indicator: Start QMK Layer Monitoring - Start monitoring layer changes
• QMK Layer Indicator: Stop QMK Layer Monitoring - Stop monitoring
• QMK Layer Indicator: Restart QMK Layer Monitoring - Restart the monitoring process

Configuration

Open VS Code settings and search for "QMK Layer Indicator" to configure:

Settings

Example Configuration

{
    "qmkLayerIndicator.qmkPath": "/usr/local/bin/qmk",
    "qmkLayerIndicator.showIcon": true,
    "qmkLayerIndicator.colorEnabled": true
}

Troubleshooting

Extension not connecting

• Ensure QMK CLI is installed: qmk --version
• Check if your keyboard is properly connected
• Verify QMK firmware includes layer output code

No layer changes detected

• Confirm your keymap includes uprintf("LAYER:LAYERNAME\n"); statements
• Check that layer names match those in your keymap
• Try restarting the monitoring process

QMK CLI not found

• Install QMK CLI: pip install qmk
• Set the correct path in settings: qmkLayerIndicator.qmkPath

Development

Building from Source

# Clone the repository
git clone https://github.com/ricardoescaran/qmk-vscode-status-bar.git
cd qmk-vscode-status-bar

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Package extension
npx vsce package

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a complete history of changes.

Support

If you encounter any issues or have suggestions, please create an issue on GitHub.