imagemarkpengent/docs/tips.md

VSCode拡張機能開発TIPS（ImageMarkPengent）

Vscodeの起動イメージ

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起動時に必ず有効化（非推奨：重くなるため）

"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": ファイルやフォルダをナビゲーション・開く

"contributes": {
    "menus": {
        "explorer/context": [
            {
                "command": "imagemarkpengent.openImageEditor",
                "when": "resourceExtname =~ /\\.(png|jpg|jpeg)$/",
                "group": "navigation"
            }
        ]
    }    
}

対象拡張子を .png / .jpg / .jpeg に限定

基本的には、explorer/context メニューの when 句で拡張子を限定すれば十分ですが 「コマンドの実行自体を拡張子で制御したい」場合は、コマンド実装側でも拡張子チェックを行うのが安全です。

コマンド側の実装例

vscode.commands.registerCommand('imagemarkpengent.openImageEditor', (uri: vscode.Uri) => {
  if (!uri || !uri.fsPath.match(/\.(png|jpg|jpeg)$/i)) {
    vscode.window.showWarningMessage('対応画像ファイル（.png, .jpg, .jpeg）を選択してください。');
    return;
  }
  // ここに画像編集処理
});