VSCodeでTypeScriptの型からJSONスキーマを生成するマクロ

この記事は公開から2年以上経過しています。

VSCode Macros拡張を使い、VSCodeエディタ上の選択範囲に記述されたTypeScript型定義からJSONスキーマを生成するマクロを作成したので紹介します。

即席ツールなので、エラーチェックなどは最低限になっています。

マクロの動作イメージ

TypeScriptのinterface定義からJSON Schemaを生成する様子です。

既定の変換設定では、変換する型をexportで公開しておく必要があります。
利用できる型や詳細な利用方法については、参考ウェブサイトのts-json-schema-generatorのドキュメントをご参照ください。

npmライブラリのインストール手順

以下の手順で、マクロ内で利用するnpmライブラリを導入しておきます。

1. マクロディレクトリにpackage.jsonが存在しない場合は、カレントをマクロディレクトリに移動して以下のコマンドでVSCodeMacrosで利用するプライベートnpmライブラリ用のpackage.jsonを生成します(npmライブラリをグローバルインストールする場合は不要)。

   echo '{"private":true}' >> package.json

   ※Windowsのコマンドプロンプト(cmd.exe)の場合はシングルクォート'は不要。

2. 以下のコマンドでnpmライブラリをインストールします。

   npm i ts-json-schema-generator tmp-promise

マクロのサンプルソースコード

const vscode = require('vscode');
const tsjsg = require('ts-json-schema-generator');
const tmpp = require('tmp-promise');

module.exports.macroCommands = {
    TS2JSONSchema: {
        no: 1,
        func: ts2JSONSchemaFunc,
    },
};

async function ts2JSONSchemaFunc() {
    const editor = vscode.window.activeTextEditor;
    if (!editor) {
        return 'Editor is not open.';
    }

    const document = editor.document;
    const selection = editor.selection;
    const text = document.getText(selection);
    if (!text.length) {
        return 'Nothing is selected.';
    }

    let tmpFile = null;
    try {
        tmpFile = await tmpp.file({ postfix: '.ts' });

        const textBuf = new TextEncoder().encode(text);
        await vscode.workspace.fs.writeFile(vscode.Uri.file(tmpFile.path), textBuf);

        const config = {
            path: tmpFile.path,
            // expose: "all",
            type: '*',
        };
        const jsonSchema = tsjsg.createGenerator(config).createSchema(config.type);
        const jsonText = JSON.stringify(jsonSchema, null, 2);

        const jsonDoc = await vscode.workspace.openTextDocument({
            language: 'json',
            content: jsonText
        });

        await vscode.window.showTextDocument(jsonDoc);
    }
    catch (e) {
        return e.message;
    }
    finally {
        tmpFile?.cleanup();
    }
}

GitHub Gist

参考ウェブサイトなど

• GitHub
  vega/ts-json-schema-generator

• GitHub
  benjamingr/tmp-promise

以上です。