Visual Studio Code での Extension開発02(拡張の解剖学)
概要
公式ドキュメント「拡張の解剖学」を読み進めます
※公式ドキュメントのタイトルは「Extension Anatomy」(google翻訳がよい感じです)
公式ドキュメントと前回分は以下の通りです
-
公式ドキュメント あなたの最初の拡張 Visual Studioコード拡張API
では、はじまめす
拡張の解剖学
まずは用語の説明です
| 用語 | 内容 |
|---|---|
| ◆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
| 名 | 必須 | タイプ | 詳細 |
|---|---|---|---|
| name | Y | string | Extensionの名前 スペースを入れずにすべて小文字にする |
| publisher | Y | string | 発行者名 |
| main | - | string | Extensionのエントリポイント |
| ◆activationEvents | - | array | この拡張機能のアクティブ化イベントの配列 |
| ◆contributes | - | object | contributesポイント |
| engines.vscode | Y | object | Extensionが依存するVS Code APIの最小バージョンを指定 |
{
"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:機能拡張が無効化される前にクリーンアップの機会を与える
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
-
公式ドキュメント 拡張マニフェスト| Visual Studioコード拡張API