Visual Studio Code での Extension開発02(拡張の解剖学)

# Visual Studio Code での Extension開発02(拡張の解剖学)

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

* [Visual Studio Code での Extension開発02<br>(拡張の解剖学)](#visual-studio-code-での-extension開発02br拡張の解剖学)
	* [概要](#概要)
	* [拡張の解剖学](#拡張の解剖学)
		* [ディレクトリ構造と特に重要な2ファイル](#ディレクトリ構造と特に重要な2ファイル)
			* [❖ package.json について](#packagejson-について)
			* [❖ extension.ts について](#extensionts-について)
	* [まとめ](#まとめ)
	* [参考](#参考)

<!-- /code_chunk_output -->

## 概要
公式ドキュメント「拡張の解剖学」を読み進めます
※公式ドキュメントのタイトルは「Extension Anatomy」(google翻訳がよい感じです)

公式ドキュメントと前回分は以下の通りです

- 公式ドキュメント  [あなたの最初の拡張 Visual Studioコード拡張API](https://code.visualstudio.com/api/get-started/your-first-extension)

- 前回分00: [Visual Studio Code での Extension 開発00(環境構築)](https://qiita.com/intertext543210/items/3a593f14c543ff4fed91)

- 前回分01: [Visual Studio Code での Extension開発01 (わたくしの最初の拡張)](https://qiita.com/intertext543210/items/75e8dedab69ae3b1cff7)




では、はじまめす

## 拡張の解剖学
まずは用語の説明です

|用語|内容|
|---|---|
|◆Activation Event|拡張機能がアクティブになるイベント|
|◆Contribution Points|package.json拡張マニフェストで行う静的宣言|
| VS Code API|拡張コードで呼び出すことができるJavaScript APIのセット|

◆の詳細は後述します


### ディレクトリ構造と特に重要な2ファイル
`❖extension.ts`と`❖package.json`が特に重要なファイル

```
.
├── .vscode
│   ├── launch.json     // Config for launching and debugging the extension
│   └── tasks.json      // Config for build task that compiles TypeScript
├── .gitignore          // Ignore build output and node_modules
├── README.md           // Readable description of your extension's functionality
├── src
│   └── extension.ts    //❖ Extension source code
├── package.json        //❖ Extension manifest
├── tsconfig.json       // TypeScript configuration
```


#### ❖ package.json について

- Extensionのマニフェストファイル
- Extensionのディレクトリ構造のルートに必ず必要
- 各フィールドについて [Extension Manifest](https://code.visualstudio.com/api/references/extension-manifest)

|名|必須|タイプ|詳細|
|---|---|---|---|
|name|Y|string|Extensionの名前 スペースを入れずにすべて小文字にする|
|publisher|Y|string|発行者名|
|main|-|string|Extensionのエントリポイント|
|◆activationEvents|-|array|この拡張機能のアクティブ化イベントの配列|
|◆contributes|-|object|contributesポイント|
|engines.vscode|Y|object|Extensionが依存するVS Code APIの最小バージョンを指定|


```json
{
  "name": "helloworld",
  "displayName": "HelloWorld",
  "description": "LEAVE BLANK",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.33.0"
  },
  "categories": [
    "Other"
  ],
 ◆"activationEvents": [
    "onCommand:extension.helloWorld"
  ],
  "main": "./out/extension.js",
 ◆"contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "myApp"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "npm run compile && node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^3.3.1",
    "vscode": "^1.1.28",
    "tslint": "^5.12.1",
    "@types/node": "^10.12.21",
    "@types/mocha": "^2.2.42"
  }
}
```
上記から一部抜粋
__activationEvents__
　.`onCommand:extension.helloWorld`　※activationEventsの定義
__contributes__
　.`commands.command`　※コマンドを定義
__contributes__
　.`commands.title`　※コマンドのタイトルを定義


#### ❖ extension.ts について
extensionのソースファイル
アクティブ化と非アクティブ化という2つの機能をエクスポートしている

- activate:登録されたアクティベーションイベントが発生すると実行される
- deactivate:機能拡張が無効化される前にクリーンアップの機会を与える


```ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {//activate
		console.log('Congratulations, your extension "helloworld" is now active!');
	let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
		vscode.window.showWarningMessage("WarningMessag");
	});
	context.subscriptions.push(disposable);
}

export function deactivate() {//deactivate
}
```

## まとめ

`extension.ts`と`package.json`が特に重要なファイル
- `extension.ts`はソースファイル
- `package.json`はマニフェストファイル
  - `activationEvents`でコマンドを実行するきっかけを定義している
  - `contributes`でコマンドの名前などを決めている

## 参考
- 公式ドキュメント  [エクステンション Visual Studioコード拡張API](https://code.visualstudio.com/api/get-started/extension-anatomy)

- 公式ドキュメント  [拡張マニフェスト|  Visual Studioコード拡張API](https://code.visualstudio.com/api/references/extension-manifest)