Bootspring
HomeGet Started

VS Code Setup Guide

Complete guide to integrating Bootspring with Visual Studio Code.

Overview#

Bootspring integrates with VS Code through:

  1. Extension - UI integration, status bar, commands
  2. Terminal - CLI access within VS Code
  3. Context - CLAUDE.md file for AI assistants

Prerequisites#

  • VS Code 1.80.0 or higher
  • Node.js 18+ installed
  • Bootspring CLI installed (npm install -g bootspring)

Extension Installation#

From Marketplace#

  1. Open VS Code
  2. Press Ctrl+Shift+X (or Cmd+Shift+X on macOS)
  3. Search "Bootspring"
  4. Click "Install"

From Command Line#

code --install-extension bootspring.bootspring-vscode

From VSIX (Offline)#

# Download VSIX curl -O https://bootspring.dev/downloads/bootspring-vscode.vsix # Install code --install-extension bootspring-vscode.vsix

Extension Features#

Status Bar#

The status bar shows:

  • Current project status
  • Generation state
  • Quick actions

Click to access commands.

Command Palette#

Access Bootspring commands via Ctrl+Shift+P:

CommandDescription
Bootspring: Generate ContextRegenerate CLAUDE.md
Bootspring: Invoke AgentOpen agent picker
Bootspring: Apply SkillOpen skill picker
Bootspring: Start WorkflowStart a workflow
Bootspring: Show StatusDisplay project status
Bootspring: Open DashboardOpen web dashboard

Keyboard Shortcuts#

Default shortcuts (customizable):

ShortcutCommand
Ctrl+Shift+B GGenerate Context
Ctrl+Shift+B AInvoke Agent
Ctrl+Shift+B SApply Skill
Ctrl+Shift+B WStart Workflow

Context Menu#

Right-click options in editor:

  • "Generate Context for Selection"
  • "Ask Agent About This Code"
  • "Apply Skill Pattern"

Right-click options in explorer:

  • "Generate Context for Folder"
  • "Initialize Bootspring Project"

Extension Settings#

Open settings: Ctrl+, then search "Bootspring"

General Settings#

