【VSCode Qiita Editor】npx qiita new を呼び出しテキストエディタで開くまで

Last updated at 2025-08-16Posted at 2025-08-16

前回の記事

概要

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

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

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

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

前回は、ツリービューを表示するところまで実装しました。今回は、npx qiita new を呼び出し、新規記事用のファイルを作成し、テキストエディタで開くところまで実装します。

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

npx qiita new を呼び出すコマンドの定義

package.json で npx qiita new を呼び出すコマンドの定義をします。

    "commands": [
      {
        "command": "qiita-editor.create-new",
        "title": "Qiita Editor: Create New",
        "icon": "$(file-text)"
      }
    ],

"icon" に　"$(file-text)" のように指定すると Visual Studio Code 内臓のアイコンを使用できます。

コマンドを呼び出すメニュー(ボタン)の定義

package.json で "commands" と同じレベルの "menus" で定義します。

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

"view/title" というコンテキストを指定することで自前のツリービューのタイトル部分にボタンを作成できます。

qiita-cli を操作するクラスの作成

src\qiitacli\qiitaCli.ts で qiita-cli を操作するクラスを定義しました。

import * as vscode from "vscode";
import * as childProcess from "child_process";
import which from "which";
import * as process from "process";
import path from "path";

export class QiitaCli {
    private npxPath: string = "";

    constructor() {
        const env = Object.assign({}, process.env);
        which("npx", { path: env.PATH}).then((value) => {
            this.npxPath = value;
        }).catch((reason) => {
            console.log(reason);
        });       
    }

    public new_article() {
        let intervalId = setInterval(() => {
            if (this.npxPath.length > 0 && vscode.workspace.workspaceFolders) {
                const qiitaProcess = childProcess.spawn(this.npxPath, ["qiita", "new"], {
                    cwd: vscode.workspace.workspaceFolders[0].uri.fsPath,
                    shell: process.platform === 'win32',
                    windowsHide: true,
                    stdio: ["pipe", "pipe", "inherit"]
                });
                qiitaProcess.stdout.setEncoding('utf-8');
                qiitaProcess.on("error", (err) => {
                    console.log(err);
                });
                qiitaProcess.stdout.on("data", (data) => {
                    vscode.window.showInformationMessage(data);
                });
                clearInterval(intervalId);
            }
        }, 1000);
    }
}

new_article メソッドで npx qiita new を実行します。本家 VS Code Zenn Editor とは、異なり、npx 経由で qiita-cli を実行するようにしています。

npx のフルパスを得るのに多少時間がかかるため、setInterval で処理を遅延させています。

npx qiita new を実行する際、作業ディレクトリが qiita-cli をインストールしているリポジトリになっていないと失敗するので vscode.workspace.workspaceFolders[0].uri.fsPath で指定しています。

childProcess.spawn に与えるオプションで windowHide を有効にするとコマンドプロンプトの表示を抑制できます。

childProcess の標準出力を読み込む際、デフォルトはBuffer（バイト列）なので qiitaProcess.stdout.setEncoding('utf-8'); を事前に実行しておくことで UTF-8 文字列として読み込むことができるようにしています。

                qiitaProcess.stdout.on("data", (data) => {
                    vscode.window.showInformationMessage(data);
                });

この部分で npx qiita new の出力を Visual Studio Code に情報メッセージとして表示させています。

コマンドの登録

src\extension.ts の activate 関数で定義したコマンドを登録し、実行時に QiitaCli クラスの new_article メソッドを呼び出すようにします。

	context.subscriptions.push(
		vscode.commands.registerCommand("qiita-editor.create-new", () => {
			cli.new_article();
		})
	);

ツリービュー更新の仕組みを実装

src\treeView\qiitaTreeViewProvider.ts で定義している QiitaTreeViewProvider クラスにツリービュー更新の仕組みを実装します。

    private _onDidChangeTreeData: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
    readonly onDidChangeTreeData: vscode.Event<any> = this._onDidChangeTreeData.event;

    public refresh() {
        this._onDidChangeTreeData.fire(undefined);
    }

VS Code Extension Samples の ftpExplorer の仕組みを拝借しました。

ファイルの新規作成を監視しテキストエディタ開く

src\treeView\qiitaTreeViewProvider.ts にて、ファイルの新規作成を監視し、Drafts ノードにファイル名を追加し、テキストエディタ開くようにします。

        if (vscode.workspace && vscode.workspace.workspaceFolders) {
            this.watcher = vscode.workspace.createFileSystemWatcher(
                new vscode.RelativePattern(vscode.workspace.workspaceFolders[0], "public/*.md")
            );
            this.watcher.onDidCreate(async (e) => {
                const article = new QiitaTreeItem(path.basename(e.fsPath) , e.path);
                this.drafts.addChild(article);
                this.refresh();
                const doc = await vscode.workspace.openTextDocument(e.path);
                await vscode.window.showTextDocument(doc, vscode.ViewColumn.One, true); 
            });
        }

これで npx qiita new で作成されたファイルを捕捉し、ツリービューに追加するとともにテキストエディタで開けるようになりました。

今後の ToDo

他に良い拡張機能が見つかれば、開発を辞めてしまうかもしれませんが…

ノードに更新日時 updated_at を持たせ、更新日時順にソートさせるようにする。
ファイル更新時にツリービューが更新できるようにする。
npx qiita new をボタンで実行できるようにする。
記事の絞り込みができるようにしたい。
npx qiita publish をボタンで実行できるようにする。
ファイルアップロードのリンクを開けるようにする。
モジュール分割を適切にしたい。
非同期処理をマジメにやる…

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up