如何在線上格式化 JSON:包含範例的完整指南

回到我的 WP Adminify 時代,一張支援票落地了,上面寫著:"設定導入損壞。沒有什麼可以工作的。 &引用;使用者手動編輯了一個匯出的設定檔 - 9,000 行 JSON 區塊的第 217 行有一個尾隨逗號 - 我的導入程式以 world&#39 回應;最不有用的錯誤: 導入失敗。

我寫了那條錯誤訊息。那'關於我。

我們兩個人花了 40 多分鐘來回找到一個逗號,一個像樣的格式化程式會在半秒內標記出來。這張票改變了我對 JSON 工具的看法,多年後它塑造了我如何建立 JSON 工具 json 格式化程式 在 toolz。dev 上:錯誤位置是 '這是一個不錯的選擇。它'是整個產品。

本指南涵蓋如何在線上格式化 JSON、格式化失敗的原因以及吞噬所有人的語法陷阱'最終下午 - 包括我的。

TL;DR: 若要在線上格式化 JSON,請將其貼上到客戶端工具中,例如 toolz。dev JSON 格式化程式- 它會立即列印漂亮的內容,用行號標記語法錯誤,並且永遠不會上傳您的資料。如果格式化失敗,您幾乎肯定有一個尾隨逗號、單引號或不引號的鍵。除非您的團隊另有說明,否則請使用 2 空間縮排。

&quot 有什麼作用;格式化 JSON"實際上做什麼?

格式化 - 漂亮的列印,如果您'感覺很花哨 - 添加了縮排和換行符,因此結構變得可見。資料沒有't 改變一位。 It'是簡報轉換,僅此而已。

這:

{"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
}

相同的數據。但只有其中一個可以讓你一眼發現簡在設計中。

There'大多數人都會得到一個獎勵'不要考慮:格式化也是變相驗證。格式化程式必須解析您的文件以重新格式化它,因此如果 JSON 被破壞,一個好的格式化程式會告訴您 在哪裡- 這是使用一種而不是瞇眼的真正原因。

您如何在實務上設定 JSON Online 格式?

整個工作流程約十五秒:

1. 複製 JSON 從它所在的任何地方 - DevTools Network 標籤(右鍵單擊請求 → 複製回應), curl 輸出、日誌檔案、同事's Slack 訊息。
2. 打開 json 格式化程式. 沒有註冊,沒有登入。它加載並粘貼。
3. 讀取輸出。 有效的 JSON 會以縮排和語法突出顯示的形式返回,其中包含大型文件的可折疊部分。無效的 JSON 會因行號和純英文描述而出現錯誤。
4. 複製或下載。 無論哪種方式,一鍵點擊。

那'是它。有趣的部分是'幸福之路 - it'當事情出錯時,第 3 步。所以讓'出了問題。

為什麼我的 JSON 不格式化?

如果格式化程式拒絕您的 JSON,則文件會違反語法 RFC 8259. 根據我的經驗 - 無論是從我自己的調試還是從構建工具中,人們都將他們損壞的 JSON 粘貼到 - it'幾乎總是五件事之一。

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"}
}

失蹤 ]. 這裡很瑣碎,在嵌套的六個關卡中很殘酷。這是一類錯誤,人類確實不擅長查找,而解析器會立即查找 - 將其外包。

5。 JavaScript 值為 't JSON

{ "value": undefined, "count": NaN }

undefined, NaN, 和 Infinity 是 JavaScript,而不是 JSON。 JSON.stringify 悄悄皈依 NaN 到 null 並掉落 undefined 完全屬性 - 這意味著錯誤通常是't 在 JSON you're looking, it's 上游的任何產生的。使用 null 明確地檢查您的序列化器。

的 格式化程序 抓住所有五個並附上行號。最後一句話就是這個工具類別存在的全部原因。

您應該使用 2 個空格、4 個空格或選項卡嗎?

永恆的辯論,JSON版。這裡'是誠實的比較:

我的位置,以及 I'會死在這座小山上: JSON 有 2 個空格,無論您的其他程式碼使用什麼。 JSON 的嵌套比典型原始程式碼更深 - API 回應四級和五級深度是正常的 - 4 空間縮排將它們變成水平滾動練習。即使在 Python 密集的團隊中,我也將 JSON 設定為 2 個空格,但沒有人抱怨過兩次。

無論您選擇什麼,都對其進行編碼,以便辯論結束:

# .editorconfig
[*.json]
indent_style = space
indent_size = 2
insert_final_newline = true

的 格式化程序 支援兩種寬度,因此匹配您的項目's 約定是下拉式,而不是討論式。

從命令列格式化怎麼樣?

有時終端機比瀏覽器標籤更近。我的實際使用情況:

# 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') 而不是閱讀整個文件。
• 瀏覽器工具 一次性的,任何你想做的事 探索 具有可折疊部分,並用於顯示隊友 - 您可以't 將 jq 表達式螢幕分享給專案經理。
• VS 代碼 (Shift+Alt+F) 適用於儲存在儲存庫中且無論如何都要開啟的 JSON 檔案。

我每天都會使用這三個。任何告訴你一個代替其他人的人都在賣東西。

值得偷竊的習慣: curl -s ... > response.json 第一的,然後格式化文件。當回應結果是一個 HTML 錯誤頁面時,會顯示 a Content-Type: application/json 服裝 - 發生的次數比我們任何人都希望的要多 - 您'會想要原始字節,而不是您的瀏覽器和#39;對它們的解釋。

大多數人跳過三種格式化技術

按字母順序對鍵進行排序。 不同的序列化器以不同的順序發出鍵,這使得 " 的差異;相同&引用;資料看起來像重寫。在 diffing 之前對鍵進行排序將 300 行 diff 變成實際更改的 2 行。這與完美配對 文字差異工具 當比較舞台表演和生產有效載荷時--這個技巧在至少兩起事件中拯救了我個人。

