vscode-deck

The vscode-deck project serves as a comprehensive foundation for integrating Visual Studio Code (VSCode) with Stream Deck, facilitating a more efficient workflow for developers. This repository includes essential components that enable dynamic button display and execution directly from VSCode, enhanced by the NPM Scripts Provider built upon this infrastructure.

Features Overview

Key Components

Name	Type	Description
Stream Deck Integration	VSCode Extension + npm	Acts as the integration host for Stream Deck. It supports multiple instances of VSCode and devices, along with a variety of providers for customization.
VSCode Runner	Stream Deck Plugin	A dedicated Stream Deck plugin that enables communication with VSCode for button display and task execution.
NPM Scripts Deck	VSCode Extension	A provider that displays npm scripts from the package.json file as buttons on the Stream Deck, allowing for quick access and execution.

Multi-Instance Coordination

The architecture of the Stream Deck Integration is designed to efficiently manage multiple instances of VSCode that may be running concurrently. Utilizing a Leader/Follower pattern via HTTP and WebSocket, the integration ensures that the Stream Deck reflects the active context of the VSCode window, including the currently opened project and focused file.

• The first launched VSCode instance takes on the role of Leader, establishing an HTTP and WebSocket server on the localhost.
• Subsequent VSCode instances serve as Followers, linking to the Stream Deck plugin through the Leader's server.
• As the active VSCode window changes, the Leader updates the Stream Deck with the current relevant buttons.
• Should the Leader close, another instance is automatically promoted to Leader, ensuring seamless operation without downtime.

The integration simplifies the process for developers aiming to create custom providers, as it manages multi-instance coordination internally. Providers only need to implement four primary functions: registerProvider, getSlots, run, and notifyChange.

For further details on creating custom providers, refer to the Custom Provider Guide.

Explore the vscode-deck repository to enhance your development experience by effectively integrating Stream Deck with VSCode.