VSCode 로 플러그 인 만 들 기

VSCode 는 플러그 인 을 만 듭 니 다.플러그 인 을 만 드 는 방법 입 니 다.VS Code 의 플러그 인 은 Node.js 응용 프로그램 이 므 로 공식 적 으로 도 NPM 기반 도구 체인 을 제공 하여 플러그 인 을 만 들 고 유지 하 는 데 도움 을 줄 것 입 니 다.
우선 당신 에 게 필요 한 것 은 yeoman,비계 도구 입 니 다.yeoman 을 통 해 코드 템 플 릿 을 빠르게 만 들 수 있 습 니 다.다음 과 같 습 니 다.npm install -g yeoman그리고 VS Code 템 플 릿 을 설치 해 야 합 니 다.npm install -g generator-code비계 가 있 으 면 VS Code 플러그 인 템 플 릿 을 만 들 수 있 습 니 다.다음 실행:yo code myextension세 번 째 매개 변 수 는 새로 만 든 플러그 인의 폴 더 이름 입 니 다.

위의 그림 에서 7 개의 플러그 인 템 플 릿 을 볼 수 있 습 니 다.
앞의 두 가 지 는 프로 그래 밍 을 통 해 플러그 인 기능 을 제공 합 니 다.TypeScript 나 JavaScript 를 선택 할 수 있 습 니 다.결 과 는 모두 유사 합 니 다.TypeScript 는 마지막 에 JavaScript 로 컴 파일 되 어 발표 해 야 하기 때 문 입 니 다.세 번 째 는 테마 플러그 인 입 니 다.자신 이 만 든 테 마 를 다른 사람 에 게 공유 할 수 있 습 니 다.네 번 째 는 언어 지원,즉 문법 이 밝 고 언어 정의 등 이다.다섯 번 째 는 코드 세 션 의 공유 입 니 다.여섯 번 째 는 단축 키 공유 하기;일곱 번 째 는 여러 플러그 인 을 조합 하여 공유 하 는 것 이다.
테마(Color Theme),단축 키(Keymap),코드 세 션(Code Snippet)에 대한 공 유 는 다음 강 의 를 통 해 소개 하 겠 습 니 다.언어 지원 후에 도 언급 될 것 이다.오늘 우 리 는 두 번 째 옵션 인'New Extension(JavaScript)'을 먼저 이야기 합 니 다.

다음은 플러그 인의 이름,소개,어떤 계 정 으로 발표 하고 싶 은 지,type check 을 열 어야 하 는 지,git 를 사용 해 야 하 는 지 등 을 순서대로 알려 줍 니 다.너 는 잠시 나의 견본 에 따라 입력 할 수 있 고,후에 도 필요 에 따라 수정 할 수 있다.
모든 문 제 를 입력 하면 스 크 립 트 가 자동 으로 파일 을 만 들 고 필요 한 dependencies 를 설치 합 니 다.모든 것 이 끝나 면 스 크 립 트 는 다음 스 크 립 트 를 실행 하여 이 플러그 인의 코드 를 열 수 있 음 을 알려 줍 니 다.cd myextension code .
VS Code 의 비 계 는 기본적으로 많은 파일 을 만 들 었 습 니 다.하지만.gitignore,.eslintrc.json,README.md 와 같은 파일 의 역할 은 이미 잘 알 고 있 을 것 입 니 다.이 플러그 인 에 있어 서 가장 중요 한 것 은 다음 과 같은 몇 개의 파일 입 니 다.
package.json 에서 언급 했 듯 이 VS Code 의 플러그 인 은 Node.js 의 응용 프로그램 입 니 다.package.json 에 이 Node.js 응용 정 보 를 기록 하 였 습 니 다.플러그 인의 정보 도 이 파일 에 기 록 됩 니 다.extension.js 이 파일 은 현재 플러그 인의 모든 코드 입 니 다.vscode 비계 도 구 는 우리 에 게 디 버 깅 설정,작업 설정 등 을 제공 해 주 었 습 니 다.그들 이 있 으 면 우 리 는 스스로 시간 을 들 여 쓰 지 않 아 도 됩 니 다.
자,다음은 extension.js 와 package.json 을 살 펴 보 겠 습 니 다.그것들 을 보고 나 면 VS Code 플러그 인 이 어떻게 작 동 하 는 지 잘 이해 할 수 있 습 니 다.
extension.js 의 내용 은 모든 주석 을 삭제 한 후 다음 과 같 습 니 다.

