VSCode 확장(extensions) 개발 : TypeScript 로 .vsix 만들기 가이드

VSCode 확장(extensions) 개발 : TypeScript 로 .vsix 만들기 가이드

---

1. 개발 환경 준비

• VS Code 확장을 개발하려면 다음 도구가 필요합니다:
  • Node.js 설치
    • https://nodejs.org/
  • Visual Studio Code 설치
    • https://code.visualstudio.com
  • 확장 개발 도구 설치:

    • bash

        npm install -g yo generator-code @vscode/vsce
      

    • ⚠️ 오류 발생 시 --force 옵션을 사용할 수 있습니다:

        npm install -g typescript --force
      

---

2. TypeScript 설치 및 설정

2.1. 전역 설치 (Global)

• bash

    npm install -g typescript
  

• 설치 확인:

  • bash

    tsc --version
  

2.2. 로컬 설치 (프로젝트용)

• bash

    npm install --save-dev typescript
  

2.3. tsconfig.json 초기화

• bash

    npx tsc --init
  

• 샘플 설정:

• json

    {
      "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "outDir": "dist",
        "rootDir": "src",
        "strict": true
      }
    }
  

---

3. 확장 템플릿 생성

• bash

    npx yo code
  

• 언어: TypeScript 선택
• 확장 이름, 설명 등 입력
• 생성된 디렉터리로 이동 후 의존성 설치:

  • bash

      npm install
    

---

4. 확장 코드 작성 예시

4.1. 디렉터리 구조

• dir

    my-extension/
    ├── package.json
    ├── tsconfig.json
    ├── src/
    │   └── extension.ts
  

4.2. package.json

• json

    {
      "name": "my-extension",
      "displayName": "My Extension",
      "publisher": "your-name",
      "version": "0.0.1",
      "engines": {
        "vscode": "^1.70.0"
      },
      "activationEvents": ["onCommand:my-extension.hello"],
      "main": "./dist/extension.js",
      "contributes": {
        "commands": [
          {
            "command": "my-extension.hello",
            "title": "Hello World"
          }
        ]
      },
      "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -w -p ./"
      },
      "devDependencies": {
        "@types/vscode": "^1.70.0",
        "typescript": "^4.7.4",
        "vscode-test": "^1.6.2"
      }
    }
  

4.3. src/extension.ts

• ts

    import * as vscode from 'vscode';
    
    function sayHello() {
      vscode.window.showInformationMessage('👋 안녕하세요!');
    }
    
    function sayBye() {
      vscode.window.showInformationMessage('👋 안녕히 가세요!');
    }
    
    export function activate(context: vscode.ExtensionContext) {
      const helloCmd = vscode.commands.registerCommand('my-extension.hello', sayHello);
      const byeCmd = vscode.commands.registerCommand('my-extension.bye', sayBye);
      context.subscriptions.push(helloCmd, byeCmd);
    
      return {
        greet: sayHello,
        farewell: sayBye
      };
    }
    
    export function deactivate() {
      console.log("🛑 확장이 비활성화되었습니다.");
    }
  

• ⚠️ main 항목은 반드시 컴파일된 JS 경로(dist/extension.js) 를 가리켜야 합니다.
  .ts 파일을 직접 실행할 수는 없습니다.

---

5. 빌드 및 패키징

5.1 컴파일

• bash

    npm run compile
  

• src/extension.ts → dist/extension.js로 변환됩니다.

5.2 .vsix 패키지 만들기

• bash

    vsce package
  

• → my-extension-0.0.1.vsix 파일 생성

5.3 로컬 설치 (테스트용)

• bash

    code --install-extension my-extension-0.0.1.vsix
  

• 또는 VS Code에서 Extensions: Install from VSIX... 명령을 사용하여 설치합니다.

---

6. 외부 확장에서 API 호출

• activate() 함수에서 객체를 반환하면, 다른 확장에서 다음과 같이 사용할 수 있습니다:

• ts

    const ext = vscode.extensions.getExtension('your-name.my-extension');
    const api = await ext.activate();
    
    api.greet();    // sayHello() 호출
    api.farewell(); // sayBye() 호출
  

---

7. 정리

• 이 가이드를 통해 TypeScript 기반의 VS Code 확장을 생성하고 .vsix 파일로 패키징하는 과정을 간단히 소개하였습니다.
• 직접 확장을 배포하거나, 팀 내에서 배포 전 테스트용으로 사용하실 수 있습니다. 🚀 👽

view raw vxcode.vsix.ko.md hosted with ❤ by GitHub

---

• 도움이 되셨으면 하단의 ❤️ 공감 버튼 부탁 드립니다. 감사합니다! 😄

view raw i.like.it.ko.md hosted with ❤ by GitHub