DFCode VS Code Extension

VS Code extension for DFCode AI coding agent.

Features

• 💬 Chat Interface: Interactive AI chat directly in VS Code sidebar
• 🎯 Code Actions: Explain, refactor, document, and fix code with one click
• 🔧 File Operations: Apply code changes directly from chat
• 🖥️ Terminal Integration: View command outputs in chat
• 🔄 Real-time Streaming: See AI responses as they generate

Prerequisites

1. Install DFCode CLI globally:

   npm install -g dfcode
   # or
   bun install -g dfcode
   

2. Configure your API keys for LLM providers

Installation

From Source

1. Build the extension:

   bun install
   bun run compile --cwd packages/vscode
   

2. Package the extension:

   cd packages/vscode
   vsce package
   

3. Install in VS Code:

   • Open VS Code
   • Go to Extensions view (Ctrl+Shift+X)
   • Click "..." menu → "Install from VSIX"
   • Select the generated .vsix file

Development Mode

1. Open this folder in VS Code
2. Press F5 to launch Extension Development Host
3. A new VS Code window will open with the extension loaded

Usage

Opening Chat

• Click the DFCode icon in the Activity Bar (left sidebar)
• Or use keyboard shortcut: Ctrl+Shift+D / Cmd+Shift+D

Code Actions

Select code in the editor, right-click and choose:

• DFCode: Explain Code - Get explanation of selected code
• DFCode: Refactor Code - Get refactored version
• DFCode: Generate Documentation - Add doc comments
• DFCode: Fix Issues - Find and fix problems

Configuration

Open VS Code Settings (Ctrl+,) and search for "DFCode":

Provider config file locations used by the extension:

Architecture

VS Code Extension
├── Core
│   └── ServerManager - Manages dfcode server lifecycle
├── Chat
│   ├── Panel - Webview panel for chat UI
│   └── Webview - HTML/CSS/JS for chat interface
└── Commands
    ├── CodeActions - Editor context menu commands
    └── Index - Command registration

Development

Project Structure

packages/vscode/
├── src/
│   ├── extension.ts      # Extension entry point
│   ├── core/
│   │   └── server.ts     # Server management
│   ├── chat/
│   │   ├── panel.ts      # Chat panel logic
│   │   └── webview.ts    # Webview HTML generator
│   └── commands/
│       ├── index.ts      # Command registration
│       └── codeActions.ts # Code action handlers
├── package.json          # Extension manifest
└── tsconfig.json         # TypeScript config

Building

# Compile TypeScript
bun run compile --cwd packages/vscode

# Watch mode for development
bun run watch --cwd packages/vscode

# Type check
bun run typecheck --cwd packages/vscode

Debugging

1. Open packages/vscode in VS Code
2. Go to Run and Debug view (Ctrl+Shift+D)
3. Select "Run Extension" and press F5
4. A new VS Code window opens with the extension loaded
5. Set breakpoints in the source code

License

MIT