IDE Integration
~15 min Iniciante Parte 5

IDE Integration

Integração do Claude Code com VS Code, JetBrains e Web App — como usar Claude diretamente no seu editor com diff inline, atalhos nativos e fluxos híbridos.

Claude Code não se limita ao terminal. As integrações com IDEs trazem o poder do Claude para dentro do editor onde você já passa a maior parte do tempo — com acesso ao arquivo aberto, seleção de código, diff inline e atalhos nativos.

VS Code — Extensão oficial

A extensão oficial do Claude Code para VS Code, publicada pela Anthropic, é a forma mais integrada de usar Claude dentro do editor:

# Instalar via linha de comando
code --install-extension anthropic.claude-code

# Ou buscar na aba Extensions (Ctrl+Shift+X):
# "Claude Code" — publisher: Anthropic

Principais funcionalidades da extensão:

Recurso Como acessar
Chat panel integrado Ícone Claude na barra lateral ou Ctrl+Shift+C
Explicar / Corrigir / Refatorar seleção Selecione código → clique direito → Claude Code
Acesso ao arquivo atual Claude lê automaticamente o arquivo aberto no editor
Diff view integrado Mudanças sugeridas aparecem como diff antes de aplicar
Keybindings nativos Configuráveis via Keyboard Shortcuts do VS Code

Configuração no VS Code

As principais configurações da extensão ficam no settings.json do VS Code:

// .vscode/settings.json (ou settings globais do VS Code)
{
  "claude-code.model": "claude-sonnet-4-6",
  "claude-code.autoApprove": false,
  "claude-code.theme": "dark",
  "claude-code.showDiffBeforeApply": true,
  "claude-code.contextLines": 10
}
Mantenha "autoApprove": false para revisar cada mudança antes de aplicar — especialmente importante em projetos de produção.

JetBrains — IntelliJ, WebStorm, PyCharm

O plugin oficial do Claude Code está disponível para toda a família JetBrains via o marketplace de plugins:

# Via linha de comando (IntelliJ IDEA):
# Não disponível via CLI — instalar pela UI

# Na IDE:
# Settings (Cmd+,) → Plugins → Marketplace
# Buscar: "Claude Code" → Install

# Ou via URL direto do marketplace:
# https://plugins.jetbrains.com/plugin/claude-code

Funcionalidades disponíveis no plugin JetBrains:

Recurso Detalhe
Chat panel integrado Tool window lateral, igual ao VS Code
Contexto do arquivo ativo Claude acessa o arquivo aberto no editor automaticamente
Integração com Run Configurations Claude pode ler erros de run/debug direto do IDE
Acesso a ferramentas do IDE Refatorações, renomeações e navegação integradas
Suporte a todos os IDEs JetBrains IntelliJ IDEA, WebStorm, PyCharm, GoLand, Rider...

Web App — claude.ai/code

A versão browser do Claude Code é acessível sem qualquer instalação, ideal para exploração e aprendizado:

# Acesso direto:
# https://claude.ai/code

# Características:
# - Sem acesso a filesystem local (usa sandbox isolado)
# - Upload de arquivos para análise pontual
# - Bom para: exploração, prototipagem, aprendizado
# - Não requer npm, API key configurada localmente
A Web App não tem acesso ao seu filesystem local. Para trabalho com projetos reais, use a extensão do VS Code, o plugin JetBrains ou o CLI no terminal.

Quando usar cada interface

A escolha certa depende do contexto de trabalho:

Interface Melhor para Pontos fortes
IDE (VS Code / JetBrains) Desenvolvimento ativo dia a dia Contexto visual, diff inline, atalhos nativos
Terminal (CLI) Automação, scripts, CI/CD, agent teams Composabilidade com pipes, scripting, não-interativo
Web App Aprendizado, prototipagem, sem setup Zero instalação, sandbox seguro, acesso via browser

Fluxo híbrido: IDE + Terminal

O padrão mais produtivo combina IDE e terminal de forma complementar:

No IDE

Editar arquivos individuais, pedir explicações sobre código selecionado, aplicar refatorações pontuais com diff visual.

No Terminal

Tarefas multi-arquivo, agent teams, automações com pipes, geração de relatórios e integrações com outras ferramentas CLI.

Combinado

Use o terminal para coordenar operações grandes (ex: migração de módulo inteiro) e o IDE para revisar e ajustar os resultados arquivo a arquivo.

Exercício: configurar a extensão VS Code

Objetivo

Instalar a extensão oficial do Claude Code no VS Code, configurar o modelo padrão como claude-sonnet-4-6, desativar auto-approve e criar um atalho de teclado personalizado para abrir o chat panel.

Solução

# Passo 1 — Instalar a extensão
code --install-extension anthropic.claude-code

# Passo 2 — Adicionar ao settings.json (Cmd+Shift+P → "Open User Settings JSON")
# {
#   "claude-code.model": "claude-sonnet-4-6",
#   "claude-code.autoApprove": false,
#   "claude-code.showDiffBeforeApply": true
# }

# Passo 3 — Adicionar keybinding (Cmd+Shift+P → "Open Keyboard Shortcuts JSON")
# [
#   {
#     "key": "ctrl+shift+c",
#     "command": "claude-code.openChat"
#   }
# ]

Após configurar, teste selecionando um trecho de código no editor, clicando com o botão direito e escolhendo Claude Code: Explain.

Recursos

0%