const vscode = require('vscode');

function activate(context) {
  console.log('Congratulations, your extension "myextension" is now active!');
  let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}
exports.activate = activate;

function deactivate() {
}
exports.deactivate = deactivate;

첫째,우 리 는 vscode 라 이브 러 리 를 인용 했다.이 라 이브 러 리 를 참조 하면 VS Code 플러그 인 API 를 사용 할 수 있 습 니 다.
둘째,우 리 는 activate 함 수 를 만 들 고 출력 합 니 다.VS Code 의 플러그 인 프로 세 스 가 이 플러그 인 을 활성화 할 때 출력(export)된 함 수 를 호출 합 니 다.즉,이 함수 가 바로 이 플러그 인의 입구 입 니 다.
이에 대응 하 는 것 은 deactivate 함수 입 니 다.이 플러그 인 을 사용 하지 않 거나 VS Code 를 닫 으 면 이 함수 가 호출 됩 니 다.
다음은 activate 라 는 함 수 를 살 펴 보 겠 습 니 다.

function activate(context) {
  console.log('Congratulations, your extension "myextension" is now active!');
  let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
    vscode.window.showInformationMessage('Hello World!');
  });

  context.subscriptions.push(disposable);
}`

이 함 수 는 먼저 log 를 출력 하여 플러그 인 이 성공 적 으로 활성화 되 었 음 을 알려 줍 니 다.이 어 우 리 는vscode.commands.registerCommand을 사용 하여extension.sayHello라 는 명령 을 등록 했다.이 명령 의 실현 은registerCommand의 두 번 째 매개 변수 이다.우 리 는 호출vscode.window.showInformationMessage을 통 해 인터페이스 에서 알림 상 자 를 조정 하고 내용 은Hello World!이다.
하지만 extension.js 만 있 으 면 이 플러그 인 은 실행 할 수 없습니다.VS Code 는 조건 에 따라 플러그 인 을 활성화 합 니 다.이 활성화 조건 은 package.json 에 적 혀 있 습 니 다.그러면 package.json 을 살 펴 보 겠 습 니 다.

{
  "name": "myextension",
  "displayName": "myextension",
  "description": "my extension",
  "version": "0.0.1",
  "publisher": "rebornix",
  "engines": {
    "vscode": "^1.29.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:extension.sayHello"
  ],
  "main": "./extension",
  "contributes": {
    "commands": [
      {
        "command": "extension.sayHello",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^2.6.1",
    "vscode": "^1.1.21",
    "eslint": "^4.11.0",
    "@types/node": "^8.10.25",
    "@types/mocha": "^2.2.42"
  }
}

위의 이 파일 은 일반적인 npm 패키지 제 이 슨 과 세 군데 만 다르다.
첫 번 째 는 engines 입 니 다.
"vscode": "^1.29.0"
이 플러그 인 을 실행 하 는 데 필요 한 VS Code 버 전 을 지정 합 니 다.예 를 들 어"^1.29.0"은 이 플러그 인 을 설치 하려 면 VS 코드 1.29 이상 버 전 을 사용 해 야 한 다 는 것 을 설명 합 니 다.
두 번 째 는 activation Events 입 니 다.

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

이 속성 은 어떤 상황 에서 이 플러그 인 을 불 러 오고 활성화 해 야 하 는 지 지정 합 니 다.이 예 에서 활성화 조건 은 사용자 가"extension.sayHello"명령 을 실행 하려 면 이 플러그 인 을 활성화 하 는 것 입 니 다.
이 기 제 는 우리 가 이 플러그 인 을 사용 해 야 할 때 이 플러그 인 이 활성화 되 고 가능 한 한 성능 과 메모리 사용 의 합 리 성 을 확보 할 수 있 습 니 다.
세 번 째 는 contributes 입 니 다.

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

이 속성 이 지정 되 었 습 니 다.이 플러그 인 은 VS Code 에 command 를 추 가 했 습 니 다.이 command 의 id 는"extension.sayHello"입 니 다.extension.js 에 적 힌 것 과 같 습 니 다.이 명령 의 이름 은 Hello World 입 니 다.
이 속성 을 쓰 지 않 으 면 VS Code 는 이 명령 을 명령 패 널 에 등록 하지 않 습 니 다.우 리 는 이 명령 을 찾 아 실행 할 수 없습니다.