VS Code API 버전(engines.vscode)은 어떻게?

사용하는 API 최소버전에 맞춰 package.json의 engines를 올리고, 릴리스마다 vscode 타입 package와 호환표를 맞춥니다.

WebView vs TreeView·상태는?

WebView는 UI 자유도가 높고 보안·메시지 passing이 필요, TreeView/QuickPick는 표준 UX에 맞는 단순 작업이 빠릅니다.

LSP는 확장과 어떻게 연결하나요?

별도 LanguageClient·서버 프로세스 spawn, activationEvents·포트/IPC·재시작 정책을 정하고, monorepo면 워크스페이스 루트를 명확히 합니다.

배포(마켓플레이스) 전 체크는?

아이콘·README·CHANGELOG·라이선스, PII/네트워크 권한 최소화, vsce 패키징, 스모크 on Insiders/Stable로 검증하세요.

VS Code 확장 개발 완벽 가이드 | Extension API·Commands

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 고급

이 글의 핵심

VS Code 확장을 개발하는 완벽 가이드. Extension API, Commands, WebView, Language Server, 배포까지 실전 예제로 정리. VS Code·Extension·TypeScript 중심으로 설명합니다.

이 글의 핵심

VS Code 확장을 개발하는 완벽 가이드입니다. Extension API, Commands, WebView, Language Server, 배포까지 실전 예제로 정리했습니다.

실무 경험 공유: 반복 작업을 자동화하는 VS Code 확장을 개발하면서, 팀 생산성이 30% 향상된 경험을 공유합니다.

들어가며: “반복 작업이 많아요”

실무 문제 시나리오

시나리오 1: 코드 스니펫이 부족해요

수동 입력이 번거롭습니다. 확장으로 자동화할 수 있습니다. 시나리오 2: 커스텀 기능이 필요해요

기본 기능은 제한적입니다. 확장으로 원하는 기능을 추가할 수 있습니다. 시나리오 3: 팀 워크플로우가 복잡해요

표준화가 필요합니다. 확장으로 워크플로우를 자동화할 수 있습니다.

1. VS Code Extension이란?

핵심 특징

VS Code Extension은 에디터 기능을 확장합니다. 주요 기능:

Commands: 커스텀 명령
Language Support: 문법 강조, 자동완성
WebView: 커스텀 UI
Debugger: 디버깅 지원
Theme: 색상 테마

2. 프로젝트 설정

설치

npm install -g yo generator-code
yo code

프로젝트 구조

my-extension/
├── src/
│   └── extension.ts
├── package.json
└── tsconfig.json

3. 기본 Extension

extension.ts

// src/extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
  console.log('Extension activated!');
  const disposable = vscode.commands.registerCommand(
    'myextension.helloWorld',
    () => {
      vscode.window.showInformationMessage('Hello from My Extension!');
    }
  );
  context.subscriptions.push(disposable);
}
export function deactivate() {}

package.json

