Bit Extension for VS Code: Boosting Dev Productivity

Improve your component development productivity in VS Code

Bit is an open-source toolchain for component-driven development. While working with Bit components, we typically use the terminal to execute various Bit commands for tasks like component creation, modification, listing, testing, building, and exporting. While this approach is perfectly functional, there’s an exciting opportunity to elevate the developer experience by integrating Bit with VS Code.

You can find the Bit Extension in the Visual Studio Marketplace.

If you’re accustomed to using the Git extension within VS Code, you’ll find the Bit Extension quite similar and equally powerful, with extended support for component-driven development. It simplifies tracking component changes and allows you to easily export them to the Bit cloud.

Beyond this core functionality, it introduces a range of practical productivity enhancements to streamline your day-to-day coding tasks. This article looks at how we can use it to boost developer productivity.

Using the Extension

If you haven’t tried the extension before, you first need to install the extension from Visual Code Marketplace. You can directly search for the extension inside VS Code and install it.

Installing Bit Extension

Note: The extension expects that Bit is installed on your local machine.

To use the extension, open a Bit workspace directory in VS Code or create a new one using the extension or terminal. Now, you can use the extension to work with Bit components.

UI Widgets

1. Extension Menu: Icon Shown once the extension is installed.
2. Extension Section: Component List, Status and Details
3. Source Control: Bit Component Change Tracking
4. Status Bar: Selected Lane, other statuses.

VS Code Command Palette

VS Code Command Palette

You can access the VS Code Command Palette by using the following;

• Shift + Command + P (Mac)
• Ctrl + Shift + P (Windows/Linux)

You will often be working with the Command Palette to execute Bit commands. You will also find these commands to perform faster than the terminal since an active express server is waiting to run the command.

For more details, refer to the extension documentation.

Tips and Tricks

Let’s look at several tips and tricks that will help you to improve your experience when using the extension.

1. Generate the VS Code Debug Config

You can generate the VS Code debug configuration using the Command Palette Command:

Bit: Generate files in the .vscode folder to allow debugging components

Then, click on the lunch program to debug your Bit components.

2. Use the latest version of Bit

For smooth operation with the Extension, having the most recent version of Bit installed on your local machine is advisable. This helps prevent compatibility problems when you run Bit commands with the Extension.

Run bvm upgrade to update your bit version to the latest.

3. Import packages as components

While working with Bit components, you may need to update one of its dependent components. You can directly import it by right-clicking on its package name and selecting “import as a component.”

4. Use lane in status to create/switch lanes

When using Git, you may be familiar with the tiny option at the bottom left corner where you see the current branch. You can see the current Bit lane in the same place when using the Bit extension.

You can change or create new lanes by clicking the lane icon in the VS Code status bar.

5. Disabling Git Extension

If you are using Bit for your component source control, you can turn off the Git plugin in VS Code temporarily so that you won’t get any confusion in switching between Git and Bit extension features.

Disabling Git integration is easy. If you’re on MacOS, go to Code > Preferences > User settings or use the shortcut ⌘,. You’ll see Default Settings on the left and User Settings on the right.

You can also create a settings.json file at your project root and add the following configuration.

# settings.json
{
    ...
    "git.enabled": false,
    "git.path": null,
    "git.autofetch": false
}

6. Full Source Control Support

The Bit extension shows the placeholders “tag on main” and “snap on my-lane,” depending on your active lane. It will also show the file changes for quickly identifying the modified components in your workspace.

Finally

VS Code Bit extension was one of the long-awaited features in the Bit ecosystem. If you are familiar with the Git extension in VS Code, you will find it quite similar in functionality. It smoothly integrates with VS Code source control functionality. It would be a sure productivity boost.

So, if you haven’t tried it yet, I would highly recommend trying it out. And don’t forget to update your bit version to the latest.

Happy coding !

Learn More

Bit and StoryBook: Two Different Things

Selecting the Right Tool for Your Monorepo

How to Publish React Components

How We Build Micro Frontends