VS Code Extension 만들기

Code 2021. 4. 13. 18:10

VS Code Extension 만들기

    - Visual Studio Code 확장 프로그램 제작 방법



* 필요

Node.js : https://nodejs.org/ko/

Git : https://git-scm.com/

Yeoman : https://yeoman.io/learning/index.html

VS Code Extension Generator : https://github.com/Microsoft/vscode-generator-code



* 설치 : Yeoman, VS Code Extension Generator

> npm install -g yo generator-code



//----------------------------

* 프로젝트 생성

> yo code



    - 생성된 프로젝트를 VS Code로 열기

> code ./helloworld



//----------------------------

* 테스트

    - /.vscode/launch.json

    {

      // Use IntelliSense to learn about possible attributes.

      // Hover to view descriptions of existing attributes.

      // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

      "version": "0.2.0",

      "configurations": [

        {

          "name": "Run Extension",

          "type": "extensionHost",

          "request": "launch",

          "args": ["--extensionDevelopmentPath=${workspaceFolder}"]

        },

        {

          "name": "Extension Tests",

          "type": "extensionHost",

          "request": "launch",

          "args": [

            "--extensionDevelopmentPath=${workspaceFolder}",

            "--extensionTestsPath=${workspaceFolder}/test/index"

          ]

        }

      ]

    }



    - Extension Development Host 창 띄우기

VS Code 창에서 F5 키 -> VS Code Extension Development 선택

 

    - Extension Development Host 창이 뜨면

    - Command Palette (Ctrl+Shift+P) 에서 Hello World 치기

 

Hello World from HelloWorld! 메시지가 알림 팝업으로 나오면 성공

 

명령어 'Hello World'는 package.json파일의 "title"

"contributes": {

        "commands": [

            {

                "title": "Hello World1" <=== 명령어





//----------------------------

* 메시지 변경

    - extension.ts 파일 수정






//---------------------------

* Publish

 

* 패키징 툴 설치

> npm install -g vsce



* package.json  파일 수정

    publisher , icon 항목 작성

    - 추가 수정 : name, displayName, description , version, publisherDisplayName



* README.md 파일 새로 작성

    - 처음 생성된 파일로 vsce package 시도 하면 다음 에러

 ERROR  Make sure to edit the README.md file before you package or publish your extension.



* 패키지 만들기(*.vsix)

> vsce package



* 패키지(*.vsix) 설치

    - VS Code 실행 -> View -> Extensions (Ctrl+Shift+X)

        -> [...] 메뉴 (View and More Actions) 

        -> Install from VSIX 

        -> 패키지 파일 선택






//----------------------------------

// 참고

https://code.visualstudio.com/api/get-started/your-first-extension





반응형

'Code' 카테고리의 다른 글

[git] 이미 커밋한 메시지 수정 방법  (0) 2021.04.25
VS Code 포매터 지정 방법  (0) 2021.04.13
VS Code Extension 만들기  (0) 2021.04.13
Git Client (GUI)리스트  (0) 2021.03.29
Go 언어  (0) 2021.03.06
7z 단일 실행 파일 명령행 사용 방법  (0) 2021.01.26
Posted by codens codens

댓글을 달아 주세요