StructGridEditor
JSON, JSONL, YAML 形式の構造化データをスプレッドシート形式で閲覧・編集できる VS Code 拡張機能です。
任意の階層にネストされたデータを元の書式を損なうことなく編集できます。
主な機能と仕様
1. 対応フォーマット
- JSON:
*.json
- JSONL:
*.jsonl
- YAML:
*.yaml, *.yml
2. 起動方法
- エクスプローラーのファイル右クリック:
.json, .yaml / .yml, .jsonl を右クリックし、「プログラムから開く... (Open With...)」→「StructGridEditor」 を選択。
- エディタータブの右クリック: タブを右クリックし、「プログラムから開く... (Open With...)」→「StructGridEditor」 を選択。
- 右クリックメニューのショートカット: 上記右クリックメニューから 「StructGridEditor で開く」 を選択。
3. テキストエディタへの復帰
- 画面右上のツールバーにある 「テキストで開く」 ボタンをクリックすると、VS Code 標準の通常のテキストエディタへとワンクリックで戻ることができます。
グリッドエディタの仕様
1. 配列データ(トップレベル配列・JSONL): スプレッドシート表示
samples/json/simple-list.json や samples/jsonl/simple-list.jsonl のようなオブジェクトの配列形式のデータ(JSON / YAML / JSONL)を開いた場合、各オブジェクトのプロパティを列とし、各要素を行とするスプレッドシート形式で表示されます。
- セル編集、配列に対しての行追加、列追加などの編集ができます。
2. オブジェクトデータ(K,V): ツリー表示 & 配列ドリルダウン機能
- トップレベルがオブジェクト(キー・バリュー形式)である場合、階層ツリー・パス表示が行われます。
- データ内に配列が存在する場合、初期状態では要素ごとに展開されず、値の列に 「編集する」 ボタンが表示されます。
- クリックすると、該当配列のスプレッドシート(テーブル)画面に切り替わります。
3. セル編集と型推論
- 直接編集: 値のセルをクリックすることで、その場でテキスト編集が可能です。
- 自動型推論:
true / false と入力 → boolean として保存
123 や 45.67 と入力 → number として保存
null と入力 → null として保存
- その他の文字列 →
string として保存
4. リアルタイム検索フィルター
- 画面上部の検索ボックスにキーワードを入力すると、パス名 または 値 に一致する行のみが即座に絞り込み表示されます。
- インデント: 元ファイルのインデント幅(2スペース、4スペース、タブなど)を自動検知し、編集後も同一スタイルで再シリアライズされます。
- 末尾改行: 元ファイルに末尾改行が存在するかを検知し、維持します。
- YAML コメント: 編集対象外のコメントやドキュメント構造を損なわないよう保持されます。
6. キーボード操作(Excel / Google スプレッドシート ライク)
スプレッドシートビューでは、Excel や Google スプレッドシートに近い直感的なキーボード操作が可能です。
| キー操作 |
動作 |
Enter / テンキー Enter |
現在セルの値を確定し、直下の行の同一列セルへフォーカス移動 |
Shift + Enter |
値を確定し、直上の行の同一列セルへフォーカス移動 |
Tab |
現在セルの値を確定し、右隣のセルへフォーカス移動(行末で次行先頭へ折り返し) |
Shift + Tab |
値を確定し、左隣のセルへフォーカス移動(行頭で前行末尾へ折り返し) |
↑ / ↓ / ← / → (矢印キー) |
セル選択時に上下左右のセルへ移動 |
Alt + Enter または Ctrl + Enter |
セル内に改行を挿入 |
Ctrl + A (編集中) |
現在編集セル内のテキストを全選択(テーブル全選択にはならない) |
Ctrl + A (非編集時) |
テーブル全体を選択 |
- セル内に改行コードが含まれる場合、セル内で折り返して複数行表示されます。
| |