VSCode용 확장 프로그램

Source: Dev.to

VS Code 탐구: 첫 번째 “Hello World” 확장 만들기

Visual Studio Code는 우리가 개발하는 방식을 혁신했으며, 그 가장 큰 강점 중 하나는 확장성에 있습니다. 좋아하는 편집기에 직접 기능을 맞춤화하고 추가할 수 있는 능력은 무한한 가능성을 열어줍니다. 이번 포스트에서는 실전 예제로 “Hello World” 를 중심으로 VS Code 첫 번째 확장을 만드는 여정을 시작합니다. 기본 개념을 이해하고 확장 개발의 첫 발을 내딛을 준비를 해보세요!

왜 VS Code용 확장을 만들어야 할까요?

반복 작업을 위한 맞춤 단축키, 즐겨 사용하는 도구와의 통합, 혹은 여러분의 워크플로우를 이해하는 코드 어시스턴트까지—확장은 바로 이런 것을 가능하게 합니다. 확장은 생산성을 높일 뿐만 아니라, 커뮤니티가 함께 VS Code를 더욱 강력하게 만드는 활기찬 생태계를 조성합니다. 개발자와 테크 리드에게 확장 제작 능력은 프로젝트와 팀의 요구에 맞춰 개발 환경을 직접 설계할 수 있는 힘을 줍니다.

시작하기: 확장의 “Hello World”

시작하려면 Node.js와 npm(또는 yarn)이 설치되어 있어야 합니다. 또한 Yeoman이라는 스캐폴딩 생성기와 VS Code 공식 확장 생성기를 사용하여 프로젝트를 시작합니다.

1. 환경 준비

먼저, Yeoman과 VS Code 확장 생성기를 전역으로 설치합니다:

npm install -g yo generator-code

2. 프로젝트 생성

확장 생성기를 실행합니다. 프로젝트를 설정하기 위해 몇 가지 질문을 합니다:

yo code

지시사항을 따르세요:

• What type of extension do you want to create? – New Extension (TypeScript)를 선택합니다.
• What’s the name of your extension? – hello-world-extension를 입력합니다.
• What’s the identifier of your extension? – 기본값 hello-world-extension을 그대로 둡니다.
• What’s the description of your extension? – VS Code용 간단한 Hello World 확장입니다.
• Initialize a git repository? – Yes(또는 No).
• Bundle the source code with webpack? – Yes.
• Which package manager to use? – npm(또는 yarn).

답변을 마치면 생성기가 확장 디렉터리 구조를 만듭니다.

3. 프로젝트 구조 탐색

생성된 폴더로 이동(cd hello-world-extension)하고 VS Code에서 엽니다:

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 – 디버그 설정.

4. package.json 및 activationEvents 이해

package.json을 열고 다음을 확인합니다:

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

• **activationEvents**는 확장이 언제 활성화될지를 정의합니다.
• **contributes.commands**는 제공되는 명령을 선언합니다.

5. src/extension.ts에 로직 작성

// Importa a API do VS Code
import * as vscode from 'vscode';

// Método de ativação da extensão. Chamado quando a extensão é ativada.
export function activate(context: vscode.ExtensionContext) {

    // Registra o comando definido no package.json
    let disposable = vscode.commands.registerCommand('hello-world-extension.helloWorld', () => {
        // Exibe uma mensagem informativa.
        vscode.window.showInformationMessage('Hello World from Hello World Extension!');
    });

    // Garante que o comando seja descartado ao desativar a extensão.
    context.subscriptions.push(disposable);
}

// Método de desativação da extensão.
export function deactivate() {}

상세 설명

• import * as vscode from 'vscode'; – 전체 VS Code API를 가져옵니다.
• activate(context) – activationEvents에 따라 호출되는 함수.
• vscode.commands.registerCommand – 명령을 등록합니다.
• vscode.window.showInformationMessage – 알림을 표시합니다.
• context.subscriptions.push(disposable) – 명령의 수명 주기를 관리합니다.

다음 단계

1. 확장 프로그램 테스트 – F5 키를 눌러 확장 프로그램이 로드된 새로운 VS Code 창을 엽니다. 명령 팔레트(Ctrl+Shift+P)를 열고 Hello World를 실행합니다.
2. 디버그 – extension.ts에 중단점을 설정하고 실시간 동작을 관찰합니다.
3. 게시 – 만족스러우면 VS Code 공식 가이드를 따라 확장 프로그램을 Marketplace에 게시합니다.

Um novo comando no VS Code

• commandId – package.json에 정의된 command와 일치해야 합니다.
• commandHandler – 명령이 호출될 때 실행되는 함수입니다.
• vscode.window.showInformationMessage(message) – 정보 메시지를 표시합니다.
• context.subscriptions.push(disposable) – 리소스를 관리하고 메모리 누수를 방지합니다.
• deactivate() – 확장을 비활성화할 때 호출됩니다; 간단한 확장의 경우 비워 둘 수 있습니다.

6. 확장 프로그램 실행 및 테스트

**F5**를 눌러 Extension Development Host를 시작합니다. 새 창에서:

1. 명령 팔레트를 엽니다 (Ctrl+Shift+P 또는 Cmd+Shift+P).
2. **“Hello World”**를 입력하고 등록된 명령을 선택합니다.

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

7. 패키징 및 배포 (선택 사항)

확장 프로그램을 공유하려면 vsce 로 패키징하세요:

npm install -g vsce
vsce package

이렇게 하면 .vsix 파일이 생성되며, 수동으로 설치하거나 Marketplace에 게시할 수 있습니다.

결론

축하합니다! VS Code 첫 번째 확장을 만들고 실행했습니다. 우리는 다음을 살펴보았습니다:

• 확장 프로젝트의 기본 구조.
• package.json의 핵심 역할.
• 편집기와 상호 작용하기 위한 vscode API.

이 **“Hello World”**는 시작에 불과합니다. VS Code API를 사용하면 파일 시스템에 접근하고, 편집기를 조작하며, 웹뷰를 만들고, 스니펫을 추가하는 등 다양한 작업을 할 수 있습니다. 맞춤형 확장을 만드는 데 시간을 투자하면 팀의 생산성과 표준화에 큰 이점을 가져다줍니다. 공식 문서를 계속 탐색하고 더 복잡한 기능을 실험해 보세요. 개발 환경을 직접 만들 수 있는 힘은 여러분의 손에 달려 있습니다!