{
  "name": "my-extension",
  "displayName": "My Extension",
  "description": "My awesome extension",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "activationEvents": [],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "myextension.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}

4. Commands

텍스트 변환

const disposable = vscode.commands.registerCommand(
  'myextension.toUpperCase',
  () => {
    const editor = vscode.window.activeTextEditor;
    if (editor) {
      const selection = editor.selection;
      const text = editor.document.getText(selection);
      editor.edit((editBuilder) => {
        editBuilder.replace(selection, text.toUpperCase());
      });
    }
  }
);

파일 생성

vscode.commands.registerCommand('myextension.createComponent', async () => {
  const name = await vscode.window.showInputBox({
    prompt: 'Component name',
  });
  if (!name) return;
  const content = `
import React from 'react';
export default function ${name}() {
  return <div>${name}</div>;
}
`;
  const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
  const filePath = vscode.Uri.joinPath(
    workspaceFolder!.uri,
    'src',
    'components',
    `${name}.tsx`
  );
  await vscode.workspace.fs.writeFile(
    filePath,
    Buffer.from(content, 'utf8')
  );
  const document = await vscode.workspace.openTextDocument(filePath);
  await vscode.window.showTextDocument(document);
});

5. WebView

vscode.commands.registerCommand('myextension.showWebview', () => {
  const panel = vscode.window.createWebviewPanel(
    'myWebview',
    'My Webview',
    vscode.ViewColumn.One,
    {
      enableScripts: true,
    }
  );
  panel.webview.html = getWebviewContent();
  panel.webview.onDidReceiveMessage(
    (message) => {
      switch (message.command) {
        case 'alert':
          vscode.window.showInformationMessage(message.text);
          return;
      }
    },
    undefined,
    context.subscriptions
  );
});
function getWebviewContent() {
  return `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
      </head>
      <body>
        <h1>Hello from Webview!</h1>
        <button onclick="sendMessage()">Click me</button>
        <script>
          const vscode = acquireVsCodeApi();
          function sendMessage() {
            vscode.postMessage({
              command: 'alert',
              text: 'Hello from Webview!'
            });
          }
        </script>
      </body>
    </html>
  `;
}

6. Language Support

Syntax Highlighting

// package.json
{
  "contributes": {
    "languages": [
      {
        "id": "mylang",
        "extensions": [.mylang],
        "aliases": [MyLang]
      }
    ],
    "grammars": [
      {
        "language": "mylang",
        "scopeName": "source.mylang",
        "path": "./syntaxes/mylang.tmLanguage.json"
      }
    ]
  }
}

Code Completion

const provider = vscode.languages.registerCompletionItemProvider('javascript', {
  provideCompletionItems(document, position) {
    const completionItem = new vscode.CompletionItem('console.log');
    completionItem.insertText = new vscode.SnippetString('console.log($1);');
    completionItem.documentation = new vscode.MarkdownString('Log to console');
    return [completionItem];
  },
});
context.subscriptions.push(provider);

7. 설정

package.json

{
  "contributes": {
    "configuration": {
      "title": "My Extension",
      "properties": {
        "myextension.enable": {
          "type": "boolean",
          "default": true,
          "description": "Enable My Extension"
        },
        "myextension.apiKey": {
          "type": "string",
          "default": "",
          "description": "API Key"
        }
      }
    }
  }
}

사용

const config = vscode.workspace.getConfiguration('myextension');
const isEnabled = config.get('enable');
const apiKey = config.get('apiKey');

8. 배포

VSCE

npm install -g @vscode/vsce
vsce package
vsce publish

Marketplace

https://marketplace.visualstudio.com/manage
Publisher 생성
Extension 업로드

정리 및 체크리스트

핵심 요약

VS Code Extension: 에디터 확장
Commands: 커스텀 명령
WebView: 커스텀 UI
Language Support: 문법 강조, 자동완성
설정: 사용자 설정
배포: Marketplace

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

VS Code, Extension, TypeScript, API, Development, Tools, Productivity

자주 묻는 질문 (FAQ)

Q. TypeScript를 배워야 하나요?

A. 네, VS Code Extension은 TypeScript로 개발합니다.

Q. 수익화가 가능한가요?

A. Marketplace는 무료지만, 별도 라이선스 모델을 사용할 수 있습니다.

Q. 테스트는 어떻게 하나요?

A. VS Code Extension Test Runner를 사용합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 인기 확장이 안정적으로 운영되고 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「VS Code 확장 개발 완벽 가이드 | Extension API·Commands·WebView·배포·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「VS Code 확장 개발 완벽 가이드 | Extension API·Commands·WebView·배포·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “반복 작업이 많아요”

실무 문제 시나리오

표준화가 필요합니다. 확장으로 워크플로우를 자동화할 수 있습니다.

1. VS Code Extension이란?

핵심 특징

2. 프로젝트 설정

설치

프로젝트 구조

3. 기본 Extension

extension.ts

package.json

4. Commands

텍스트 변환

파일 생성

5. WebView

6. Language Support

Syntax Highlighting

Code Completion

7. 설정

package.json

사용

8. 배포

VSCE

Marketplace

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. TypeScript를 배워야 하나요?

Q. 수익화가 가능한가요?

Q. 테스트는 어떻게 하나요?

Q. 프로덕션에서 사용해도 되나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?