1{ 2 // Auto-generate context on save 3 "bootspring.autoGenerate": false, 4 5 // Show status bar item 6 "bootspring.showStatusBar": true, 7 8 // Default agent for quick invoke 9 "bootspring.defaultAgent": "frontend-expert", 10 11 // Context file location 12 "bootspring.contextFile": "CLAUDE.md" 13}

Terminal Settings#

1{ 2 // Terminal to use for Bootspring commands 3 "bootspring.terminal.type": "integrated", 4 5 // Shell for Bootspring terminal 6 "bootspring.terminal.shell": "default", 7 8 // Auto-focus terminal on command 9 "bootspring.terminal.autoFocus": true 10}

Agent Settings#

1{ 2 // Favorite agents for quick access 3 "bootspring.agents.favorites": [ 4 "frontend-expert", 5 "backend-expert", 6 "testing-expert" 7 ], 8 9 // Show agent descriptions 10 "bootspring.agents.showDescriptions": true 11}

Workflow Settings#

1{ 2 // Show workflow progress notifications 3 "bootspring.workflows.notifications": true, 4 5 // Auto-open workflow panel 6 "bootspring.workflows.autoOpen": true 7}

Terminal Integration#

Using Integrated Terminal#

Open terminal: Ctrl+`

# All Bootspring commands work bootspring generate bootspring agent invoke frontend-expert "Create a component" bootspring status

Dedicated Bootspring Terminal#

Create a dedicated profile in settings:

1{ 2 "terminal.integrated.profiles.linux": { 3 "Bootspring": { 4 "path": "bash", 5 "args": ["-c", "eval \"$(bootspring completions bash)\" && exec bash"], 6 "icon": "rocket" 7 } 8 } 9}

Tasks#

Create .vscode/tasks.json:

1{ 2 "version": "2.0.0", 3 "tasks": [ 4 { 5 "label": "Bootspring: Generate", 6 "type": "shell", 7 "command": "bootspring generate", 8 "problemMatcher": [], 9 "group": "build" 10 }, 11 { 12 "label": "Bootspring: Status", 13 "type": "shell", 14 "command": "bootspring status", 15 "problemMatcher": [] 16 }, 17 { 18 "label": "Bootspring: Quality Check", 19 "type": "shell", 20 "command": "bootspring quality pre-commit", 21 "problemMatcher": ["$eslint-stylish"] 22 } 23 ] 24}

Run tasks: Ctrl+Shift+B

Snippets#

Built-in Snippets#

The extension provides snippets for common patterns:

PrefixDescription
bs-configBootspring config file
bs-agentAgent invocation comment
bs-skillSkill application comment

Custom Snippets#

Add to .vscode/bootspring.code-snippets:

1{ 2 "Bootspring Agent Comment": { 3 "prefix": "bs-ask", 4 "body": [ 5 "// @bootspring-agent: ${1:frontend-expert}", 6 "// ${2:Question or instruction}", 7 "$0" 8 ], 9 "description": "Add agent instruction comment" 10 } 11}

Code Lens#

The extension adds CodeLens features:

Agent Suggestions#

Above complex functions:

šŸ’” Ask frontend-expert about this | šŸ’” Review with code-review-expert

Skill Recommendations#

Above patterns:

āœØ Apply patterns/react-form | āœØ Apply patterns/api-endpoint

Enable/disable in settings:

{ "bootspring.codeLens.enabled": true, "bootspring.codeLens.agents": true, "bootspring.codeLens.skills": true }

Explorer Integration#

Bootspring View#

A dedicated sidebar view showing:

  • Project status
  • Available agents
  • Recent workflows
  • Quick actions

Enable: View ā†’ Open View ā†’ Bootspring

File Decorations#

Files show decorations for:

  • šŸ“‹ CLAUDE.md - Context file
  • āš™ļø bootspring.config.js - Config file
  • šŸ“‚ .bootspring/ - Data directory

Problems Panel#

Bootspring integrates with the Problems panel:

Quality Issues#

After running bootspring quality:

āš  Warning: Missing type annotations (quality/types) āš  Warning: Console.log statements found (quality/logs) ā“˜ Info: Consider extracting to component (quality/complexity)

Configuration Issues#

āœ– Error: Invalid bootspring.config.js (configuration) āš  Warning: Outdated CLAUDE.md (context)

Output Channel#

View Bootspring logs: View ā†’ Output ā†’ Bootspring

Log levels:

  • [INFO] - General information
  • [DEBUG] - Detailed debugging
  • [ERROR] - Errors and issues

Configure logging:

{ "bootspring.logging.level": "info", "bootspring.logging.file": true }

Workspace Configuration#

Multi-Root Workspaces#

Bootspring works with multi-root workspaces:

1// workspace.code-workspace 2{ 3 "folders": [ 4 { "path": "frontend" }, 5 { "path": "backend" }, 6 { "path": "shared" } 7 ], 8 "settings": { 9 "bootspring.workspace.aggregateContext": true 10 } 11}

Per-Folder Settings#

.vscode/settings.json in each folder:

{ "bootspring.project.type": "nextjs", "bootspring.agents.favorites": ["frontend-expert"] }

GitHub Copilot Integration#

Use Bootspring context with Copilot:

Context Sharing#

CLAUDE.md provides context that Copilot can read:

<!-- In CLAUDE.md --> ## Coding Standards - Use TypeScript strict mode - Prefer functional components - Use Tailwind CSS

Copilot sees this context and adapts suggestions.

Complementary Usage#

  1. Copilot - Quick inline completions
  2. Bootspring Agents - Complex architecture decisions
  3. Bootspring Skills - Production patterns

Debugging Integration#

Debug Context Generation#

Launch configuration in .vscode/launch.json:

1{ 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "type": "node", 6 "request": "launch", 7 "name": "Debug Bootspring Generate", 8 "program": "${workspaceFolder}/node_modules/.bin/bootspring", 9 "args": ["generate", "--verbose"], 10 "console": "integratedTerminal" 11 } 12 ] 13}

Remote Development#

Remote - SSH#

Bootspring works over SSH:

  1. Connect to remote
  2. Install Bootspring on remote: npm install -g bootspring
  3. Extension syncs automatically

Dev Containers#

.devcontainer/devcontainer.json:

1{ 2 "name": "Bootspring Dev", 3 "image": "node:20", 4 "features": { 5 "ghcr.io/devcontainers/features/node:1": {} 6 }, 7 "postCreateCommand": "npm install -g bootspring", 8 "customizations": { 9 "vscode": { 10 "extensions": [ 11 "bootspring.bootspring-vscode" 12 ] 13 } 14 } 15}

GitHub Codespaces#

Works automatically in Codespaces:

// .devcontainer/devcontainer.json { "postCreateCommand": "npm install -g bootspring && bootspring init --yes" }

Troubleshooting#

Extension Not Loading#

  1. Check VS Code version (1.80.0+)
  2. Reload window: Ctrl+Shift+P ā†’ "Reload Window"
  3. Check extension output for errors

Commands Not Working#

1# Verify CLI is installed 2bootspring --version 3 4# Check PATH in VS Code terminal 5echo $PATH 6 7# Reinstall if needed 8npm install -g bootspring

Context Not Generating#

  1. Check config file exists
  2. Verify permissions
  3. Check output channel for errors
# Manual test bootspring generate --verbose

Status Bar Missing#

// Check settings { "bootspring.showStatusBar": true }

Performance Issues#

// Reduce auto-generation { "bootspring.autoGenerate": false, "bootspring.codeLens.enabled": false }

Recommended Extensions#

Complementary extensions:

ExtensionPurpose
ESLintCode quality
PrettierFormatting
GitLensGit integration
Error LensInline errors
TODO HighlightTodo tracking

Install together:

code --install-extension dbaeumer.vscode-eslint code --install-extension esbenp.prettier-vscode code --install-extension eamodio.gitlens code --install-extension usernamehw.errorlens code --install-extension wayou.vscode-todo-highlight

Uninstalling#

Remove Extension#

  1. Open Extensions (Ctrl+Shift+X)
  2. Find "Bootspring"
  3. Click "Uninstall"

Or via command line:

code --uninstall-extension bootspring.bootspring-vscode

Clean Settings#

Remove Bootspring settings from:

  • User settings: ~/.config/Code/User/settings.json
  • Workspace settings: .vscode/settings.json

Next Steps#