Schema Form Editor

JSON Schema から、YAML / JSON の編集フォームを自動で作る VS Code 拡張機能です。 CMS のような画面で、コードを書かない人でも設定ファイルを編集できます。

スキーマを紐付けるだけでフォームが出る(DIRDESC に限らず、任意の JSON Schema に対応)
YAML も JSON(コメント付き JSONC も)も同じように編集できる
vscode.dev で動く。サーバーを立てる必要はなく、画面(UI)は拡張機能に同梱されています
保存・Undo/Redo・Git の差分は、普通のテキストファイルと同じ
編集するのは変更した箇所だけ。コメント・空行・引用符・インデントを保ちます(下の「編集の挙動」)

使い方

1. スキーマを紐付ける(3通り。上が優先)

方法	書き方
A. ファイル内に書く	YAML: 先頭に `# yaml-language-server: $schema=./path/to/schema.json` JSON: ルートに `"$schema": "./path/to/schema.json"`(フォームには表示されません)
B. 設定でパターン指定	`.vscode/settings.json` の `schemaForm.schemas`(`yaml.schemas` と同じ形式)
C. 既存の設定を流用	`yaml.schemas` / `json.schemas` も参照されます(`kubernetes` は無視)

// .vscode/settings.json
{
	"schemaForm.schemas": {
		"./schemas/post.schema.json": [
			"content/posts/*.yaml",
			"content/posts/*.json"
		]
	}
}

スキーマが未設定のファイルをフォームで開くと「スキーマを選択して紐付ける」ボタンが出ます。押すと、ワークスペース内の JSON / YAML から選べて、A の書き方を自動で入れます。

相対パスの基準: A はそのファイルの場所、B・C はワークスペースのルート。http(s):// の URL も指定できます。

2. フォームで開く

エクスプローラーでファイルを右クリック → Open With… → Schema Form Editor (またはコマンドパレットの View: Reopen Editor With…。メニュー名の日本語表記は環境によって異なります)
YAML / JSON を開いているとき、エディタ右上に出る「Schema Form Editor で開く」ボタン
常にフォームで開くにするには .vscode/settings.json に書きます(リポジトリに入れれば全員に効きます):

{
	"workbench.editorAssociations": {
		"**/content/*.yaml": "schemaForm.editor",
		"**/content/*.json": "schemaForm.editor"
	}
}

フォームの右上の「テキストで開く」で、同じファイルを横にテキストで開けます。どちらで編集してももう片方に反映されます。

3. 非エンジニアに vscode.dev で使ってもらう

拡張機能を Marketplace(または Open VSX)に公開する(下の「公開」)
リポジトリに .vscode/extensions.json を置く → 開いた人に「推奨拡張機能」として表示されます
```
{ "recommendations": ["<publisher>.schema-form-editor"] }
```
上の workbench.editorAssociations をリポジトリの .vscode/settings.json に入れる
https://vscode.dev/github/<owner>/<repo> を開いてもらう

注意: vscode.dev で保存・コミットするには、その人が GitHub アカウントとリポジトリへの書き込み権限を持っている必要があります。これは拡張機能ではなく vscode.dev の前提です。

対応しているスキーマ

フォームの生成は react-jsonschema-form (RJSF) + MUI、検証は Ajv です。対応範囲は基本的に RJSF に準じます。

動作確認済み(自動テストで確認):

ドラフト: $schema を見て 2020-12 / 2019-09 / draft-07 のバリデータを切り替え
型・enum・required・format: date / email・minLength / pattern などの制約
$ref(同一ファイル内、別ファイルへの参照も結合して解決。循環参照でも止まりません)、$defs
oneOf、配列(並べ替え・追加・削除)、prefixItems、ネストしたオブジェクト、x-uiSchema
再帰スキーマ(循環を検出して「展開」ボタンで1階層ずつ開く)
検証エラーは入力中に日本語で表示。ツールバーに件数も出ます

RJSF の機能としては対応しているが、このプロジェクトのテストでは個別に確認していないもの: anyOf / allOf / if-then-else、additionalProperties、patternProperties など。 draft-04 / 06 のスキーマは draft-07 として扱います(draft-04 固有の書き方、たとえば真偽値の exclusiveMinimum は未対応)。

