ry.yamafuji 9d0be6411a release

2025-06-07 23:08:43 +09:00

6.5 KiB

Raw Permalink Blame History

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）を行うと反映されやすい。

コマンド登録と右クリックメニュー対応

コマンドの登録

package.jsonにコマンドを登録する
contributes.commands に新しいコマンド（例: imagemarkpengent.openImageEditor）を追加
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"
    }
  ],
}

右クリックメニューに対応する

package.jsonにコマンドを登録する
contributes.menus にexplorer/contextを追加する
- explorer/context はエクスプローラー（ファイルツリー）で右クリックしたときのコンテキストメニュー
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;
  }
  // ここに画像編集処理
});

デプロイ方法

VSCodeの拡張機能（extension）を実装した後、公開して他の人に使ってもらうには、主に以下の方法があります：

① Visual Studio Code Marketplace に公開する（公式手順）

👉 一般的・標準的な方法。VSCode本体からインストール可能になる。

必要な準備

Microsoftアカウント と Publisherアカウント登録

Visual Studio Marketplace で publisher を作成

vsce CLIツールのインストール

デプロイを実行する

npm install -g vsce

公開手順

パッケージ作成

vsce package

.vsix ファイルが生成される（ローカル配布にも使える）

リンクエラーになった場合

 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。

公開

vsce publish

初回はアクセストークンが必要（Marketplace から取得）。

メリット

世界中のユーザーに簡単に配布
自動アップデート対応

6.5 KiB Raw Permalink Blame History Unescape Escape