在 VS Code 中格式化 JSON 檔案只需要一個快捷鍵 — Windows 或 Linux 是 Shift+Alt+F,macOS 則是 Shift+Option+F — 編輯器內建的格式器就會就地美化目前開啟的檔案,並遵守你專案所設定的 tab 大小以及空格或 tab 的偏好。這個單一指令就能處理大多數日常檔案,從乾淨的 package.json 到貼到暫存緩衝區裡被壓縮過的 API 回應。當它力有未逮時,通常是落在中間那個尷尬地帶:你不想 commit 的私密回應、VS Code 只用模糊的紅色波浪線標示的單一字元語法錯誤,或是送到行動端之前需要壓縮的 payload。針對這些情境,以瀏覽器為基礎的 JSON Formatter 提供更快、更透明的工作流程:貼上原始文字、選擇 2 空格、4 空格或 tab 縮排,然後按下 Format 就能看到一個可複製回 VS Code 的美化樹狀結構。由於解析器是 JavaScript 引擎原生的 JSON.parse — 相容於 ECMA-404 與 RFC 8259 — 輸出永遠符合標準;又因為整個處理完全在用戶端執行,即使 payload 內含權杖或憑證,也不會離開這個頁面。
優先使用 VS Code 內建的格式器
大多數開發者會優先選擇 VS Code 內建的格式器,因為它只要兩個按鍵就能啟動,而且使用的是驅動 IntelliSense 的同一個 JSON 語言伺服器。若要觸發它,請開啟 JSON 檔案、將游標放在任何位置,然後按下 Shift+Alt+F(Windows/Linux)或 Shift+Option+F(macOS)。文件會依照編輯器目前的縮排設定 — editor.tabSize 與 editor.insertSpaces — 進行就地重新格式化,這兩個設定會從你的使用者或工作區的 settings.json 讀取。如果你比較喜歡從選單選擇指令,可以用 Ctrl+Shift+P(或 Cmd+Shift+P)開啟指令選擇區,然後執行 Format Document。
對於副檔名為 .jsonc 的檔案 — 即帶有註解的 JSON,常用於 tsconfig.json、jsconfig.json 以及許多 VS Code 工作區檔案 — 同一個快捷鍵仍然有效,因為編輯器在格式化時會把文件視為類 JSON 來處理。如果啟用了 editor.formatOnSave,格式器也會在存檔時自動執行,大多數團隊會透過共用的 .editorconfig 或工作區設定來開啟這個選項。當 VS Code 的格式器拒絕執行時,原因幾乎都是潛在的剖析錯誤:尾端的逗號、單引號包起來的鍵,或是字串中未跳脫的反斜線。紅色波浪線會標示出問題的範圍,但錯誤訊息很少能精確指出欄位 — 這正是以瀏覽器為基礎的驗證工具能補足的缺口。
在瀏覽器的 JSON 格式器中開啟同一個檔案
當 VS Code 的快捷鍵不夠用時 — 無論是需要精準定位的語法錯誤、你不想 commit 的私密 payload,或是編輯前需要先讀懂的壓縮內容 — 改把檔案的原始文字貼到以瀏覽器為基礎的 JSON 格式器。整個工作流程分為三個具體步驟。
- 把你的 JSON 貼到或輸入到輸入框中。如果 JSON 來自 curl 或網路面板,直接複製原始內容,不要先嘗試清理 — 格式器會處理剩下的部分。
- 選擇一種縮排樣式 — 2 空格、4 空格或 Tab — 然後按下 Format 來美化文件,讓它變成可以捲動瀏覽的樹狀結構;或按 Minify 把它壓縮成單行。
- 閱讀錯誤訊息或複製結果。如果 JSON 無效,請讀取錯誤訊息中回報的行數與欄位;否則就用 Copy 按鈕複製格式化或壓縮後的結果,再貼回 VS Code。
由於解析過程是透過 JavaScript 引擎原生的 JSON.parse,輸出是標準化的:結構與數值會完全原樣回傳,只有空白字元會改變。壓縮的情況也是如此 — 所有空格與換行都會被移除,但資料經過 JSON.stringify 來回轉換後,仍然符合標準規範。你可以將壓縮後的結果貼回 VS Code、存成 .json 檔,或直接作為 API payload 交付,完全不必擔心格式化的過程會動到內容。
格式化與壓縮:各自的適用時機
格式化與壓縮其實是同一個操作的兩個相反方向。格式化(也稱為 beautify 或 pretty-print)會加上換行與縮排,讓巢狀的物件與陣列變得易讀;壓縮則會移除所有空格與換行,以產生最小的合法 payload。兩者保留的資料完全相同 — 只有空白字元不同。
| 使用情境 | 選擇格式化 | 選擇壓縮 |
|---|---|---|
| 偵錯 API 回應 | 適合 — 把 5,000 字元的單行 blob 變成可瀏覽的樹狀結構 | 不適合 |
| 在 commit 前清理設定檔 | 適合 — 符合團隊的風格 | 不適合 |
| 透過網路傳輸 JSON | 不適合 | 適合 — 在 gzip 之前先縮小 payload 體積 |
| 將 JSON 嵌入 URL 或資料庫欄位 | 不適合 | 適合 — 移除縮排與換行 |
| 閱讀別人壓縮過的檔案 | 適合 — 編輯前的第一步 | 不適合 |
縮排的選擇同樣重要。如果某個鍵巢狀到第六層,從 2 空格改成 4 空格會讓每個鍵多出 6 × (4 − 2) = 12 個字元 — 對單一鍵來說差異不大,但在大型設定檔中會累積起來。請選擇與周圍程式碼庫一致的縮排,讓 diff 保持乾淨。
壓縮所帶來的體積縮減是真實的,但並非沒有代價。在 gzip 之前,移除典型格式化 payload 的縮排與換行就能明顯減少字元數,這對行動端用戶與受限的頻寬特別重要。若想在 VS Code 內逐步執行壓縮、又不破壞大型整數,可以參考 這份在 VS Code 中壓縮 JSON 的教學。
格式器會抓到的常見 JSON 錯誤
以瀏覽器為基礎的格式器最大的優勢,在於它能提供精確的錯誤報告。當 JSON 無法被剖析時,VS Code 只會顯示紅色波浪線與一個大致範圍,但直接使用 JSON.parse 的格式器能精準回報第一個失敗點所在的行數與欄位。最常出現的錯誤通常長這樣:
| 錯誤 | JSON 拒絕的原因 | 修正方式 |
|---|---|---|
| 最後一個項目後面的尾端逗號 | 在 JavaScript 中合法,但在 JSON 中不合法 | 刪除逗號 |
| 字串或鍵使用單引號 | JSON 規定必須使用雙引號 | 改成 " |
| 物件鍵未加引號 | 鍵必須是字串 | 用 " 將鍵包起來 |
| 註解(// 或 /* */) | JSON 規格完全不允許 | 移除註解,或將副檔名改為 .jsonc |
如果你曾經貼上一個「看起來沒問題」卻被應用程式拒絕的設定檔,原因幾乎一定是其中之一。格式器所提供的行數與欄位資訊,能讓原本五分鐘的除錯過程縮短為兩秒。
為什麼瀏覽器格式器能與 VS Code 互補
VS Code 內建的格式器速度很快,而且隨時可用;但以瀏覽器為基礎的格式器能佔有一席之地,有以下三個具體原因。第一,驗證更精準:行數與欄位的錯誤報告永遠勝過模糊的紅色波浪線,尤其是當問題字元出現在 2,000 行檔案中的某個尾端逗號時。第二,所有處理完全在用戶端進行。剖析與序列化使用的是 JavaScript 引擎原生的 JSON.parse 與 JSON.stringify,這代表你的 JSON 不會離開這個頁面。這與那些會把你的資料 POST 到後端的線上工具有明顯差異,也讓你可以放心地處理私體 API 回應、存取權杖或正式環境設定,而不必上傳任何東西。
第三,你可以在同一個地方完成兩個方向的處理。同一個工具既能以 2 空格、4 空格或 tab 縮排進行美化,也能壓縮成單行,因此你不需要另外找一個壓縮工具來發送 payload。對於一般用途 — 偵錯回應、清理 package.json、在儲存前縮小 payload,或是單純檢查某個 blob 是否為合法 JSON 後再餵給程式碼 — 瀏覽器格式器可以一次搞定這三件事。
值得牢記的 JSON 規則
有幾條 JSON 規則常讓開發者踩坑,因為 JavaScript 比規格更寬容。以瀏覽器為基礎的 JSON Formatter 會強制套用所有這些規則,但若能預先了解,大部分「為什麼解析不了」的時刻都能在兩秒內解決。
JSON 的鍵必須是雙引號包起來的字串 — JavaScript 的物件字面允許裸識別字,但 JSON 不行。JSON 剛好有六種值類型 — 物件、陣列、字串、數字、布林值與 null — 沒有 undefined、沒有 NaN、沒有 Infinity、沒有日期,也沒有函式。字串必須使用雙引號並跳脫控制字元,而且整份文件必須是單一的頂層值(物件、陣列、字串、數字、布林值或 null),不能是裸的運算式或以逗號分隔的清單。
有一個值得了解的「限制」其實不是工具的 bug,而是 JavaScript 本身的特性:數字會被剖析為 IEEE-754 倍精準浮點數,因此任何大於 9,007,199,254,740,991(Number.MAX_SAFE_INTEGER)的整數都會喪失精準度。像 12345678901234567890 這樣的值會變成 12345678901234567000。如果你需要精確的大型整數 — 例如 Twitter/X 的雪花 ID、64 位元的資料庫鍵 — 請在 JSON 中以字串形式保存,讓解析器逐位元保留。
若想進一步了解,可以參考 內建公式保護的 JSON 轉 CSV 替代方案。