【VSCode Qiita Editor】ファイルのアップロードページをブラウザで開く

前回の記事

概要

Zenn CLIには、 VS Code に統合する非公式の拡張 VS Code Zenn Editorがあり、Zenn の記事作成に非常に重宝している。

Qiita CLI にも同様の拡張があれば、便利そうなのだが、今のところ、該当する拡張機能を見つけることができない。

せめて、各記事をファイル名ではなく、title で表示するツリービューは欲しい。

そこで自分で拡張機能を作成してみるという試みです。

前回は、ファイルの変更を監視し、ツリービューの更新を行うところを実装しました。今回は、ファイルのアップロードページをブラウザで開く処理を実装します。

作成したソースはGitHub で公開しています。

コマンドを定義

package.json でコマンドを定義します。(既存部分省略)

    "commands": [
      {
        "command": "qiita-editor.open-file-uploader",
        "title": "Qiita Editor: Open File Uploader",
        "icon": "$(cloud-upload)"
      }
    ],

メニューを定義

引き続き package.json でメニューを定義します。(既存部分省略)

    "menus": {
      "view/title": [
        {
          "command": "qiita-editor.open-file-uploader",
					"when": "qiita-editor.activated && view == qiita",
					"group": "navigation"
        }
      ]
    },

コマンドを登録

src\extension.ts でコマンドを登録します。(既存部分省略)

	context.subscriptions.push(
		vscode.commands.registerCommand("qiita-editor.open-file-uploader", () => {
			vscode.env.openExternal(vscode.Uri.parse('https://qiita.com/settings/uploading_images'));
		})
	);

以上でツリービューに cloud-upload アイコンが表示されるようになりました。(正確には、package.json の修正で表示まではされる。)

cloud-upload アイコンをクリックすると下図のような確認ダイアログが開きます。

開くをクリックすると外部ブラウザでファイルのアップロードページが開かれます。

参考文献

• VS Code Zenn Editor