← 8.59.2 →
1613 words Slides

9.1 VS Code Extension

Course: Claude Code - Power User Section: IDE Integrations Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

"Your code editor is where you spend most of your development time. Why switch to a terminal or web browser to use Claude? In this video, we'll set up the Claude Code extension for VS Code and show you how to leverage AI directly where you're already working."

Key Talking Points

1. Why IDE Integration Matters

  • Reduces context switching — stay in your editor
  • Claude sees your open files, selected code, and project structure
  • Seamless workflow for code generation, debugging, refactoring
  • Works with your existing editor shortcuts and settings

What to say: "The Claude Code extension brings Claude's capabilities right into VS Code. You can ask questions about your code, generate new code, debug issues, and write tests — all without leaving your editor."

What to show on screen: Open VS Code with the extension icon visible in the left sidebar.

2. Installation & Setup

  • Requires VS Code 1.98.0 or later
  • Two installation methods: Marketplace search or direct extension ID
  • Sign in with your Anthropic account
  • Grant necessary permissions
  • Select your preferred Claude model
  • Customize initial permission mode

What to say: "Installation is straightforward. Search for 'Claude Code' in the Extensions view, click Install, then sign in. You'll be prompted to select a model — choose based on your use case: Claude Haiku for speed, Claude Opus for complex reasoning."

What to show on screen: - Extensions view with search for "Claude Code" - Installation and sign-in flow - Model selection dialog

3. Accessing the Extension

  • Spark icon in Editor Toolbar (main entry point)
  • "✱ Claude Code" button in Status Bar (bottom right)
  • Command Palette: Cmd+Shift+P → "Claude Code"
  • Multiple ways to open: new tab, new window, or in current panel

What to say: "You have three quick ways to launch Claude Code. The spark icon in your toolbar is the fastest, but if you prefer keyboard shortcuts, Command+Shift+P always works."

What to show on screen: - Click spark icon to open panel - Show Status Bar indicator - Demo Command Palette access

4. Core Features & Workflows

  • Inline code explanations: Select code, ask Claude to explain it
  • Code generation: Describe what you want, Claude writes it
  • Debugging: Paste an error, get solutions
  • Test generation: Ask for unit tests for selected functions
  • Refactoring: Select code, request improvements

What to say: "Whether you're trying to understand legacy code, generate a new feature, fix a bug, or write tests, Claude can help. The extension understands your context — it knows what files are open and what code you've selected."

What to show on screen: Demo 2-3 of these workflows with actual code.

5. Smart File References with @-mentions

  • Fuzzy file matching: @auth matches auth.js
  • Folder references: @src/components/ includes all files
  • Line ranges: @app.ts#5-10 targets specific lines
  • PDF pages: @file.pdf#1-10 for documentation
  • Automatic context building

What to say: "The @-mention system is powerful. You can reference entire folders, specific line ranges, or even pull in documentation. Claude will understand the context you're pointing to."

What to show on screen: - Type @ in prompt box, see autocomplete suggestions - Reference a file with @filename - Reference a code range with @file.ts#10-20 - Show how Claude picks up the context

6. Keyboard Shortcuts & Navigation

  • Cmd+Esc / Ctrl+Esc: Toggle focus between editor and Claude panel
  • Option+K / Alt+K: Insert @-mention quickly
  • Cmd+Shift+Esc / Ctrl+Shift+Esc: Open new tab
  • Shift+Enter: Multi-line input in prompt box
  • Conversation history: Browse by date, search by keyword

What to say: "Master these shortcuts and you'll never break your flow. Option+K is especially useful when you want to reference files without typing the @ symbol manually."

What to show on screen: Use shortcuts during demo to show speed.

7. Permission Modes & Safety

  • Normal mode: Claude requests permission for each action
  • Plan mode: Claude shows plan before executing
  • Auto-accept mode: Claude executes without prompts (use with caution)
  • Toggle mode indicator at bottom of prompt box
  • Understand each mode's use case

What to say: "Permission modes give you control over how aggressive Claude is. Start with Normal mode, switch to Plan mode when you trust the context, and only use Auto-accept in safe scenarios."

What to show on screen: Click permission mode indicator, show dropdown menu, switch modes.

8. Advanced Features

  • Checkpoints: Fork conversations, rewind code to previous states
  • Terminal mode: Run commands directly from Claude panel
  • Conversation management: Multiple tabs, history search
  • Settings customization: Preferred model, autosave, keyboard preferences
  • Chrome integration: Use @browser to interact with web pages

What to say: "These advanced features come in handy as you get more comfortable. Checkpoints let you experiment without fear — you can always rewind. Terminal mode is great for running build scripts or tests."

