バック私のWP Adminify日では、サポートチケットが着陸した、単に読み: " 設定インポート壊れた何も動作しません. " ユーザーは、エクスポートされた設定ファイルを手編集していた - 9,000 行のJSONブロブの行217 に1 つのトレーリングカンマ - と私のインポーターは、world& #39; s最も役に立たないエラーで応答しました: インポートに失敗しました。
そのエラーメッセージを書きました。 それは私にかかっています。
2 人のうち 2 人が 40 分ほどのやり取りで、まともなフォーマッターが 0.5 秒でフラグを立てたであろうコンマを 1 つ見つけるのにかかった。 JSON ツールについての考え方が変わり、数年後には、そのチケットが、 JSON フォーマッタ Toolz.dev では: エラーの場所は、あると便利ではありません。 それは製品全体です。
このガイドでは、JSON をオンラインでフォーマットする方法、フォーマットが失敗する理由、全員を食べる構文トラップ & #39; について説明します。午後は最終的に - 私のものも含めて。
tl;dr: JSON をオンラインでフォーマットするには、次のようなクライアント側のツールに貼り付けます。 Toolz.dev json フォーマッター 即座にかなり印刷し、構文エラーに行番号でフラグを立て、データをアップロードすることはありません 書式設定に失敗した場合、ほぼ確実に末尾にカンマ、シングルクォーテーション、または引用符で囲まれていないキーがある場合に限り、チームが別段の指示をしない限り、2 スペースのインデントを使用します。
「JSON のフォーマット」は実際に何をしますか?
フォーマット - かなり印刷, もしあなたが & #39; 派手な感じ - 構造が見えるようにインデントと改行を追加します。データは & #39; t 一ビットずつ変化します。 It& #39; s プレゼンテーション変換、それ以上のものはありません。
これ:
{"employees":[{"firstName":"John","lastName":"Doe","department":"Engineering","skills":["JavaScript","Python","Docker"]},{"firstName":"Jane","lastName":"Smith","department":"Design","skills":["Figma","CSS","Illustration"]}],"company":"Acme Corp","founded":2015}
これになります：
{
"employees": [
{
"firstName": "John",
"lastName": "Doe",
"department": "Engineering",
"skills": ["JavaScript", "Python", "Docker"]
},
{
"firstName": "Jane",
"lastName": "Smith",
"department": "Design",
"skills": ["Figma", "CSS", "Illustration"]
}
],
"company": "Acme Corp",
"founded": 2015
}
同一データ。 しかし、ジェーンがデザインしていることを一目でわかるのは、そのうちの 1 つだけです。
ほとんどの人が考えていないのは、フォーマット化は変装の検証でもあります。 フォーマッタは、ドキュメントを再フォーマットするために文書を解析する必要があるため、JSON が壊れている場合は、適切なフォーマッタが教えてくれます。 どこ- これが、目を細める代わりに目隠しを使用する実際の理由です。
実際に JSON をオンラインでどのようにフォーマットしていますか?
ワークフロー全体は約 15 秒です。
- JSON をコピーする どこからでもそれが住んでいる - DevTools Networkタブ (右クリックリクエスト→応答のコピー) 、
curl出力、ログ ファイル、同僚の Slack メッセージ。 - を開きます JSON フォーマッタ。 サインアップもログインもありません。 ロードされ、貼り付けられます。
- 出力を読みます。 有効な JSON は、大きなドキュメント用の折りたたみ可能なセクションを使用して、インデントと構文ハイライトで戻ってきます。 無効な JSON は、行番号と平易な英語の説明でエラーを取得します。
- コピーまたはダウンロード。 どちらの方法でもワンクリック。
That's it.面白い部分はisn't幸せな道 - it'sステップ3 when things go wrong.だからlet's go wrong.
JSON がフォーマットされないのはなぜですか?
フォーマッタが JSON を拒否した場合、ドキュメントは、次の文法に違反しています。 RFC 8259。私の経験では、私自身のデバッグと、人々が壊れた JSON を貼り付けるツールの構築の両方から、it' s はほぼ常に 5 つのうちの 1 つです。
1. トレーリング・コンマ
{
"name": "Alice",
"age": 30,
}
SyntaxError: Unexpected token } in JSON at position 34
JavaScript ではこれが可能です JSON は決して持っていません。 すべてのオブジェクトと配列の最後の項目の後にカンマを削除します。
{
"name": "Alice",
"age": 30
}
これは私のサポート チケット コンマです。 それを尊重してください。
2.一重引用符
{ 'name': 'Alice' }
古典的な Python が教えて str(my_dict) 単一引用符で囲まれた疑似 JSON を生成します。 json.dumps(my_dict) 本物を生産します。 json であると主張する何かに単一の引用符が表示されている場合、誰かがそれをシリアル化する代わりに口述筆記体を印刷しました - I'それを行いました、あなた'それを行いました、私たち'すべてもう一度行います。
{ "name": "Alice" }
3. 脱出されていないバックスラッシュ
{ "path": "C:\new\test" }
無害に見えます。 だが、 \n 改行であり、 \t はタブなので、これは実際の改行を含むパスに解析されます。または、次のようなシーケンスでは完全に失敗します \x。 Windows パスは、一番の犠牲者です。
{ "path": "C:\\new\\test" }
4. ブラケットの不一致
{
"users": [
{"name": "Alice"},
{"name": "Bob"}
}
行方不明 ]。 trivial ここ, brutal 残忍な in a config ネストされた six levels deep. これはエラーのカテゴリです。 humans は本当に見つけるのが苦手で、パーサーは即座にそれを見つけます - アウトソーシングします。
5. JSON ではない JavaScript 値
{ "value": undefined, "count": NaN }
undefined、 NaN、そして Infinity JSON ではなく、JavaScript です。 JSON.stringify 静かに変換 NaN にする null そしてドロップ undefined プロパティは、完全に - これは、バグがしばしばisn& #39; tでJSON you& #39; reを見て、それを生成したものは何でもit& #39; s上流で使用します null 明示的にシリアライザーを確認してください。
ザ・ フォーマッタ 行番号を付けた 5 つすべてをキャッチします。 最後の文が、このツール カテゴリが存在する理由です。
2 つのスペース、4 つのスペース、またはタブを使用する必要がありますか?
永遠の討論、JSON 版。 正直な比較は次のとおりです。
| 2スペース | 4スペース | タブ | |
|---|---|---|---|
| 生態系 | JavaScript/TypeScript、NPM、React | Python、Java、.NET | 行け、レガシーコードのいくつか |
| ディープネスティング | 画面に表示されたまま | 右端から離れる | タブの幅によって異なります |
| 読みやすさの違い | うまい | うまい | スペースが混ざるまではいい |
JSON.stringify デフォルト引数 |
2 (慣習により) |
4 |
"\t" |
| 私の評決 | JSON のデフォルト | あなたのチームが Python よりも優先していれば問題ありません | JSON の場合は、特に |
私の立場、そして私はこの小さな丘で死ぬでしょう: 他のコードが何を使用しているかに関係なく、JSON 用の 2 つのスペース。 JSON は一般的なソース コードよりも深くネストします。API 応答は 4 レベルと 5 レベルの深さは正常です。4 空間のインデントにより、JSON は水平スクロール演習に変わります。 Python の多いチームでも、JSON を 2 空間に設定しましたが、誰も二度苦情を言ったことはありません。
何を選んでも、それをエンコードして、議論が終わるようにします。
# .editorconfig
[*.json]
indent_style = space
indent_size = 2
insert_final_newline = true
ザ・ フォーマッタ 両方の幅をサポートしているので、プロジェクトの規則に一致することは、議論ではなくドロップダウンです。
コマンドラインからのフォーマットはどうですか?
端末がブラウザー タブよりも近い場合があります。 私の実際の使用法:
# jq — the standard. Install it, learn 10% of it, profit.
curl -s https://api.example.com/users | jq .
# Python — already on basically every machine
curl -s https://api.example.com/users | python -m json.tool
# Node, if you enjoy typing
node -e "console.log(JSON.stringify(JSON.parse(require('fs').readFileSync(0,'utf8')),null,2))" < data.json
正直なところ、それぞれが勝つ場所:
- jq スクリプト化、反復、またはパイピングされたものすべてに対して - およびフィールドを抽出するために ()
jq '.data.users[].email') 文書全体を読むのではなく。 - ブラウザ ツール 1 回限りの場合、何でもしたいものに 探検する 折りたたみ可能なセクションがあり、チームメイトを表示するには、jq 式をプロジェクト マネージャーに画面共有できます。
- VSコード (
Shift+Alt+F) は、リポジトリに存在し、とにかく開いている JSON ファイルの場合。
3つすべてを毎日使用しています。 1 つを代わりに言う人は、何かを売っています。
盗む価値のある習慣の 1 つ: curl -s ... > response.json 先にをクリックしてから、ファイルをフォーマットします。 応答が HTML エラー ページであることが判明した場合 Content-Type: application/json コスチューム - 私たちの誰もが望む以上に起こります - あなたと #39;ブラウザではなく元のバイトが必要です & #39; それらの解釈。
3 つの書式設定方法 ほとんどの人はスキップします
キーをアルファベット順に並べ替えます。 異なるシリアライザは、異なる順序でキーを発行するため、「同じ」データの差分が書き換えのようになります。 差分前にキーを並べ替えると、300 行の差分が実際に変更された 2 行に変わります。 これは、 テキスト差分ツール ステージングと本番ペイロードを比較すると、少なくとも 2 つのインシデントで個人的に救われたトリックです。
短い配列をインラインに保ちます。 "colors": ["red", "green", "blue"] 1 行で 5 行のセレモニーよりもよく読みます。 優れたフォーマッタは、プリミティブの配列に対して自動的にこれを行います。これは、技術的にはきれいですが、4,000 行の長さの JSON をスキミングできるフォーマットとフォーマットされた JSON の違いです。
ファイルではなく、フラグメントをフォーマットします。 15 MB のドキュメントの場合、オブジェクトは 1 つだけ気にします。ネストされたオブジェクトをコピーし、単独でフォーマットし、完了します。ファイル全体をフォーマットして 40 行を読み取れるようにするのは無駄な労力です。ただし、全体が必要な場合は、クライアント側のツールがアップロード進捗バーなしで処理します。なぜなら、there's はアップロードしないからです。
そしていつ知っているか でないよ フォーマットするには: プロダクション バンドルと API レスポンスで JSON を縮小したままにする必要があります。 書式設定は、配線ではなく、目用です。 反対方向が必要な場合は、同じです ツール ワンクリックで縮小。
よくある質問
JSON をオンラインで無料でフォーマットするにはどうすればよいですか?
JSON に貼り付けます。 Toolz.dev json フォーマッター構文の強調表示とエラーチェックで即座にフォーマットし、無料、サインアップなし。処理はブラウザで行われるため、どこにでも貼り付けるものはアップロードされません。最後の部分は、"free" よりも重要です。ペイロードにトークンまたはユーザー データが含まれている場合の部分。
JSON が正しくフォーマットされないのはなぜですか?
ドキュメントには構文エラーがあり、上位容疑者は後続のカンマ、一重引用符、引用符なしのキー、エスケープされていないバックスラッシュ、および不一致の括弧です。 validates を実行するフォーマッターは正確な行を指します。エラーが意味をなさない場合は、実際に JSON を持っているかどうかを確認してください。API は、JSON コンテンツ タイプの HTML エラー ページを返すのが大好きです。
JSON のフォーマットと検証の違いは何ですか?
書式設定は、読みやすさのために空白を書き換えます; 検証は、RFC 8259 文法に対してドキュメントをチェックします。実際には、それらは& #39;同じ操作です - フォーマッタは再フォーマットする前に解析 (検証) する必要があります。それ& #39;s なぜ "it が勝ったのか& #39;t 形式と引用;そして "it と #39;s が無効である" は同じ診断です。
JSON インデントには 2 つまたは 4 つのスペースを使用する必要がありますか?
プロジェクトが 4 で既に標準化されていない限り、2 つのスペースを使用してください。JSON はほとんどのソース コードよりも深くネストされ、2 スペース インデントにより、水平スクロールなしで実際の API 応答が読み取れます。 次に、選択肢をロックします .editorconfig そのため、コード レビューでは二度と出てくることはありません。
拡張機能なしで VS コードで json をフォーマットできますか?
はい - Shift+Alt+F （または Shift+Option+F Mac では、JSON ファイルを組み込みのフォーマッタでフォーマットし、「保存時」に「フォーマット」を自動化します。 VS Code 自身のものであることに注意してください settings.json は JSONC で、コメントを許可します - don'通常の JSON がそうであると確信させます。
API 応答をオンライン JSON フォーマッターに貼り付けても安全ですか?
クライアント側のものにのみ。 plenty of formatter sites POST your input to the server, which means your API response - tokens, emails, all of it - now exists in someone else's logs.フォーマッタサイトの多くは、サーバーへのあなたの入力、つまりトークン、電子メール、そのすべてが、誰かの他の& #39; sログに存在することを意味します Toolz.dev フォーマッタ ブラウザーで完全に実行されます。貼り付け中にネットワーク タブを確認して、自分で確認してください。
巨大な JSON ファイル (10 MB+) をフォーマットするにはどうすればよいですか?
クライアント側のブラウザツールは、there& #39; sのアップロード手順がないので、この範囲のファイルをうまく処理します - ペーストは遅い部分です 過去50 MBかそこら、ストリーミングツールに切り替えます: jq コマンド ラインで、または必要なセクションだけを抽出してフォーマットします。 サーバーベースのツールに巨大なファイルを貼り付けないでください。アップロードを待っているのはメリットなしです。
JSON をフォーマットせずにミニファイトするにはどうすればよいですか?
同じツール、反対側のボタン - JSON フォーマッタ ワンクリックですべての空白を取り除くミニファイト モードがあります。 生産ペイロード、ローカルストレージ、ログ パイプラインを縮小し、人のためフォーマット。 データはどちらの方法でも同じです。
JSON をフォーマットするとデータが変更されますか?
いいえ - フォーマットは空白を書き換えるだけなので、キー、値、構造は意味において同一です フォーマットされたドキュメントとその縮小版は、まったく同じオブジェクトに解析します データが実際に変更された場合、単にフォーマットするのではなく、手作業で何かを編集します。
JSON 美容師とは何ですか?
It' s JSONフォーマッターの別の名前 - ミニファイドまたは乱雑なJSONを取り、人間がそれを読むことができるようにインデントと改行を追加するツール。 "Beautify, " "pretty-print, " と "format" すべて同じ操作を説明しています JSON フォーマッタ 1回のペースで行います。
15秒の習慣
JSON の書式は、特大のリターンを持つ小さなスキルです - ほとんどの " API は壊れています " モーメントは本当に " ペイロードは読み取り不能です " モーメント、およびそれらの溶解は、構造が見えるようになる秒ペースト-フォーマット-読み取りループを 15 秒まで下げると、デバッグ摩擦のカテゴリ全体が消えます。
ザ・ Toolz.dev の JSON フォーマッタ サポート チケットの最中に必要としていたこのツールのバージョンです。エラーについて即座に正確に把握でき、データを受信しないため、データを漏らすことができません。
JSON がクリーンになったら、次のステップは通常、JSON をどこか、つまりスプレッドシートに移動します JSON から CSV へのコンバータ、1 つから戻って、 CSV から JSON へのコンバータ、または、 YAML バリデータ。 から始めます JSON から CSV ガイド または、に戻る 完全な JSON ツール ガイド 完全なマップの場合。
関連記事:
