Vibe Coding
Back to Claude Code

Claude Code / Platform integration

Claude Code and VS Code

VS Code integration is great for selecting context in the editor, viewing diffs, and working with terminal commands.

Claude Code and VS Code key concepts infographic
Claude Code and VS Code key concepts infographic

Getting started with VS Code

The VS Code extension lets Claude read the current file, selection, and project context in the editor, and supports panels, sidebars, terminal mode, session recovery, plugin management, and Chrome automation.

After installation, focus on mastering the prompt box, @ reference, session recovery, mode selector, inline diff and command panel. The editor portal is suitable for small-step modifications and on-the-fly review.

Tip boxes and quotes

You can reference files, folders, or selections in VS Code. The more precise the reference, the less context Claude wastes and the less likely it is to correct the wrong file.

@src/auth/token.ts Please explain the refresh logic here and list the paths that may lead to 401. Don't change the file yet.

Commands and shortcut keys

The official documentation lists commands such as Focus Input, Open Sidebar, Open in Terminal, New Conversation, Resume Closed Session, Insert @mention, Show Log, and Logout.

actionTypical shortcut keys/entrances
focus inputCmd+Esc / Ctrl+Esc
new conversationCmd+N / Ctrl+N, settings need to be enabled.
Reopen a closed sessionCmd+Shift+T / Ctrl+Shift+T。
Insert @mentionOption+K / Alt+K。

Extended settings

Key settings include useTerminal, initialPermissionMode, preferredLocation, autosave, useCtrlEnterToSend, respectGitIgnore, allowDangerouslySkipPermissions, environment variables, etc.

Don’t enable permission mode randomly

initialPermissionMode can be set to default, plan, acceptEdits or bypassPermissions. Bypass requires an additional switch and should only be used in an isolated environment.

Complete usage points

Supplement the core concepts, operation sequences, permission boundaries and verification requirements that are easily compressed and missed in official documents, making it easier for English readers to learn completely by page.

VS Code Supplement

VS Code integration works well for referencing files, selections, current errors, and open contexts within the editor. It supports prompt box, sidebar, terminal mode, @ reference, session recovery, inline diff, command panel and some settings.

Recommended workflow: Use @ to reference files or directories precisely; ask for explanation and plan first; make small changes; review in inline diff; then run project commands to verify. For cross-repository or deployment tasks, you should still fall back to the CLI or CI.

Key settings include initial permission mode, whether to use a terminal, preferred display location, autosave, send shortcuts, whether to respect gitignore, environment variables, and whether to allow high-risk bypasses.

Study Checklist

Put the content on this page into real tasks and use the five dimensions of entry, context, permissions, verification and team rules to check whether you have truly mastered it.

Study Checklist

After reading this page, do not just remember the concept name. You should be able to place "Claude Code and VS Code" back into a real Claude Code engineering workflow: where the task starts, what context the system loads, which actions need approval, how the result is verified, and how to roll back when it fails.

If this is a portal or platform page, specifically confirm what contexts this portal can access: local files, cloud repositories, browser logins, team messages, external tools, and whether these contexts are sufficient to complete the verification.

  • Be able to describe in your own words the specific problem this page solves, rather than just reciting the title.
  • Able to write a minimal example task with goals, scope, prohibitions, and acceptance criteria.
  • Be able to determine which information should be put into the current prompt and which should be captured as project rules or configurations.
  • Be able to explain which long-term rules should go into CLAUDE.md, and which runtime behavior should be handled by settings, permissions, Hooks, Skills and MCP.
  • Ability to check diffs, command output, test results, screenshots or PR notes after a task is completed instead of just trusting the natural language summary.

If this page is used for team training, ask learners to complete a small task with Claude Code: read and explain first, submit a plan, make the smallest useful change, and close with real verification commands plus human diff review.