Skip to content

QUICKSTART.md

Latest commit

 

History

History
81 lines (64 loc) · 2.49 KB

QUICKSTART.md

File metadata and controls

81 lines (64 loc) · 2.49 KB
Raw

Quick Start Guide

Running the Extension for the First Time

  1. Install dependencies (if you haven't already):

    npm install

  2. Build the extension:

    npm run build

  3. Start watch mode (in a terminal):

    npm run watch

    Keep this terminal running - it will rebuild automatically when you make changes.

  4. Press F5 in VSCode/Cursor

    • In the "Run and Debug" dropdown, select "Run Extension"
    • Press F5 or click the green play button
    • A new "Extension Development Host" window will open

  5. Open the OpenCode sidebar:

    • In the new window, look for the OpenCode icon in the Activity Bar (left sidebar)
    • Click it to open the OpenCode panel
    • You should see "Hello from Opencode"

Development Loop

For Extension Code Changes (TypeScript backend)

  1. Make changes to files in src/ (e.g., extension.ts, OpenCodeViewProvider.ts)
  2. Save the file
  3. In the Extension Development Host window:
    • Press Cmd+R (Mac) or Ctrl+R (Windows/Linux)
    • Or open Command Palette (Cmd+Shift+P) and run "Developer: Reload Window"

For Webview UI Changes (React frontend)

  1. Make changes to files in src/webview/ (e.g., App.tsx, App.css)
  2. Save the file
  3. Changes should hot-reload automatically in the sidebar!
    • No need to reload the window

Debugging

Extension Code

  • Set breakpoints in src/extension.ts or src/OpenCodeViewProvider.ts
  • Debug panel will show variables and call stack

Webview Code

  1. In the Extension Development Host window, open Command Palette
  2. Run "Developer: Toggle Developer Tools"
  3. In the Console, select "active frame" from the dropdown
  4. Now you can debug the React code, see console.logs, etc.

Building for Production

npm run build

This creates optimized builds in:

  • dist/ - Extension code
  • out/ - Webview UI

Troubleshooting

Extension doesn't appear in Activity Bar

  • Check the Debug Console in the main VSCode window for errors
  • Make sure npm run build completed successfully
  • Try closing and reopening the Extension Development Host window

Webview shows blank/white screen

  • Open Developer Tools (Command Palette > "Developer: Toggle Developer Tools")
  • Check Console for errors
  • Make sure out/main.js and out/main.css exist

Hot reload not working

  • Make sure npm run watch is running (it starts automatically with F5)
  • Check the Terminal panel in the main VSCode window
  • Try manually running npm run watch in a terminal