178 lines
6.5 KiB
Markdown
178 lines
6.5 KiB
Markdown
# VSCode拡張機能開発TIPS（ImageMarkPengent）
|
||
|
||
## Vscodeの起動イメージ
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["拡張機能の起動"] --> B["コマンドやイベントリスナーを登録"]
|
||
B --> C["Disposableをcontext.subscriptionsにpush"]
|
||
C --> D["拡張機能の終了"]
|
||
D --> E["VSCodeが自動でdispose()を呼び出し、リソース解放"]
|
||
```
|
||
|
||
|
||
## よく使うAPI・ポイント
|
||
|
||
- `vscode.window.showInformationMessage('メッセージ')`
|
||
- 右下に情報メッセージを表示できる。デバッグやユーザー通知に便利。
|
||
|
||
- `console.log('メッセージ')`
|
||
- 拡張機能のデバッグ用ログ。VSCodeの「出力」→「拡張機能のログ」で確認できる。
|
||
|
||
- `vscode.commands.registerCommand('コマンドID', () => { ... })`
|
||
- コマンドIDはpackage.jsonのcontributes.commandsで定義したものと一致させる必要がある。
|
||
- コマンドの実装はこのコールバック内に記述。
|
||
|
||
- `context.subscriptions.push(オブジェクト)`
|
||
- 登録したコマンドやイベントリスナーは、context.subscriptionsにpushしておくと拡張機能の終了時に自動でクリーンアップされる。
|
||
- もう少しかみ砕くと拡張機能が無効化・アンロードされたときに、イベントリスナーやコマンドなどのリソースを自動で解放してくれるという意味です。
|
||
- pushしない場合、拡張機能が終了してもコマンドやリスナーが残り続け、メモリリークや予期しない動作の原因になります。
|
||
|
||
- `activate(context: vscode.ExtensionContext)`
|
||
- 拡張機能が有効化されたときに一度だけ呼ばれる初期化関数。
|
||
|
||
- `deactivate()`
|
||
- 拡張機能が無効化されたときに呼ばれるクリーンアップ関数。
|
||
|
||
---
|
||
|
||
## その他
|
||
- コマンドの追加や変更を行った場合は、VSCodeの再起動や拡張機能の再読み込み（Reload）を行うと反映されやすい。
|
||
|
||
---
|
||
|
||
## コマンド登録と右クリックメニュー対応
|
||
|
||
### コマンドの登録
|
||
|
||
1. `package.json`にコマンドを登録する
|
||
2. contributes.commands に新しいコマンド（例: imagemarkpengent.openImageEditor）を追加
|
||
3. activationEvents にコマンドのonCommandイベントを追加
|
||
* VSCode拡張機能が「いつ有効化（起動）」されるかを決めるトリガーを定義するものです。
|
||
* VSCodeの拡張機能は、「VSCodeの起動時」や「特定のファイルを開いたとき」など、必要なタイミングで初めてメモリにロードされ、activate関数が呼ばれます。
|
||
|
||
|
||
| 設定値 | 説明 |
|
||
| ----------------------- | ------------------------------------------------------------ |
|
||
| "onCommand:コマンドID" | 指定したコマンドが実行されたときに拡張機能を有効化 |
|
||
| "onLanguage:言語ID" | 指定した言語のファイルが開かれたとき |
|
||
| "onFileSystem:スキーム" | 指定したファイルシステムスキームのリソースにアクセスしたとき |
|
||
| "*" | VSCode起動時に必ず有効化（非推奨：重くなるため） |
|
||
|
||
|
||
|
||
```json
|
||
"activationEvents": [
|
||
"onCommand:imagemarkpengent.openImageEditor"
|
||
],
|
||
"contributes": {
|
||
"commands": [
|
||
{
|
||
"command": "imagemarkpengent.openImageEditor",
|
||
"title": "Open in ImageMarkPengent"
|
||
}
|
||
],
|
||
}
|
||
```
|
||
|
||
### 右クリックメニューに対応する
|
||
|
||
1. `package.json`にコマンドを登録する
|
||
2. contributes.menus に`explorer/context`を追加する
|
||
* explorer/context は エクスプローラー（ファイルツリー）で右クリックしたときのコンテキストメニュー
|
||
3. menuの内容を追加する
|
||
* groupはメニュー内でのコマンドの表示位置を指定するためのグループ名です
|
||
* "navigation": ファイルやフォルダをナビゲーション・開く
|
||
|
||
```json
|
||
"contributes": {
|
||
"menus": {
|
||
"explorer/context": [
|
||
{
|
||
"command": "imagemarkpengent.openImageEditor",
|
||
"when": "resourceExtname =~ /\\.(png|jpg|jpeg)$/",
|
||
"group": "navigation"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 対象拡張子を `.png` / `.jpg` / `.jpeg` に限定
|
||
|
||
基本的には、explorer/context メニューの when 句で拡張子を限定すれば十分ですが
|
||
「コマンドの実行自体を拡張子で制御したい」場合は、コマンド実装側でも拡張子チェックを行うのが安全です。
|
||
|
||
#### コマンド側の実装例
|
||
|
||
|
||
```js
|
||
vscode.commands.registerCommand('imagemarkpengent.openImageEditor', (uri: vscode.Uri) => {
|
||
if (!uri || !uri.fsPath.match(/\.(png|jpg|jpeg)$/i)) {
|
||
vscode.window.showWarningMessage('対応画像ファイル（.png, .jpg, .jpeg）を選択してください。');
|
||
return;
|
||
}
|
||
// ここに画像編集処理
|
||
});
|
||
```
|
||
|
||
## デプロイ方法
|
||
|
||
VSCodeの拡張機能（extension）を実装した後、公開して他の人に使ってもらうには、主に以下の方法があります：
|
||
|
||
---
|
||
|
||
### ① **Visual Studio Code Marketplace に公開する（公式手順）**
|
||
|
||
👉 一般的・標準的な方法。VSCode本体からインストール可能になる。
|
||
|
||
#### 必要な準備
|
||
|
||
1. **Microsoftアカウント** と **Publisherアカウント登録**
|
||
|
||
* [Visual Studio Marketplace](https://marketplace.visualstudio.com/manage) で publisher を作成
|
||
|
||
1. **`vsce` CLIツール のインストール**
|
||
|
||
#### デプロイを実行する
|
||
|
||
```bash
|
||
npm install -g vsce
|
||
```
|
||
|
||
|
||
#### 公開手順
|
||
|
||
1. **パッケージ作成**
|
||
|
||
```bash
|
||
vsce package
|
||
```
|
||
|
||
`.vsix` ファイルが生成される（ローカル配布にも使える）
|
||
|
||
##### リンクエラーになった場合
|
||
|
||
```error
|
||
ERROR Couldn't detect the repository where this extension is published. The link './README.jp.md' will be broken in README.md.
|
||
```
|
||
vsceが`package.json`に epositoryURLがないため、
|
||
README内のリンク解決ができないというエラーです。
|
||
|
||
GitHubやGitLabにリポジトリがある場合はrepositoryフィールドを入れるとOK。
|
||
|
||
|
||
2. **公開**
|
||
|
||
```bash
|
||
vsce publish
|
||
```
|
||
|
||
初回はアクセストークンが必要（Marketplace から取得）。
|
||
|
||
#### メリット
|
||
|
||
* 世界中のユーザーに簡単に配布
|
||
* 自動アップデート対応
|
||
|