この記事は今回作成した機能で投稿しました

FrontMatter で updated_at が空でない場合は、npx qiita publish が失敗する場合があります。

今回は、そこの面倒を見ていません。

前回の記事

概要

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

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

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

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

前回は、npx qiita new を呼び出し、新規記事用のファイルを作成し、テキストエディタで開くところまで実装しました。今回は、npx qiita publish を呼び出し、アクティブな記事を投稿するところまで実装します。

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

コマンドの定義

package.json で投稿用のコマンドを定義します。

    "commands": [
      {
        "command": "qiita-editor.publish",
        "title": "Qiita Editor: Publish",
          "icon": "$(broadcast)"
      }
    ],

テキストエディタのタイトルバーに表示する定義

引き続き package.json でテキストエディタのタイトルバーに表示する定義を行います。

    "menus": {
      "editor/title": [
        {
          "command": "qiita-editor.publish",
          "when": "qiita-editor.activated && qiita-editor.publishable",
					"group": "navigation"
        }
      ],

npx qiita publish を実行するメソッドを定義

QiitaCli クラスに npx qiita publish を実行するメソッドを定義します。

    public publish() {
        if (vscode.window.activeTextEditor && vscode.workspace.workspaceFolders) {
            vscode.window.activeTextEditor.document.save();
            const filebase = basename(vscode.window.activeTextEditor.document.uri.fsPath, ".md");
            const qiitaProcess = childProcess.spawn(this.npxPath, ["qiita", "publish", filebase], {
                cwd: vscode.workspace.workspaceFolders[0].uri.fsPath,
                shell: process.platform === 'win32',
                windowsHide: true,
                stdio: ["pipe", "pipe", "pipe"]
            });
            qiitaProcess.stdout.setEncoding('utf-8');
            qiitaProcess.stderr.setEncoding('utf-8');
            qiitaProcess.on("error", (err) => {
                vscode.window.showErrorMessage(err.message);
            });
            qiitaProcess.stdout.on("data", (data) => {
                vscode.window.showInformationMessage(data);
            });
            qiitaProcess.stderr.on("data", (data) => {
                vscode.window.showErrorMessage(data);
            });
        }
    }

アクティブテキストエディタ変更時のイベントハンドラーの定義

src\extension.ts でアクティブなテキストエディタの変更を補足するイベントハンドラーを定義します。

function onDidChangeActiveTextEditor(editor: vscode.TextEditor | undefined): any {
	if (editor && vscode.workspace.workspaceFolders) {
		const uri = editor.document.uri;
		const regexp = /.*\/public\/.*\.md$/;
		if (regexp.test(uri.path)) {
			vscode.commands.executeCommand('setContext', 'qiita-editor.publishable', true);
		} else {
			vscode.commands.executeCommand('setContext', 'qiita-editor.publishable', false);
		}
	}
}

ファイル名が正規表現 /.*\/public\/.*\.md$/ に合致する場合は、qiita-editor.publishable コンテキストを有効にします。

イベントハンドラーとコマンドの登録

src\extension.ts の activate 関数で上記イベントハンドラーとコマンドを登録します。また、起動時にテキストエディタが開いていることを想定し、イベントハンドラーを直接実行します。

	context.subscriptions.push(
    // 既存部分は省略
		vscode.commands.registerCommand("qiita-editor.publish", () => {
			cli.publish();
		}),
		vscode.window.onDidChangeActiveTextEditor((editor) => onDidChangeActiveTextEditor(editor))
	);
	onDidChangeActiveTextEditor(vscode.window.activeTextEditor);

参考文献