見た目の調整: `x-uiSchema`

スキーマのルートに x-uiSchema を書くと、RJSF の uiSchema として使われます。

{
	"type": "object",
	"properties": { "body": { "type": "string", "title": "本文" } },
	"x-uiSchema": {
		"body": { "ui:widget": "textarea", "ui:options": { "rows": 8 } }
	}
}

title / description がそのままラベルと説明文になるので、日本語で書くと分かりやすくなります。 x- で始まる独自キーワードは検証では無視されます。

編集の挙動

フォームの変更は、ファイル全体を書き直さず変更箇所だけを更新します。

操作	結果
既存の値を変える(文字・数値・チェック・選択)	その値の文字だけを差し替え。他の行は一字一句そのまま(コメント・引用符・インデント・`[a, b]` の書き方)
項目の追加・削除、配列の増減	該当箇所を更新。ファイル全体を再出力するため、行末コメント前の余分な空白が1つに揃うことがあります。コメント自体、空行、引用符、インデント幅、`-` の位置は保たれます
開いただけ	何も書き込みません(スキーマの `default` を補完して表示しても、入力するまでファイルは変わらない)

入力が止まって 0.4 秒後(schemaForm.debounceMs)、またはフォーカスが外れたときにファイルへ反映
書き込み前に結果を再パースして確認し、意図と違う内容になる場合は書き込まずに警告します
ファイルが構文エラーのとき、フォームは編集不可になります(テキストで直すと自動で復帰)

制約・注意点

YAML の複数ドキュメント(--- 区切り)、エイリアス(*a)を経由した値の編集はフォームから編集できません(警告が出ます。テキストで編集してください)
検証エンジン(Ajv)がスキーマを関数にコンパイルするため、Webview の CSP に 'unsafe-eval' を含めています。読み込むスクリプトは拡張に同梱したものだけです
http(s):// のスキーマは 信頼されたワークスペースでのみ取得します
スキーマ(および $ref 先)をエディタで開いて編集した場合は自動で再読込されます。ディスク上で変わった場合(git pull など)は、ツールバーの「スキーマ再読込」を押してください
Red Hat 公式の YAML 拡張(redhat.vscode-yaml)と併用すると、テキスト編集側でも補完・検証が効きます。同じ # yaml-language-server: $schema= の書き方を使うので、設定は共通です(ただし同拡張は JSON Schema draft-07 までの対応です)

開発

npm install
npm run typecheck      # 型チェック
npm test               # 単体・結合テスト(vscode API はモック)
npm run build          # dist/ にバンドル(拡張ホスト + Webview)
npm run test:browser   # ビルド済み Webview を実 Chrome で動かして検証(既定は /usr/bin/google-chrome。CHROME_PATH で変更可)
npm run web            # 本物の VS Code Web(vscode.dev と同じ作り)に拡張を読み込んで ./examples/basic を開く

npm run web は VS Code の Web 版をダウンロードして Chromium を起動します。 examples/basic/ に動作確認用のスキーマ・YAML・JSON・設定が入っています。

構成:

src/core/          vscode に依存しない処理(差分・YAML/JSON の部分更新・glob・スキーマ紐付け・$ref 結合)
src/host/          拡張ホスト側(スキーマ解決・書き込み・Webview との通信)
src/webview/       フォーム画面(React + RJSF + MUI)
test/              単体 / 拡張ホストの結合 / ブラウザのテスト

公開

package.json の publisher を自分の ID に変更(現在は仮の your-publisher-id)。repository も追記
npm run package → schema-form-editor-*.vsix
npx vsce publish(Marketplace)/ npx ovsx publish(Open VSX)

.vsix を vscode.dev に直接インストールすることはできません(デスクトップ版の VS Code では「VSIX からのインストール」で試せます)。 vscode.dev で使うには、公開した拡張機能をインストールします。

ライセンス

MIT

Schema Form Editor

大角 麟太郎

Schema Form Editor

使い方

1. スキーマを紐付ける(3通り。上が優先)

2. フォームで開く

3. 非エンジニアに vscode.dev で使ってもらう

対応しているスキーマ

見た目の調整: x-uiSchema

編集の挙動

制約・注意点

開発

公開

ライセンス

大角麟太郎

見た目の調整: `x-uiSchema`