Bit

Bit Visual Studio Code extension improves your component development experience with enhanced productivity features and integrated support for VS Code Source Control.

screenshot

Features

Workspace Quick Actions

Create a new workspace using the shortcut buttons.
Set the default scope for your workspace.
Import components and lanes directly from within the extension.

screenshot

Display Component Details

Click on the Bit extension icon to see your workspace components.

Select a component file and click the COMPONENT DETAILS section to view the component's properties including ID, Env, Package, Dependencies, etc (equivalent to bit show).
Monitor the status of your components using the STATUS section (equivalent to bit status).
Look into the change history using the FILE HISTORY section to review diffs, versions (snaps/tags) and comments of the selected file.

screenshot

VS Code Source Control Integration

Bit VS Code extension integrates into your VS Code Source Control tab (which is typically used for Git). It provides you with better support for component version control. This includes changes to the component configuration, dependency graph and source files.

Review component history with log messages, dates and the subset of files that got changes within the snap/tag.
Review local, un-snapped component modifications (versus the checked out snap)
Create new lanes, export, import and switch between them. You can also see the active lane in the VS Code status bar at the bottom.

screenshot

Create a New Component

Create new components using pre-built Bit templates.

screenshot

VS Code Debug Configuration for Components

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

/* @filename: .vscode/launch.json */

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Bit Debugger",
      "program": "${workspaceFolder}/node_modules/@teambit/bit/dist/app.js",
      "args": "${input:bitCommand}",
      "outFiles": [
        "${workspaceFolder}/**/*.js",
        "dist/**/*.js"
      ],
      "console": "integratedTerminal",
      "sourceMaps": true,
      "internalConsoleOptions": "neverOpen",
      "cwd": "${workspaceFolder}"
    }
  ],
  "inputs": [
    {
      "id": "bitCommand",
      "type": "promptString",
      "description": "Enter the command without the 'bit' prefix"
    }
  ]
}

screenshot

Oce you've created the debug configuration, set the breakpoints in the code editor and click Debug in the Run and Debug section to start debugging.

Run Bit commands with VS Code Command Palette for better performance

Execute Bit commands via the command palette (Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux)). This will provide you with a list of commonly used commands and, most importantly, use Bit Server (which runs in the background) to execute these commands faster.

Configure Bit Extension

Configure the bit extension using VS Code Settings editor.

screenshot

Other Features and Improvements

Bit VS Code is multi-root ready, allowing to use multiple bit-workspaces in one VS Code window.

Setup

Install via VS Code extensions. Search for "Bit".

Visual Studio Code Market Place: Bit

To install bit itself, please run npx @teambit/bvm install. Refer to the documentation for more info.

Requirements

bit > 1.0.7

Known Issues

On Windows if the extension fails to load, go to the settings and change the "Bit: Bin" from "bit" to "bit.CMD".

Debugging

Open the VS Code Developer tools to see Bit server logs in the developer tools Console tab (you'll find it in VS Code 'Help' menu > 'Toggle Developer Tools').

Contribution

Import the extension component, create a lane, snap your changes then create a change-request in bit.cloud. This component is using "vscode-env" which has all the tools needed to build and publish vscode extensions.

General Design

The communication with Bit is done via http. When this extension starts, it spawns a new process running bit server command. This command is an express http server which provides two main capabilities:

executing any command that implements "json" method.
calling api/vscode/:method routes to access different methods of this class in bit.

Managing files and repo (bitmap) changes

When a component file is changed, the SCM needs to get notified in order to show/remove from the "Changed" group. When a component was snapped/tagged (.bitmap is changed), the SCM needs to get the "last-snap" files so then it could compare them to the current workspace files and show the 'quick-diff'.

At first, this was done by using vscode.workspace.createFileSystemWatcher to track file changes. It worked ok in most cases, however, when .bitmap file was changed, it failed to show the new files in the SCM. The reason is because a race condition between bit-watch and vscode-watch. The bit-watch started processing the .bitmap changes and reload .bitmap data for Workspace aspect. Before this was done, this extension tried to get the file-paths of this new component by asking the Workspace for it, which resulted in error due to outdated .bitmap.

Currently, the only watcher running is on the bit's end. Once .bitmap or any component file is changed, it sends an event to this extension using SSE (Server-Sent Events).

For more information

Enjoy!