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

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

· 3분 읽기 · 수정 고급
VS Code 확장 개발 완벽 가이드 | Extension API·Commands

이 글의 핵심

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

이 글의 핵심

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

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

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

실무에서 마주치는 문제들

코드 스니펫이 부족해요

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

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

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

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

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

정리 및 체크리스트

핵심 요약

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

구현 체크리스트

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

같이 보면 좋은 글

이 글에서 다루는 키워드

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