VS Code 통합: IDE에서 Claude Code 활용하기

Claude Code는 VS Code와 네이티브 통합을 제공하여 IDE 내에서 직접 AI 지원 개발을 수행할 수 있습니다. 터미널 기반 CLI와 그래픽 인터페이스를 모두 지원합니다.

VS Code 확장 기능

설치 방법

# VS Code Extensions에서 검색
"Claude Code" 검색 후 설치

# 또는 명령어로 설치
code --install-extension anthropic.claude-code

주요 기능

  • 플랜 모드: Claude의 변경 계획을 수락 전에 검토 및 편집
  • 자동 수락: 편집이 이루어지는 대로 자동 수락
  • @-멘션: 선택한 라인 범위로 파일 참조
  • 대화 히스토리: 이전 대화 접근
  • 다중 탭: 여러 대화를 별도 탭/창에서 열기
  • 실시간 diff: 변경사항을 인라인 diff로 보기 (수락/거부 버튼)
  • 확장된 사고: Claude의 추론 과정 확인

통합 터미널에서 사용

# VS Code 통합 터미널에서 Claude 실행
claude

# 자동으로 IDE 기능과 연동:
# - diff 뷰잉
# - 진단 정보 공유
# - 파일 참조 단축키

외부 터미널 연결

# 외부 터미널에서 VS Code 인스턴스에 연결
/ide

# 또는 연결 상태 확인
/ide status

JetBrains IDE 통합

JetBrains IDE (IntelliJ, WebStorm 등)에서도 Claude Code를 사용할 수 있습니다:

# JetBrains Plugin 마켓에서
"Claude Code" 검색 후 설치

# 터미널에서 연결
claude
/ide connect jetbrains

Emacs 통합

Emacs용 Claude Code IDE 패키지:

# MELPA에서 설치
(use-package claude-code-ide
  :ensure t)

# 주요 기능
# - MCP를 통한 양방향 브릿지
# - 파일 편집 동기화
# - 진단 정보 공유

터미널 설정

지원 터미널

# /terminal-setup 명령어로 설정
/terminal-setup

# 지원 터미널 목록
- iTerm2
- WezTerm
- Ghostty
- Kitty
- Alacritty
- Zed
- Warp
- VS Code 통합 터미널

OSC 8 하이퍼링크 (v2.1.2+)

파일 경로가 클릭 가능한 하이퍼링크로 표시됩니다:

# 터미널에서 파일 경로 클릭 시 해당 파일 열기
src/components/Button.tsx:42  # 클릭하면 42번 줄로 이동

VS Code 확장 고급 기능

탭 배지

  • 권한 배지: 대기 중인 권한 요청 표시
  • 완료 배지: 작업 완료 알림

권한 설정 UI

# 클릭 가능한 목적지 선택기로 권한 설정
# VS Code 설정 패널에서 직접 구성 가능

진단 공유

# IDE의 진단 정보를 Claude와 자동 공유
# TypeScript 에러, ESLint 경고 등

Claude in Chrome (v2.0.72+)

브라우저 제어 기능:

# Chrome 확장 프로그램 설치 후
# Claude Code에서 브라우저 직접 제어 가능

# 예시
"로그인 페이지를 테스트해줘"
# Claude가 Chrome을 열어 테스트 수행

IDE 통합 베스트 프랙티스

  1. 통합 터미널 사용: VS Code 내장 터미널에서 claude 실행
  2. diff 뷰 활용: 변경사항을 시각적으로 검토
  3. @-멘션 적극 활용: 특정 파일/라인 참조시 정확한 컨텍스트 제공
  4. 다중 탭 활용: 병렬 작업시 별도 대화 유지
  5. 진단 자동 공유: IDE 에러를 Claude가 즉시 인식

참고 자료: