[근무 일지] VS Code Extension 스터디

사전 준비

• Node.js
• Git
• Yeoman
  • npm install -g yo generator-code
• VS Code Extension Generator
  • TypeScript / JavaScript 프로젝트 틀

Extension 구조

• Activation Event
  • Extension이 활성화 된 이벤트
  • OnCommand
    • OnCommand:helloworld.helloworld 등록
    • 사용자가 Hello World 명령 실행 시, Extension 활성화

• Contribution Point
  • VS Code를 확장하기 위해 package.json Extension Manifest에 만든 정적인 선언
  • Extension Manifest
    • 모든 VS Code Extension은 manifest file인 package.json이 필요하다
    • Extension Directory 구조의 root 역할
  • contributes.commands
    • 명령어 Hello World를 Command Palette에서 사용 가능하도록 한다
    • 명령어 ID인 helloworld.helloworld에 연결한다

• VS Code API
  • Extension 코드에서 불러올 수 있는 JavaScript API 모음
  • commands.registerCommand
    • 등록된 명령어 ID helloworld.helloworld에 함수 연결

• VS Code 기능 확장
  • Contribution Points와 VS Code API 조합 사용

Extension 파일 구조

• 일단 두 가지 파일에만 집중할 것
  • package.json
    • Extension Manifest
  • extensions.ts
    • Extension 소스 코드

• Extension Manifest
  • package.json
    • Node.js의 scripts와 dependencies
    • VS Code의 publisher, activationEvents, contributes
  • name과 publisher
    • Extension ID: <publisher>.<name>
    • Extension의 고유성 확보
  • main
    • Extension의 시작점
  • activationEvents와 contributes
    • Activation Events와 Contribution Points
  • engines.vscode
    • Extension이 의존하는 VS Code API의 최소 버전 명시

// package.json

{
  "name": "helloworld",
  "publisher": "vscodeExample",
  "engines": {
    "vscode": "^1.34.0"
  },
  "activationEvents": ["onCommand:extension.helloWorld"],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
  },
  "devDependencies": {
    "@types/node": "^8.10.25",
    "@types/vscode": "^1.34.0",
    "tslint": "^5.16.0",
    "typescript": "^3.4.5"
  }
}

Extension 시작 파일

• activate
  • Activation Event가 발생했을 때, 실행된다
• deactivate
  • Extension이 비활성화 되기 전에 정리할 기회를 제공한다

• vscode 모듈
  • VS Code 확장 API 포함
  • package.json 파일 속 engines.vscode 필드에 정의된 VS Code API 정의 파일을 가져온다

Extention 기능

• 기본 기능
  • Command 등록, Configurations, keybindings, context menu items
  • 전역 데이터나 작업 공간 저장
  • 알림 메세지
  • 사용자 입력을 받는 빠른 선택 기능
  • 파일창을 열어 사용자가 파일이나 폴더를 선택하도록 함
  • 지속적인 명령을 나타내는 Progress API

• 테마
  • VS Code UI 변경
  • 소스 코드 색상 변경

• Declarative 언어 지원
  • 괄호 매칭, 자동 들여쓰기와 같은 기본적인 텍스트 편집 지원 기능 제공

• 기타

Tree View API

• view
  • view container 내부에서 보여지는 UI

• view container
  • built-in view container 옆에 보여질 view들의 목록
  • id: 새롭게 생성하는 view container 이름
  • title: view container 윗 부분에 보여질 이름
  • icon: acivity bar에서 보이는 view container 이미지

• package.json Contribution
  • contributes.views
    • Contribution Point를 통해 새로운 view를 built-in 혹은 view container에 추가 가능

• explorer: side bar의 탐색기 view
• debug: side bar의 디버그 view
• scm: side bar의 소스 컨트롤 view
• test: side bar의 테스트 탐색기 view

"contributes": {
		"viewsContainers": {
			"activitybar": [
				{
					"id": "packageExplorer",
					"title": "Package Explorer",
					"icon": "media/icon.svg"
				}
			]
		},
		"views": {
			"packageExplorer": [
				{
					"id": "nodeDependencies",
					"name": "Node Dependencies",
					"icon": "media/icon.svg",
					"contextualTitle": "Package Explorer"
				}
			]
		}
	}