VS Code Integration: Seamless AI-Assisted Development

While Claude Code runs in the terminal, integrating it with VS Code creates a powerful development environment. This guide shows you how to set up the ultimate AI-assisted workflow.

Terminal Integration

Using VS Code's Integrated Terminal

The simplest integration is running Claude Code in VS Code's terminal:

1. Open VS Code
2. Press Ctrl+` to open terminal
3. Run claude or ccjk

Split Terminal Workflow

Create a productive split-screen setup:

┌─────────────────────────────────────────────────────────┐
│                    VS Code Editor                        │
│  ┌─────────────────────────────────────────────────────┐│
│  │                                                      ││
│  │              Your Code Files                         ││
│  │                                                      ││
│  └─────────────────────────────────────────────────────┘│
│  ┌──────────────────────┬──────────────────────────────┐│
│  │   Claude Code        │    Regular Terminal          ││
│  │   (AI Assistant)     │    (npm, git, etc.)          ││
│  └──────────────────────┴──────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

Set up with keyboard shortcut:

hljs json
// keybindings.json
{
  "key": "ctrl+shift+c",
  "command": "workbench.action.terminal.newWithProfile",
  "args": {
    "profileName": "Claude Code"
  }
}

VS Code Settings

Recommended Settings

hljs json
// settings.json
{
  // Terminal settings for Claude Code
  "terminal.integrated.profiles.linux": {
    "Claude Code": {
      "path": "bash",
      "args": ["-c", "ccjk"],
      "icon": "robot"
    }
  },

  // Auto-save for real-time AI awareness
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // Show file changes immediately
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true
  },

  // Editor settings for AI collaboration
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // Git integration
  "git.enableSmartCommit": true,
  "git.autofetch": true
}

Workspace Settings

Create project-specific settings:

hljs json
// .vscode/settings.json
{
  "terminal.integrated.defaultProfile.linux": "Claude Code",

  // Project-specific excludes
  "files.exclude": {
    "**/.claude": false,  // Show .claude folder
    "**/node_modules": true
  },

  // Search excludes (matches .claudeignore)
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true
  }
}

Keyboard Shortcuts

Essential Keybindings

hljs json
// keybindings.json
[
  // Quick access to Claude Code terminal
  {
    "key": "ctrl+alt+c",
    "command": "workbench.action.terminal.focus"
  },

  // Toggle between editor and terminal
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },

  // Copy selection to clipboard (for pasting to Claude)
  {
    "key": "ctrl+shift+y",
    "command": "editor.action.clipboardCopyAction"
  },

  // Open file at cursor (when Claude mentions a file)
  {
    "key": "ctrl+shift+o",
    "command": "workbench.action.quickOpen"
  }
]

Tasks Integration

Create VS Code Tasks

hljs json
// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "AI: Review Current File",
      "type": "shell",
      "command": "ccjk review ${file}",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "problemMatcher": []
    },
    {
      "label": "AI: Generate Tests",
      "type": "shell",
      "command": "ccjk test generate ${file}",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "AI: Document Function",
      "type": "shell",
      "command": "ccjk docs function ${file}:${lineNumber}",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "AI: Explain Selection",
      "type": "shell",
      "command": "echo '${selectedText}' | ccjk explain",
      "presentation": {
        "reveal": "always"
      }
    }
  ]
}

Run Tasks with Shortcuts

hljs json
// keybindings.json
[
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "AI: Review Current File"
  },
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.tasks.runTask",
    "args": "AI: Generate Tests"
  }
]

Snippets for AI Prompts

Create Prompt Snippets

hljs json
// .vscode/claude.code-snippets
{
  "AI Review Request": {
    "prefix": "aireview",
    "body": [
      "// AI Review Request:",
      "// Please review this code for:",
      "// - ${1:Correctness}",
      "// - ${2:Performance}",
      "// - ${3:Security}",
      "// - ${4:Best practices}",
      "$0"
    ],
    "description": "Template for AI code review request"
  },

  "AI Implementation Request": {
    "prefix": "aiimpl",
    "body": [
      "// AI Implementation Request:",
      "// Task: ${1:description}",
      "// Requirements:",
      "// - ${2:requirement 1}",
      "// - ${3:requirement 2}",
      "// Constraints:",
      "// - ${4:constraint}",
      "$0"
    ],
    "description": "Template for AI implementation request"
  },

  "AI Debug Request": {
    "prefix": "aidebug",
    "body": [
      "// AI Debug Request:",
      "// Expected: ${1:expected behavior}",
      "// Actual: ${2:actual behavior}",
      "// Steps to reproduce:",
      "// 1. ${3:step}",
      "$0"
    ],
    "description": "Template for AI debugging request"
  }
}

Extension Recommendations

Recommended Extensions

Create an extensions file:

hljs json
// .vscode/extensions.json
{
  "recommendations": [
    // Essential
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",

    // Git integration
    "eamodio.gitlens",
    "mhutchie.git-graph",

    // Productivity
    "streetsidesoftware.code-spell-checker",
    "usernamehw.errorlens",
    "gruntfuggly.todo-tree",

    // Terminal enhancement
    "tyriar.sort-lines",

    // Markdown (for AI responses)
    "yzhang.markdown-all-in-one",
    "bierner.markdown-mermaid"
  ]
}

Workflow Examples

Workflow 1: AI-Assisted Feature Development

1. Plan (in Claude Code terminal):

   You: I need to add user authentication. Let's plan the approach.
   

2. Implement (Claude edits files, you watch in VS Code):

   You: Implement the login endpoint first.
   

3. Review (use VS Code's diff view):

   • Git changes appear in Source Control panel
   • Review each file's changes

4. Test (split terminal):

   # Terminal 1: Claude Code
   You: Generate tests for the auth module
   
   # Terminal 2: Run tests
   npm test
   

Workflow 2: Debugging Session

1. Reproduce (in VS Code):

   • Set breakpoints
   • Run debugger

2. Analyze (in Claude Code):

   You: The app crashes at line 45 of userService.js.
   Here's the stack trace: [paste]
   

3. Fix (Claude suggests, you verify):

   • Claude proposes fix
   • You review in VS Code
   • Accept or modify

Workflow 3: Code Review

1. Open PR diff in VS Code (GitLens)

2. Request review in Claude Code:

   You: Review the changes in this PR focusing on security
   

3. Apply suggestions:

   • Claude identifies issues
   • You navigate to files in VS Code
   • Make corrections

Tips and Tricks

1. Quick File Navigation

When Claude mentions a file:

• Ctrl+P → type filename
• Click file path in terminal (if supported)

2. Copy Code Efficiently

Select code in VS Code:

• Ctrl+Shift+Y → copies with formatting
• Paste into Claude Code conversation

3. Side-by-Side Comparison

When Claude generates code:

1. Copy to clipboard
2. Ctrl+N for new file
3. Paste and compare with original

4. Terminal History

Navigate Claude Code history:

• ↑ / ↓ for previous commands
• Ctrl+R for search

Troubleshooting

Terminal Not Responding

hljs bash
# Reset terminal
Ctrl+C  # Cancel current operation
clear   # Clear screen

File Changes Not Detected

hljs json
// settings.json
{
  "files.watcherExclude": {
    // Remove problematic excludes
  }
}

Performance Issues

hljs json
// settings.json
{
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true
  },
  "search.followSymlinks": false
}

Conclusion

VS Code and Claude Code together create a powerful development environment. The key is setting up efficient workflows that let you:

• Quickly switch between coding and AI conversation
• Review AI-generated changes easily
• Run tests and commands alongside AI assistance

Start with the basic terminal integration, then gradually add tasks, snippets, and shortcuts as you develop your workflow.

Next: Explore Multi-Provider Support to use different AI models with CCJK.