Confluent for VS Code

Confluent for VS Code makes it easy for you to build stream processing applications using Confluent technology. This extension provides a robust, delightful experience for Confluent Cloud features from within the Visual Studio Code (VS Code) editor desktop environment.

../_images/vscode-extension-screenshot.png

Confluent for VS Code is open-source and is available in this GitHub repo.

Confluent for VS Code is available for Early Access, and some Confluent features may not be available. Consider installing the Confluent CLI to access all features of Confluent Cloud.

Installation

From the VS Code Extension Marketplace

In your browser, go to the VS Code Marketplace to view, download, and install Confluent for VS Code.

From within VS Code

  1. Open VS Code.
  2. In the Activity Bar, click Extensions (Cmd+Shift+X/Ctrl+Shift+X).
  3. In the Extensions view, search for “Confluent”.
  4. Click Install.

From a VSIX file

Confluent provides these VSIX files:

  • MacOS with Apple Silicon: vscode-confluent-darwin-arm64-x.x.x.vsix
  • MacOS with Intel processors: vscode-confluent-darwin-x64-x.x.x.vsix
  • Linux on ARM-64 processors: vscode-confluent-linux-arm64-x.x.x.vsix
  • Linux on x86 processors: vscode-confluent-linux-x64-x.x.x.vsix
  • Windows on x64 processors: vscode-confluent-windows-x64-x.x.x.vsix

Replace x.x.x with the actual version number you want to use.

Currently, Windows is not supported, but you can use Windows Subsystem for Linux (WSL) with one of the Linux .vsix files.

You can install Confluent for VS Code from a VSIX file by using the VS Code UI or by using the code –install-extension command in the terminal.

To install by using the UI, follow these steps:

  1. Download the VSIX file appropriate for your machine.
  2. Open VS Code, and in the Activity Bar, click Extensions.
  3. At the top of the Extensions view, click , and in the context menu, click Install from VSIX…
  4. Navigate to your downloaded vscode-confluent-vX.X.X.vsix file and click Install.

To install in the terminal, run the following command:

code --install-extension /path/to/vscode-confluent-vX.X.X.vsix

Features

Confluent for VS Code provides a number of features for working with your Kafka clusters, topics, and schemas.

Smart Project Templates

Confluent for VS Code offers Smart Project Templates that accelerate project setup by providing ready-to-use templates tailored for common development patterns. These templates enable you to quickly launch new projects with minimal configuration, significantly reducing setup time.

You can access them through the Command Palette or from the Generate Project action in the Support panel.

These templates incorporate best practices to help teams maintain high standards and avoid repetitive setup tasks so you can focus on building and innovating.

Command Palette

Most of the features are available in the VS Code Command Palette. Press Cmd+Shift+P/Ctrl+Shift+P and type “confluent” to show the Confluent commands.

Some commands are associated with view actions, which are the simple buttons, usually icons. next to items in the Activity Bar. For example, play (open Message Viewer and start consuming messages), sync (refresh), and ellipsis (extra actions) are all view actions associated with commands available in the Command Palette.

Activity Bar

In the Activity Bar, click the Confluent logo to open the extension and show the following sections.

Connect to your streams

Confluent for VS Code supports accessing your Kafka clusters locally or on Confluent Cloud.

  • To start a local Kafka cluster, install the Confluent CLI and run the confluent local kafka start command.

  • If you’re working on Confluent Cloud, open the extension and click Connect to Confluent Cloud, or go to the VS Code Accounts menu and click Sign in with Confluent Cloud to use Confluent.

    ../_images/vscode-extension-connect.png

Resources

The Resources view lists Confluent Cloud environments and associated Kafka and Schema Registry clusters, as well as local Kafka clusters.

  • Click a Kafka cluster to load the topics created in that cluster in the Topics view.
  • Click a Schema Registry cluster to load the associated schemas for that registry in the Schemas view.

Topics

Click the play icon next to the topic name to open the Message Viewer, which enables searching and exploring messages in a topic. Within Message Viewer, you can:

  • page through and search for specific values within the list of all the messages
  • double-click a single message to explore its entire payload encoded in JSON
  • pause and resume consuming at any time
  • see aggregate counts of messages over time from the histogram view and brush to filter messages by timestamp
  • toggle partitions on and off to show and hide messages from specific partitions

Schemas

The Schemas view displays all the schemas available for the current Confluent Cloud environment’s Schema Registry. Also, schemas are shown in the Topics view by expanding a topic item if they match the TopicNameStrategy, and you have the appropriate permissions.

To activate the Schemas resource, pick a Schema Registry under the Confluent Cloud resources. Schemas also appear beneath Topics.

You can view schema definitions by expanding the schema subject to see a specific schema version and clicking the View Schema icon.

Support

The Support panel provides links to the extension walkthrough, issue reporting, general feedback, and options to generate Kafka projects by using a template.

Outputs

Once Confluent for VS Code is activated, you can view extension logs in two separate Output Channels:

  • Confluent: logs for the VS Code extension itself
  • Confluent (Sidecar): logs from the Sidecar process.

Telemetry

Gathering usage and error data helps Confluent develop a more resilient and user-friendly application. Confluent enables telemetry only in official production releases. Confluent respects your preferences for sending telemetry data. If you have turned off telemetry in your VS Code settings, the extension doesn’t send any events or data.

Segment for user actions

The extension uses Segment to log extension usage. See telemetry.ts for implementation and how it is used in the codebase. The extension sends events when you perform major actions in the extension, such as using any of the registerd commands. This helps Confluent see what commands are popular and helps to answer other questions about how the extension is used, so Confluent can make it even more useful.

Sentry for error tracing

The extension uses Sentry to capture and analyze errors, which enables more robust and friendly error debugging. It is the first item initialized in extension.ts, so it can send any uncaught exceptions globally, and it’s invoked in certain catch blocks to send specific errors. The Sentry rollup-plugin is used to upload source maps.

Known limitations

  • Confluent Cloud connections require reauthenticating after four hours, and you will be prompted to reauthenticate.
  • Preview links for non-default organizations work only after switching to the non-default organization in the Confluent Cloud Console in your browser.

For open issues and feature ideas, see issues in the repo.

Support

To report an issue, within VS Code, open the Support panel in the extension and click Report an issue.

If you have questions, comments, or you run into any issues, feel free to post a message in a GitHub discussion or create an issue.

For general feedback, fill out and submit the survey.

Log in to Confluent Cloud

  1. Install Confluent for VS Code.

  2. In the VS Code Activity Bar, click the Confluent icon. If you have

    many extensions installed, you may need to click to access Additional Views and select Confluent from the context menu.

  3. In the Side Bar, click Connect to Confluent Cloud, and in the

    permission dialog, click Allow.

    The web browser opens to the Confluent Cloud login page.

  4. Enter your credentials and click Log in.

    The web browser shows the Authentication Complete page.

  5. Return to VS Code and confirm that your Confluent Cloud resources are

    displayed in the Side Bar.