Bit
Bit Visual Studio Code extension improves your component development experience with enhanced productivity features and integrated support for VS Code Source Control.
Features
Workspace Quick Actions
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.
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.
Create a New Component
Create new components using pre-built Bit templates.
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"
}
]
}
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.
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 the bit extension using VS Code Settings editor.
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).
Enjoy!