Bloodguy
Twitter : @nicehide

기본 설정

// node.js 설치
nvm install --lts
nvm use --lts

// 프로젝트 기본 세팅
mkdir my_ext
cd my_ext
npm init -y
npm install vscode typescript @types/node --save-dev

package.json

{
  "name": "test",
  "displayName": "my test",
  "description": "my test vs code extension",
  "version": "1.0.0",
  "publisher": "백충덕",
  "repository": {
    "type": "git",
    "url": "https://example.com/my_test.git"
  },
  "engines": {
    "vscode": "^1.82.0"
  },
  "activationEvents": [
    "onCommand:myTest.hello"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
        {
          "command":"myTest.hello",
          "title": "My Test Hello"
        }
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^22.10.1",
    "typescript": "^5.7.2",
    "vscode": "^1.1.37"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "out",
    "lib": ["es6"]
  },
  "include": ["src"]
}

src/extension.ts

mkdir src
vi src/extension.ts
 
// 파일 내용은 아래처럼
import * as vscode from 'vscode';
 
export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('myTest.hello', ()=>{
        vscode.window.showInformationMessage('hello');
    });
 
    context.subscriptions.push(disposable);
}
 
export function deactivate() {}

빌드 및 패키징

// 빌드
npx tsc

// 패키징
npm install -g vsce
vsce package

// .vsix 파일이 생성됨

설치

vs code를 켜서 cmd + shift + P 로 명령창을 연 후 Extensions: Install from VSIX 선택하고 생성된 vsix 파일을 선택하여 설치.
cmd + shift + X 로 확장 프로그램 탭을 열어서 설치한 확장 프로그램 확인.
없으면 cmd + shift + P 하고 Developer: Reload Window 로 다시 로딩한 후 확인.

테스트

cmd + shift + P 로 명령창을 연 후 My Test Hello 실행해서 hello 메시지가 나오면 성공.