Visual Studio Code

​

VS Code 확장 프로그램 (베타)

베타 버전으로 제공되는 VS Code 확장 프로그램을 사용하면 IDE에 직접 통합된 네이티브 그래픽 인터페이스를 통해 Claude의 변경 사항을 실시간으로 볼 수 있습니다. VS Code 확장 프로그램은 터미널보다 시각적 인터페이스를 선호하는 사용자가 Claude Code에 더 쉽게 접근하고 상호 작용할 수 있도록 합니다.

​

기능

VS Code 확장 프로그램은 다음을 제공합니다:

• 네이티브 IDE 경험: Spark 아이콘을 통해 접근할 수 있는 전용 Claude Code 사이드바 패널
• 편집 기능이 있는 계획 모드: Claude의 계획을 검토하고 수락하기 전에 편집
• 자동 수락 편집 모드: Claude의 변경 사항이 만들어질 때 자동으로 적용
• 파일 관리: @-멘션 파일 또는 시스템 파일 선택기를 사용하여 파일 및 이미지 첨부
• MCP 서버 사용: CLI를 통해 구성된 Model Context Protocol 서버 사용
• 대화 기록: 과거 대화에 쉽게 접근
• 여러 세션: 여러 Claude Code 세션을 동시에 실행
• 키보드 단축키: CLI의 대부분의 단축키 지원
• 슬래시 명령: 확장 프로그램에서 직접 대부분의 CLI 슬래시 명령 접근

​

요구 사항

• VS Code 1.98.0 이상

​

설치

Visual Studio Code 확장 프로그램 마켓플레이스에서 확장 프로그램을 다운로드하고 설치합니다.

​

작동 방식

설치 후 VS Code 인터페이스를 통해 Claude Code 사용을 시작할 수 있습니다:

1. 편집기의 사이드바에서 Spark 아이콘을 클릭하여 Claude Code 패널 열기
2. 터미널에서와 동일한 방식으로 Claude Code에 프롬프트 입력
3. Claude가 코드를 분석하고 변경 사항을 제안하는 것을 관찰
4. 인터페이스에서 직접 편집 검토 및 수락
   • 팁: 사이드바를 더 넓게 드래그하여 인라인 diff를 보고, 클릭하여 전체 세부 정보를 확장합니다

​

타사 제공자 사용 (Vertex 및 Bedrock)

VS Code 확장 프로그램은 Amazon Bedrock 및 Google Vertex AI와 같은 타사 제공자와 함께 Claude Code를 사용하도록 지원합니다. 이러한 제공자로 구성된 경우 확장 프로그램은 로그인을 요청하지 않습니다. 타사 제공자를 사용하려면 VS Code 확장 프로그램 설정에서 환경 변수를 구성합니다:

1. VS Code 설정 열기
2. “Claude Code: Environment Variables” 검색
3. 필요한 환경 변수 추가

​

환경 변수

자세한 설정 지침 및 추가 구성 옵션은 다음을 참조하세요:

• Amazon Bedrock의 Claude Code
• Google Vertex AI의 Claude Code

​

아직 구현되지 않음

다음 기능은 VS Code 확장 프로그램에서 아직 사용할 수 없습니다:

• 전체 MCP 서버 구성: CLI를 통해 MCP 서버를 먼저 구성한 후 확장 프로그램이 이를 사용합니다
• 서브에이전트 구성: CLI를 통해 서브에이전트를 구성하여 VS Code에서 사용
• 체크포인트: 특정 지점에서 대화 상태 저장 및 복원
• 고급 단축키:
  • # 단축키로 메모리에 추가
  • ! 단축키로 bash 명령 직접 실행
• 탭 완성: 탭 키를 사용한 파일 경로 완성

향후 업데이트에서 이러한 기능을 추가하기 위해 작업 중입니다.

​

보안 고려 사항

Claude Code가 VS Code에서 자동 편집 권한이 활성화된 상태로 실행되면 IDE에서 자동으로 실행될 수 있는 IDE 구성 파일을 수정할 수 있습니다. 이는 자동 편집 모드에서 Claude Code를 실행하는 위험을 증가시킬 수 있으며 bash 실행에 대한 Claude Code의 권한 프롬프트를 우회할 수 있습니다. VS Code에서 실행할 때 다음을 고려합니다:

• 신뢰할 수 없는 작업 공간에 대해 VS Code 제한 모드 활성화
• 편집에 대한 수동 승인 모드 사용
• Claude가 신뢰할 수 있는 프롬프트에서만 사용되도록 주의

​

레거시 CLI 통합

우리가 출시한 첫 번째 VS Code 통합은 터미널에서 실행되는 Claude Code가 IDE와 상호 작용할 수 있도록 합니다. 선택 컨텍스트 공유(현재 선택/탭이 Claude Code와 자동으로 공유됨), IDE에서 터미널 대신 diff 보기, 파일 참조 단축키(Mac에서 Cmd+Option+K 또는 Windows/Linux에서 Alt+Ctrl+K를 눌러 @File#L1-99와 같은 파일 참조 삽입), 자동 진단 공유(린트 및 구문 오류)를 제공합니다. 레거시 통합은 VS Code의 통합 터미널에서 claude를 실행할 때 자동으로 설치됩니다. 터미널에서 claude를 실행하면 모든 기능이 활성화됩니다. 외부 터미널의 경우 /ide 명령을 사용하여 Claude Code를 VS Code 인스턴스에 연결합니다. 구성하려면 claude를 실행하고 /config를 입력한 후 diff 도구를 auto로 설정하여 자동 IDE 감지를 수행합니다. 확장 프로그램과 CLI 통합 모두 Visual Studio Code, Cursor, Windsurf 및 VSCodium에서 작동합니다.

​

문제 해결

​

확장 프로그램이 설치되지 않음

• VS Code의 호환 버전(1.85.0 이상)이 있는지 확인합니다
• VS Code에 확장 프로그램을 설치할 권한이 있는지 확인합니다
• 마켓플레이스 웹사이트에서 직접 설치를 시도합니다

​

레거시 통합이 작동하지 않음

• VS Code의 통합 터미널에서 Claude Code를 실행 중인지 확인합니다
• IDE 변형에 대한 CLI가 설치되어 있는지 확인합니다:
  • VS Code: code 명령을 사용할 수 있어야 합니다
  • Cursor: cursor 명령을 사용할 수 있어야 합니다
  • Windsurf: windsurf 명령을 사용할 수 있어야 합니다
  • VSCodium: codium 명령을 사용할 수 있어야 합니다
• 명령이 설치되지 않은 경우:
  1. Cmd+Shift+P(Mac) 또는 Ctrl+Shift+P(Windows/Linux)로 명령 팔레트 열기
  2. “Shell Command: Install ‘code’ command in PATH” 검색(또는 IDE에 해당하는 명령)

추가 도움이 필요하면 문제 해결 가이드를 참조하세요.