VS Code용 확장 프로그램 만들기 - 1부

일상적인 문제 중 하나를 해결하기 위해 *VS Code 확장*을 개발하고 싶었기 때문에 VS Code API을 살펴보기 시작했습니다.

정말 유용한 문서와 샘플 확장 기능이 있습니다.

I could run my first Hello world extension in less than 5 minutes.

매우 쉽고 매우 간단합니다. 개발 방법을 살펴보겠습니다.

설치

Kick Starting new extensionYeoman 및 VS Code Extension Generator 에 대해 다음 노드 모듈을 설치합니다.
npm install -g yo generator-code

새 확장 프로그램 만들기

이 명령yo code을 실행하고 New Extension -Typescript(가장 권장되는 항목)를 선택하여 새 확장을 만든 다음 질문에 답하십시오. Hello World *보일러플레이트*를 생성하고 필요한 노드 모듈도 설치합니다.

확장 파일 구조

이 자동 생성 확장에는 수십 개의 파일이 있습니다. 파일 구조에 대한 자세한 내용은 다음 이미지를 참조하십시오.



그러나 우리는 주요 파일 두 개에만 초점을 맞출 것입니다.

src/exntension.ts

패키지.json

확장 실행

확장 실행은 매우 간단합니다. 왼쪽 메뉴에서 디버그 메뉴로 이동하거나 Ctrl+Shift+D 키 바인딩을 누른 다음 확장 실행을 클릭하십시오.

확장이 실행될 새 창이 열리면 오른쪽 하단에 "Hello World"가 표시되는지 확인합니다.

좋아요, 하지만 어떻게 작동하나요?

VS 코드 확장은 모두 이벤트 기반이므로 package.json에서 모든 명령(작업)을 정의해야 합니다.

패키지.json

contributes -> commands 내부의 모든 이벤트를 보유하는 루트 디렉토리에 *package.json * 파일을 저장할 수 있습니다. 이 경우 명령은 extension.helloWorld 하나뿐입니다.

"contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ]
}

activationEvents에 명령을 추가하여 이벤트를 활성화합니다.

"activationEvents": [
    "onCommand:extension.helloWorld"
]

main 속성에는 확장이 활성화되면 처음에 실행될 파일 경로가 포함됩니다.

"main": "./out/extension.js"

Extension.ts

이 파일에는 더 나은 이해를 위해 매우 자세한 주석이 있습니다.

function activate(context: vscode.ExtensionContext) - 이 기능은 확장 기능이 활성화될 때 처음 실행되며 모든 비즈니스 로직이 여기에 있습니다.

vscode.commands.registerCommand('extension.helloWorld', () => {}) - 콜백 기능을 사용하여 extension.helloWorld 이벤트를 등록합니다.

vscode.window.showInformationMessage('Hello World!'); - 오른쪽 하단에 메시지 박스를 만든다.

마지막으로 등록된 명령을 context.subscriptions에 푸시해야 합니다.

*첫 대 코드 확장을 축하합니다 * 🎉🎉🎉🎉🎉



다음 글에서는 메뉴, 설정, 키 바인딩, 상태 메시지 표시줄과 같은 가장 일반적인 확장 기능을 구현하는 방법에 대해 설명하겠습니다.

문제가 있거나 질문이 있으면 댓글을 달아주세요. 기꺼이 도와드리겠습니다. :D

고맙습니다 !!!


이 문서는 원래 Hashnode에 게시되었습니다.

Dev Blog 또는 에서 파트 2 읽기