VS Code 확장 개발 완벽 가이드 | Extension API·Commands·WebView·배포·실전 활용

· 18분 읽기 · 수정 고급
VS Code 확장 개발 완벽 가이드 | Extension API·Commands·WebView·배포·실전 활용

이 글의 핵심

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

프로젝트 구조

아래 코드는 code를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

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

3. 기본 Extension

extension.ts

다음은 typescript를 활용한 상세한 구현 코드입니다. 필요한 모듈을 import하고. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// 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

다음은 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

텍스트 변환

다음은 typescript를 활용한 상세한 구현 코드입니다. 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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());
      });
    }
  }
);

파일 생성

다음은 typescript를 활용한 상세한 구현 코드입니다. 필요한 모듈을 import하고, 비동기 처리를 통해 효율적으로 작업을 수행합니다, 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 typescript를 활용한 상세한 구현 코드입니다. 함수를 통해 로직을 구현합니다, 조건문으로 분기 처리를 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 json를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

Code Completion

아래 코드는 typescript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 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

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

정리 및 체크리스트

핵심 요약

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

구현 체크리스트

  • 프로젝트 생성
  • Commands 구현
  • WebView 추가
  • Language Support 구현
  • 설정 추가
  • 테스트
  • 배포

같이 보면 좋은 글

  • TypeScript 완벽 가이드
  • GitHub Actions 완벽 가이드
  • 생산성 도구 가이드

이 글에서 다루는 키워드

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. 네, 수많은 인기 확장이 안정적으로 운영되고 있습니다.

... 996 lines not shown ... Token usage: 63706/1000000; 936294 remaining Start-Sleep -Seconds 3