확장 기능 기능 개요

Visual Studio Code는 확장 기능이 기능을 확장할 수 있는 다양한 방법을 제공합니다. 올바른 기여 지점(Contribution Points)과 VS Code API를 찾는 것이 어려울 수 있습니다. 이 항목에서는 확장 기능 기능을 몇 가지 범주로 나눕니다. 각 범주에는 다음과 같은 내용이 설명되어 있습니다.

확장 기능에서 사용할 수 있는 일부 기능
이러한 기능을 사용하는 것에 대한 자세한 내용으로 연결되는 링크
몇 가지 확장 기능 아이디어

그러나 VS Code의 안정성과 성능을 보장하기 위해 확장 기능에 제한 사항을 적용하기도 합니다. 예를 들어, 확장 기능은 VS Code UI의 DOM에 액세스할 수 없습니다.

일반적인 기능

일반 기능(Common Capabilities)은 모든 확장 기능에서 사용할 수 있는 핵심 기능입니다.

이러한 기능 중 일부는 다음과 같습니다.

명령, 설정, 키 바인딩 또는 컨텍스트 메뉴 항목 등록.
작업 영역 또는 전역 데이터 저장.
알림 메시지 표시.
사용자 입력을 수집하기 위해 빠른 선택(Quick Pick) 사용.
시스템 파일 선택기를 열어 사용자가 파일 또는 폴더를 선택하도록 합니다.
진행률 API(Progress API)를 사용하여 장기 실행 작업을 나타냅니다.

테마

테마(Theming)는 편집기 내 소스 코드의 색상과 VS Code UI의 색상 모두 VS Code의 모양을 제어합니다. VS Code를 녹색의 다양한 음영으로 만들어 Matrix를 코딩하는 것처럼 보이게 만들고 싶었거나, 궁극의 미니멀리스트 회색조 작업 공간을 만들고 싶었다면 테마가 적합합니다.

확장 기능 아이디어

소스 코드의 색상 변경.
VS Code UI의 색상 변경.
기존 TextMate 테마를 VS Code로 이식.
사용자 지정 파일 아이콘 추가.

선언적 언어 기능

선언적 언어 기능(Declarative Language Features)은 괄호 일치, 자동 들여쓰기 및 구문 강조와 같은 프로그래밍 언어에 대한 기본 텍스트 편집 지원을 추가합니다. 이는 코드를 작성하지 않고 선언적으로 이루어집니다. IntelliSense 또는 디버깅과 같은 더 고급 언어 기능의 경우 프로그래밍 언어 기능(Programmatic Language Features)을 참조하십시오.

확장 기능 아이디어

일반적인 JavaScript 스니펫을 확장 기능으로 번들링.
VS Code에 새로운 프로그래밍 언어 알리기.
프로그래밍 언어의 문법 추가 또는 교체.
문법 주입(grammar injections)으로 기존 문법 확장.
기존 TextMate 문법을 VS Code로 이식.

프로그래밍 방식 언어 기능

프로그래밍 언어 기능(Programmatic Language Features)은 호버, 정의로 이동, 진단 오류, IntelliSense 및 CodeLens와 같은 풍부한 프로그래밍 언어 지원을 추가합니다. 이러한 언어 기능은 vscode.languages.* API를 통해 노출됩니다. 확장 기능은 이러한 API를 직접 사용하거나 언어 서버를 작성하고 VS Code 언어 서버 라이브러리를 사용하여 VS Code에 맞게 조정할 수 있습니다.

사용하고자 하는 언어 기능 목록과 의도된 용도를 제공하지만, 창의적으로 이러한 API를 사용하는 것을 막는 것은 없습니다. 예를 들어, CodeLens와 호버는 인라인으로 추가 정보를 표시하는 좋은 방법이며, 진단 오류는 철자법 또는 코드 스타일 오류를 강조 표시하는 데 사용할 수 있습니다.

확장 기능 아이디어

API의 샘플 사용법을 보여주는 호버 추가.
진단을 사용하여 소스 코드의 철자법 또는 린터 오류 보고.
HTML에 대한 새 코드 포맷터 등록.
풍부하고 컨텍스트 인식 IntelliSense 제공.
언어에 대한 접기, 브레드크럼 및 개요 지원 추가.

워크벤치 확장 기능