保持短數組內聯。 "colors": ["red", "green", "blue"] 一行讀起來比五行儀式讀起來好。好的格式化程式會自動對原語數組執行此操作;它'格式化的 JSON 和格式化的 JSON 之間的區別,您可以瀏覽並#39;技術上很漂亮,但長 4,000 行。

格式化片段,而不是檔案。 對於 15 MB 文檔,當您只關心一個物件時:複製該嵌套對象,單獨格式化它,完成。格式化整個文件以便您可以讀取其中的 40 行是浪費精力 - 但如果您確實需要整個文件,客戶端工具無需上傳進度條即可處理它,因為那裡'沒有上傳。

並知道什麼時候 不是 格式化:生產包中的縮小版 JSON 和 API 回應應保持縮小版。格式化是針對眼睛,而不是電線。如果您需要相反的方向,也是一樣的 工具 一鍵縮小。

常見問題

如何免費在線格式化 JSON?

將您的 JSON 貼到 toolz。dev JSON 格式化程式- 它立即格式化,語法突出顯示和錯誤檢查,免費,無需註冊。處理發生在您的瀏覽器中,因此您貼上的任何內容都不會上傳到任何地方。最後一部分比 "free&quot 更重要;如果有效負載包含令牌或使用者數據,則部分。

為什麼我的 JSON 格式不正確?

該文件存在語法錯誤,最容易懷疑的是尾隨逗號、單引號、未引號鍵、未轉義反斜線和不匹配的括號。驗證格式化程式將指向精確的行。如果錯誤毫無意義,請檢查您是否真的有 JSON - API 喜歡傳回帶有 JSON 內容類型的 HTML 錯誤頁面。

什麼'格式化和驗證 JSON 之間的區別?

格式化重寫空格以提高可讀性;根據 RFC 8259 語法驗證文件。在實踐中,它們'是相同的操作 - 格式化程式必須解析(驗證)才能重新格式化。那'為什麼&引用;它贏了't格式&引用;和&引用;它'無效&引用;是相同的診斷。

我應該使用 2 或 4 個空格來縮排 JSON?

使用 2 個空格,除非您的專案已經在 4 上標準化。JSON 的嵌套比大多數原始程式碼更深,並且 2 個空格縮排可保持現實世界的 API 回應可讀,而無需水平滾動。然後將選擇鎖定 .editorconfig 所以它再也沒有出現在程式碼審查中。

我可以在 VS Code 中格式化 JSON,而無需擴充嗎?

是的 - Shift+Alt+F (或者 Shift+Option+F 在 Mac 上)使用內建格式化程式格式化任何 JSON 文件,並且 "儲存和引用格式化;使其自動。請注意,VS 代碼和#39;擁有 settings.json 是 JSONC,它允許評論 - don'讓普通 JSON 相信這一點。

將 API 回應貼上到線上 JSON 格式化程式中安全嗎?

僅針對客戶端。許多格式化網站將您的輸入發佈到伺服器,這意味著您的 API 回應(令牌、電子郵件等)現在存在於其他人中's 日誌。這 toolz。dev 格式化程式 完全在瀏覽器中運作;在貼上時透過查看網路標籤自行驗證。

如何格式化巨大的 JSON 檔案 (10 MB+)?

客戶端瀏覽器工具可以很好地處理此範圍內的文件,因為那裡'沒有上傳步驟 - 貼上是緩慢的部分。超過 50 MB 左右,切換到串流工具: jq 在命令列上,或僅提取您需要的部分並對其進行格式化。切勿將大量檔案貼上到基於伺服器的工具中;你'正在等待上傳,但沒有任何好處。

如何縮小 JSON 而不是格式化它?

相同的工具,相反的按鈕 - json 格式化程式 具有一鍵縮小模式,可剝離所有空白。 Minify 用於生產有效負載、本地儲存和日誌管道;人類的格式。無論哪種方式,數據都是相同的。

格式化 JSON 會改變資料嗎?

不 - 格式化只會重寫空白,因此鍵、值和結構在含義上保持相同。格式化的文件及其縮減版本解析為完全相同的物件。如果您的資料確實發生變化,您會手動編輯某些內容,而不僅僅是格式化。

什麼是 JSON 美容機?

It'是 JSON 格式化程式的另一個名稱 - 一種工具,它採用縮小或混亂的 JSON 並添加縮排和換行符,以便人類可以閱讀它。 &引用;美化,&引用; &引用;漂亮印刷,&引用;和&引用;格式&引用;都描述相同的操作。這 json 格式化程式 一次性即可完成。

十五秒習慣

格式化 JSON 是一項小技能,但回報卻很大 - 大多數 " API 被破壞"時刻確實是"有效負載不可讀"瞬間,這些瞬間溶解了結構變得可見的那一刻。將貼上格式讀取循環減少到十五秒,整個調試摩擦類別就會消失。

的 toolz。dev 上的 JSON 格式化程式 這是我在支援票證期間想要的該工具的版本:即時、準確地了解錯誤,並且無法洩露您的數據,因為它永遠不會收到它。

一旦您的 JSON 乾淨,下一步通常是將其移至某個位置 - 進入電子表格 JSON 到 CSV 轉換器,退後一步 CSV 到 JSON 轉換器,或透過 輸入配置管道 yaml 驗證器. 從開始 JSON 到 CSV 指南 或回到 完整的 JSON 工具指南 對於完整的地圖。

相關文章:

• JSON 工具終極指南 (2026)
• JSON 到 CSV 的轉換:開發人員在 2026 年使用的 5 種方法
• 免費線上文字工具指南