VSCode 확장 프로그램

Source: Dev.to

위에 제공된 텍스트를 한국어로 번역해 주세요. (코드 블록, URL 및 마크다운 구문은 그대로 유지하고, 본문 내용만 번역해 주세요.)

사전 요구 사항

• Node.js와 npm(또는 yarn)이 설치되어 있어야 합니다.
• Yeoman – 스캐폴딩 도구.
• 공식 VS Code 확장 생성기.

Yeoman 및 VS Code 확장 생성기 설치

npm install -g yo generator-code

확장 프로그램 생성기 실행

yo code

몇 가지 질문이 표시됩니다. 다음 옵션을 선택하세요 (또는 원하는 대로 조정):

답변을 마치면 생성기가 확장 프로그램용 디렉터리 구조를 생성합니다.

프로젝트 열기

cd hello-world-extension
code .

구조는 다음과 비슷하게 보일 것입니다:

hello-world-extension/
├── .vscode/
│   └── launch.json
├── .gitignore
├── .vscodeignore
├── README.md
├── package.json
├── tsconfig.json
├── src/
│   └── extension.ts
└── webpack.config.js

• package.json – 확장 프로그램의 메타데이터, 의존성, 그리고 activationEvents와 contributes 섹션을 포함합니다.
• src/extension.ts – 확장 프로그램의 주요 로직이 위치하는 파일입니다.
• .vscode/launch.json – 확장 프로그램 디버깅을 위한 설정 파일입니다.

package.json 이해하기

package.json 파일을 열고 다음 섹션을 찾으세요:

"activationEvents": [
  "onCommand:hello-world-extension.helloWorld"
],
"contributes": {
  "commands": [
    {
      "command": "hello-world-extension.helloWorld",
      "title": "Hello World"
    }
  ]
}

• activationEvents – 확장이 언제 활성화될지를 정의합니다. 여기서는 hello-world-extension.helloWorld 명령이 실행될 때 활성화됩니다.
• contributes.commands – 확장이 제공하는 명령들을 선언합니다.

핵심 로직 (src/extension.ts)

// Import the VS Code API
import * as vscode from 'vscode';

// Extension activation method. Called when the extension is activated.
export function activate(context: vscode.ExtensionContext) {

    // Register the command defined in package.json
    // The first argument is the command ID, the second is the function to execute.
    const disposable = vscode.commands.registerCommand(
        'hello-world-extension.helloWorld',
        () => {
            // When the command is executed, display an informative message.
            vscode.window.showInformationMessage('Hello World from Hello World Extension!');
        }
    );

    // Add the registered command to the extension's context.
    // This ensures the command is disposed of when the extension is deactivated.
    context.subscriptions.push(disposable);
}

// Extension deactivation method. Called when the extension is deactivated.
export function deactivate() {}

상세 설명

확장 프로그램 테스트

1. F5 키를 누릅니다. 이것은 Extension Development Host 라는 새 VS Code 창을 열고, 확장 프로그램을 로드합니다.
2. 새 창에서:
   • 명령 팔레트를 엽니다 (Ctrl+Shift+P 또는 Cmd+Shift+P).
   • Hello World 를 입력하고 등록한 명령을 선택합니다.

상단 오른쪽에 “Hello World from Hello World Extension!” 메시지가 표시됩니다.

패키징 및 배포

확장 기능을 공유하려면 vsce(Visual Studio Code Extension Manager)를 사용하여 패키징할 수 있습니다:

npm install -g vsce
vsce package

이 명령은 .vsix 파일을 생성하며, 이를 Visual Studio Marketplace에 게시하거나 비공개로 배포할 수 있습니다.

다음 단계는?

• 더 많은 명령, UI 기여 또는 언어 기능을 추가하세요.
• 고급 기능을 위해 VS Code API 문서를 살펴보세요.
• 확장을 게시하고 커뮤니티로부터 피드백을 받아보세요.

행복한 코딩 되세요! 🚀

VS Code 확장 프로그램 빌드 및 패키징

VS Code 확장 CLI 설치

npm install -g vsce

확장 프로그램 패키징

vsce package

위 명령을 실행하면 .vsix 파일이 생성됩니다. 이 파일은:

• VS Code에 수동으로 설치하거나
• VS Code 마켓플레이스에 게시할 수 있습니다.

축하합니다!

첫 번째 VS Code 확장 프로그램을 만들고 실행했습니다. 이 튜토리얼에서 살펴본 내용:

• 확장 프로젝트의 기본 구조.
• **package.json**의 핵심 역할.
• VS Code API를 사용해 편집기와 상호 작용하는 방법.

클래식한 “Hello World” 확장은 시작에 불과합니다. VS Code API를 활용하면 다음을 할 수 있습니다:

• 파일 시스템에 접근하기.
• 편집기 조작하기 (예: 문서 편집, 명령 추가).
• 풍부한 UI를 위한 웹뷰 만들기.
• 스니펫, 진단 및 그 외 다양한 기능 추가.

왜 맞춤형 확장을 구축해야 할까요?

• 팀 생산성을 향상시킵니다.
• 코딩 표준 및 모범 사례 워크플로를 강제합니다.
• 코드베이스에 맞춤화된 공유 도구를 제공합니다.

다음 단계

1. 공식 VS Code 문서 탐색 – 예제와 API 레퍼런스로 가득합니다.
2. 실험 – 새로운 명령, 상태‑바 항목, 혹은 사용자 정의 트리 뷰를 추가해 보세요.
3. 배포 – 준비가 되면 확장을 Marketplace에 배포하여 팀 전체가 혜택을 누릴 수 있도록 하세요.

개발 환경을 직접 설계할 수 있는 힘은 여러분에게 있습니다—계속 구축해 나가세요!