Editor Setup

You can use any standard IDE to develop components in Bit workspaces.

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

To learn more, read the Bit VSCode Extension documentation.

For VSCode debugging, use our official VSCode plugin and run the command "Bit: Generate files in .vscode to allow for debugging"

{
  "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"
    }
  ]
}
Copied

For Webstorm debugging, go to your run/debug configurations and add a new Node.js configuration. Set the following values:

• Node interpreter: Project (or your preferred node version)
• Node parameters: Use --inspect to attach the node debugger
• Working directory: Keep it as default (path to your project)
• JavaScript file: node_modules/@teambit/bit/dist/app.js
• Application parameters: $Prompt$ --log error (this will prompt you for the bit command to run, you can replace it with a specific command, like start, if you prefer)
• Environment variables: Keep it empty, or add whatever you might need to run your project

Now you can run the configuration with Alt+Shift+F10, and it will prompt you for the bit command to run. You can also set a default command in the configuration, so you won't need to enter it every time.

On bit start you can debug the client code by using Ctrl+Shift / ⌘⇧ and clicking on the URL printed in the terminal (localhost:3000). This will open a new tab in your browser with the debugger attached to it. Just add a breakpoint in your code by clicking on the line number and refresh the page.

• Create apps
• Create components