첫 번째 확장 프로그램 만들기

Name: Visual Studio Code
Author: Microsoft

이 섹션에서는 확장을 구축하기 위한 기본 개념을 알려드립니다. Node.js와 Git이 설치되어 있는지 확인하세요.

먼저 Yeoman과 VS Code 확장 생성기를 사용하여 개발 준비가 된 TypeScript 또는 JavaScript 프로젝트를 스캐폴딩합니다.

나중에 사용할 Yeoman을 설치하고 싶지 않다면 다음 명령을 실행하십시오.
```
npx --package yo --package generator-code -- yo code
```
대신 Yeoman을 전역으로 설치하여 반복적으로 실행하는 것을 쉽게 하려면 다음 명령을 실행하십시오.
```
npm install --global yo generator-code

yo code
```

TypeScript 프로젝트의 경우 다음 필드를 채우십시오.

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Y
# ? Which bundler to use? unbundled
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

편집기에서 src/extension.ts를 열고 F5를 누르거나 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 Debug: Start Debugging 명령을 실행합니다. 이렇게 하면 새 **Extension Development Host** 창에서 확장 프로그램이 컴파일되고 실행됩니다.

새 창에서 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 Hello World 명령을 실행합니다.

Hello World from HelloWorld! 알림이 표시되어야 합니다. 성공입니다!

디버그 창에서 Hello World 명령을 볼 수 없다면 package.json 파일을 확인하고 engines.vscode 버전이 설치된 VS Code 버전과 호환되는지 확인하십시오.

확장 프로그램 개발

메시지를 변경해 보겠습니다.

extension.ts에서 메시지를 "Hello World from HelloWorld!"에서 "Hello VS Code"로 변경합니다.
새 창에서 Developer: Reload Window를 실행합니다.
다시 Hello World 명령을 실행합니다.

업데이트된 메시지가 표시되어야 합니다.

시도해 볼 수 있는 몇 가지 아이디어는 다음과 같습니다.

명령 팔레트에서 Hello World 명령의 이름을 바꿉니다.
기여하여 현재 시간을 정보 메시지로 표시하는 다른 명령을 추가합니다. 기여 포인트는 명령, 메뉴 또는 키 바인딩을 확장에 추가하는 것과 같이 VS Code를 확장하기 위해 package.json 확장 프로그램 매니페스트에 정적으로 선언하는 것입니다.
vscode.window.showInformationMessage를 다른 VS Code API 호출로 대체하여 경고 메시지를 표시합니다.

확장 프로그램 디버깅

VS Code의 내장 디버깅 기능을 통해 확장을 쉽게 디버깅할 수 있습니다. 줄 옆의 여백을 클릭하여 중단점을 설정하면 VS Code에서 해당 중단점에 도달합니다. 편집기에서 변수에 마우스를 올리거나 왼쪽의 Run and Debug 뷰를 사용하여 변수 값을 확인할 수 있습니다. Debug Console을 사용하면 식을 평가할 수 있습니다.

VS Code에서 Node.js 앱 디버깅에 대한 자세한 내용은 Node.js 디버깅 주제에서 확인할 수 있습니다.

다음 단계

다음 주제인 확장 프로그램 해부에서는 Hello World 샘플의 소스 코드를 더 자세히 살펴보고 주요 개념을 설명할 것입니다.

이 튜토리얼의 소스 코드는 다음에서 찾을 수 있습니다: https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample. 확장 프로그램 가이드 섹션에는 다른 샘플이 포함되어 있으며, 각 샘플은 다른 VS Code API 또는 기여 포인트를 보여주고 UX 가이드라인의 권장 사항을 따릅니다.

JavaScript 사용

이 가이드에서는 주로 TypeScript를 사용하여 VS Code 확장을 개발하는 방법을 설명합니다. TypeScript가 VS Code 확장을 개발하는 데 최상의 경험을 제공한다고 믿기 때문입니다. 그러나 JavaScript를 선호하는 경우 helloworld-minimal-sample을 사용하여 따라갈 수 있습니다.

UX 지침

지금 UX 가이드라인을 검토하여 VS Code 모범 사례를 따르도록 확장 프로그램 사용자 인터페이스를 디자인하기 시작하는 것이 좋습니다.

12/10/2025