What to show on screen: - Hover over messages to show Fork/Rewind options - Open settings to show customization options - Demo terminal mode if time permits

Demo Plan

Scenario: Explain and refactor a function, then generate tests

  1. Setup (10s)
  2. Open VS Code with a sample function visible (or paste one)

  3. Open Claude Code panel with spark icon

  4. Explain & Understand (30s)

  5. Select a moderately complex function
  6. Ask Claude: "Explain what this function does"

  7. Show the explanation in the panel

  8. Refactor (45s)

  9. Ask Claude: "How can I refactor this for readability?"
  10. Show Claude's suggestions

  11. Accept one change to demonstrate code insertion

  12. Generate Tests (30s)

  13. Select the function again
  14. Ask Claude: "Write unit tests for this function"

  15. Show test code appearing in editor

  16. Conversation Navigation (15s)

  17. Show conversation history dropdown
  18. Search for a previous message
  19. Demonstrate opening a conversation in a new tab

Total demo time: ~2.5 minutes

Code Examples & Commands

Example 1: Quick Explanation

Select this in editor:
function calculateDiscount(price, percentage) {
  return price * (1 - percentage / 100);
}

Prompt: "Explain this function and any edge cases to watch out for"

Example 2: File Reference

Prompt: "@utils#filterItems Refactor this function to use async/await instead of callbacks"

Claude uses the specific function and understands its context.

Example 3: Folder Context

Prompt: "@src/components/ List all the React hooks used across these components and suggest improvements"

Claude analyzes all files in the folder and provides recommendations.

Example 4: Multi-line Prompt

Press Shift+Enter to create multi-line prompts:

Prompt:
"Given the following requirements:
- Accept user input
- Validate with regex
- Return error messages

Generate a function that does this"

Example 5: Permission Mode Toggle

Click the permission indicator at bottom of prompt box (e.g., "Normal" → "Plan")
Claude will now explain its plan before executing code changes.

Gotchas & Tips

Gotcha 1: Extension Won't Load

  • Ensure VS Code is version 1.98.0 or later
  • Check that you're signed in: look for account indicator in extension panel
  • Restart VS Code if extension doesn't appear after install

Tip 1: Use @-mentions for Precision

  • Instead of pasting 500 lines of code, use @folder/ to reference files
  • Be specific with line ranges: @app.ts#20-40 instead of @app.ts
  • Claude's context window is valuable — target exactly what you need

Tip 2: Leverage Conversation Branches

  • Use "Fork" when you want to try multiple approaches
  • Use "Rewind" to undo code changes while keeping the conversation
  • This lets you experiment without losing context

Tip 3: Terminal Mode for Full-Stack Work

  • Enable "Use Terminal" in settings for seamless build/test workflows
  • Example: Ask Claude to write a test, then run npm test in the terminal
  • Both happen in the same context

Tip 4: Model Selection Matters

  • Claude Haiku: Fast responses, good for simple tasks
  • Claude Opus: Better reasoning, use for complex refactoring or architecture
  • Switch models mid-conversation to balance speed and quality

Tip 5: Permission Mode for Safety

  • Default to Normal mode in unfamiliar code
  • Use Plan mode when you want to review Claude's changes
  • Only use Auto-accept in well-understood, safe scenarios

Gotcha 2: @-mentions with Special Characters

  • If a filename has spaces, use quotes: @"my file.js"
  • Fuzzy matching is smart but doesn't always guess right — be explicit

Lead-out

"The Claude Code VS Code extension turns your editor into an AI-powered development partner. By staying in your editor, using @-mentions for precision, and understanding permission modes, you'll work faster and smarter. In the next video, we'll see how to set up Claude Code in JetBrains IDEs like IntelliJ and PyCharm — the workflow is similar but the setup is slightly different. See you there."

Reference URLs

  • VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code
  • Claude Code Documentation: https://documentation.anthropic.com/en/claude-code
  • VS Code Extension Settings: https://code.visualstudio.com/docs/getstarted/settings

Prep Reading

  • VS Code Extension Architecture (https://code.visualstudio.com/api)
  • Claude Code Permissions & Safety (https://documentation.anthropic.com/en/claude-code/permissions)
  • Best Practices for @-mentions (internal documentation)

Notes for Daniel: Have a sample project with a few moderately complex functions ready before recording. The demo should feel natural — select code, ask Claude a question, show results. Keep talking points conversational; avoid reading directly from the notes. Emphasize that this extension saves time by eliminating context switching. Record at normal speaking pace with clear pauses between sections.