워크벤치 확장 기능(Workbench Extensions)은 VS Code 워크벤치 UI를 확장합니다. 파일 탐색기에 새 오른쪽 클릭 동작을 추가하거나 VS Code의 트리 뷰(TreeView) API를 사용하여 사용자 지정 탐색기를 구축할 수도 있습니다. 확장 기능에 완전히 사용자 지정된 사용자 인터페이스가 필요한 경우, 웹뷰(Webview) API를 사용하여 표준 HTML, CSS 및 JavaScript를 사용하여 자체 문서 미리 보기 또는 UI를 구축하십시오.

확장 기능 아이디어

파일 탐색기에 사용자 지정 컨텍스트 메뉴 동작 추가.
사이드 바에 새 대화형 트리 뷰 생성.
새 활동 표시줄 보기 정의.
상태 표시줄에 새 정보 표시.
WebView API를 사용하여 사용자 지정 콘텐츠 렌더링.
소스 제어 공급자 기여.

디버깅

VS Code의 디버깅(Debugging) 기능을 활용하여 VS Code의 디버깅 UI를 특정 디버거 또는 런타임에 연결하는 디버거 확장 기능(Debugger Extensions)을 작성할 수 있습니다.

확장 기능 아이디어

디버그 어댑터 구현(Debug Adapter implementation)을 기여하여 VS Code의 디버깅 UI를 디버거 또는 런타임에 연결합니다.
디버거 확장 기능에서 지원하는 언어 지정.
디버거에서 사용하는 디버그 구성 특성에 대한 풍부한 IntelliSense 및 호버 정보 제공.
디버그 구성 스니펫 제공.

한편, VS Code는 사용자의 디버깅 환경을 자동화하기 위해 모든 VS Code 디버거 위에 디버그 관련 기능을 구현할 수 있는 디버그 확장 API(Debug Extension API) 세트도 제공합니다.

확장 기능 아이디어

동적으로 생성된 디버그 구성을 기반으로 디버그 세션 시작.
디버그 세션의 수명 주기 추적.
프로그래밍 방식으로 중단점 생성 및 관리.

UX 지침

확장 기능이 VS Code 사용자 인터페이스에 원활하게 통합되도록 하려면 UX 지침(UX Guidelines)을 참조하십시오. 여기에서 확장 기능 UI를 만드는 모범 사례와 선호하는 VS Code 워크플로를 따르는 규칙을 배울 수 있습니다.

제한 사항

확장 기능에 적용되는 특정 제한 사항이 있습니다. 다음은 제한 사항과 그 목적입니다.

DOM 액세스 불가

확장 기능은 VS Code UI의 DOM에 액세스할 수 없습니다. VS Code에 사용자 지정 CSS를 적용하거나 VS Code UI에 HTML 요소를 추가하는 확장 기능을 작성할 **수 없습니다**.

VS Code는 백업 웹 기술의 사용을 지속적으로 최적화하여 항상 사용 가능하고 반응성이 뛰어난 편집기를 제공하기 위해 노력하고 있으며, 이러한 기술과 제품이 발전함에 따라 DOM 사용을 계속 조정할 것입니다. 확장 기능이 VS Code의 안정성과 성능을 방해하지 않도록 하고, 기존 확장 기능을 중단하지 않고 DOM을 계속 개선할 수 있도록 확장 기능을 확장 호스트(Extension Host) 프로세스에서 실행하고 DOM에 대한 직접 액세스를 방지합니다.

사용자 지정 스타일 시트 불가

사용자나 확장 기능에서 제공하는 사용자 지정 스타일 시트는 DOM 구조 및 클래스 이름과 충돌합니다. 이러한 항목은 내부적으로 간주되므로 문서화되지 않습니다. VS Code를 발전, 리팩토링 또는 개선하려면 사용자 인터페이스 변경의 자유가 필요합니다. DOM의 모든 변경은 기존 사용자 지정 스타일 시트를 중단할 수 있으며, 스타일 시트 제공자에게 좌절감을 주고 중단된 스타일 시트에서 발생하는 UI 결함으로 인해 좋지 않은 사용자 경험을 초래합니다.

대신, VS Code는 UI 사용자 지정을 지원하는 잘 설계된 확장 API를 제공하는 것을 목표로 합니다. 이 API는 문서화되어 있으며 도구 및 샘플과 함께 제공되며 모든 예정된 VS Code 릴리스에서 안정적으로 유지됩니다.

12/10/2025