VS Code 확장 프로그램 개발 가이드은(는) 무엇을 하나요?
VS Code 확장 프로그램을 만들고, 개발하고, 배포합니다.
사용 시기
- VS Code 확장 프로그램, 확장 프로그램 개발, vscode 플러그인
- 처음부터 새 VS Code 확장 프로그램 만들기
- 명령어, 키바인딩 또는 설정을 확장 프로그램에 추가
- VS Code 마켓플레이스에 배포
빠른 시작
# 새 확장 프로그램 스캐폴딩 (권장)
npm install -g yo generator-code
yo code
# 또는 최소한의 수동 설정
mkdir my-extension && cd my-extension
npm init -y && npm install -D typescript @types/vscode
프로젝트 구조
my-extension/
├── package.json # 확장 프로그램 매니페스트 (중요)
├── src/extension.ts # 진입점
├── out/ # 컴파일된 JS (gitignore)
├── images/icon.png # 마켓플레이스용 128x128 PNG
└── .vscodeignore # VSIX에서 제외할 파일
빌드 및 패키징
npm run compile # 한 번 빌드
npm run watch # 감시 모드 (F5로 디버그 실행)
npx @vscode/vsce package # .vsix 파일 생성
완료 기준
- 확장 프로그램이 오류 없이 활성화됨
- 모든 명령어가 등록되고 정상 작동
- 패키지 크기 < 5MB (
.vscodeignore사용) - README.md에 마켓플레이스/GitHub 링크 포함
빠른 문제 해결
| 증상 | 해결 방법 |
|---|---|
| 확장 프로그램이 로드되지 않음 | activationEvents 확인 (VS Code 1.74부터는 기여된 명령어/뷰에 대해 자동 감지) |
| 명령어를 찾을 수 없음 | package.json과 코드에서 명령어 ID 일치 확인 |
| 단축키가 작동하지 않음 | when 절 제거, 충돌 확인 |
참조 문서
모범 사례
명명 일관성
패키지 이름, 설정 키, 명령어 ID, 뷰 ID를 배포 전에 통일하세요.
| 항목 | 예시 |
|---|---|
| 패키지 이름 | copilot-scheduler |
| 설정 키 | copilotScheduler.enabled |
| 명령어 ID | copilotScheduler.createTask |
| 뷰 ID | copilotSchedulerTasks |
중앙 집중식 알림 처리
type NotificationMode = "sound" | "silentToast" | "silentStatus";
function getNotificationMode(): NotificationMode {
const config = vscode.workspace.getConfiguration("myExtension");
return config.get<NotificationMode>("notificationMode", "sound");
}
function notifyInfo(message: string, timeoutMs = 4000): void {
const mode = getNotificationMode();
switch (mode) {
case "silentStatus":
vscode.window.setStatusBarMessage(message, timeoutMs);
break;
case "silentToast":
void vscode.window.withProgress(
{ location: vscode.ProgressLocation.Notification, title: message },
async () => {},
);
break;
default:
void vscode.window.showInformationMessage(message);
}
}
function notifyError(message: string, timeoutMs = 6000): void {
const mode = getNotificationMode();
if (mode === "silentStatus") {
vscode.window.setStatusBarMessage(`⚠ ${message}`, timeoutMs);
console.error(message);
return;
}
void vscode.window.showErrorMessage(message);
}
notificationMode 설정을 노출하여 사용자가 알림 전달 방식을 제어할 수 있도록 하세요.