先把編輯器裁小了：一款 JSON Formatter 的取捨設計

9 月 29 日，V2EX 的「分享創造」板出現了一則貼文，標題是「如果你也想做自己的 JSON Formatter」。發文者 chatbase 說得很直白：平常經常需要格式化 JSON，但擔心資料外洩，不太敢把內容貼到別人的網站上，於是自己做了一個開源版本，部署在 Cloudflare Workers 上，標榜資料不會離開瀏覽器。

這類工具向來不缺，線上隨手一搜就是幾十個格式化網站。但這一則值得從設計角度細看，因為它的大多數決定，都發生在使用者看見畫面之前。

被裁過的 Monaco

整個專案最明顯的一個設計動作，是對編輯器的修剪。作者選了 Monaco 作為編輯器核心，這是 Visual Studio Code 底層的那套編輯器，功能完整，但完整的 /vs 套件體積龐大。作者的做法是把它裁到只留 JSON 一種語言，理由寫得很實際：完整套件太大，頁面打開會慢一截。

這是一個典型的取捨場景。多數工具網站會選擇全功能編輯器，換來語法高亮、多語言支援與自動補全，代價是首次載入的等待。這款工具反過來，先假設使用者只會貼 JSON，於是把其他語言全部刪掉，換取開啟速度。跟一般線上 formatter 相比，它的功能面窄了，但載入這一件事做到了乾淨。

這與我們先前觀察過的Audacity 4.0 介面重構有相似的邏輯：老軟體翻新時，刪什麼往往比加什麼更顯出設計態度。

Array[3] 與省略號

摺疊顯示的細節也值得單獨看。JSON 樹狀檢視在收合節點時，一般常見的做法是全部顯示為省略號或大括號。這款工具做了區分：陣列摺疊後顯示 Array[3] 這樣的個數標記，物件則維持省略號。

這個差異看似細微，實際上改變了閱讀體驗。看到 Array[3] 時，使用者不需要展開就知道底下有幾個元素，判斷資料結構的速度快了一步；物件因為鍵名各不相同，給個數反而沒有意義，省略號更誠實。一個小小的顯示規則，背後是對兩種資料型態語意的理解。

其他功能包括格式化與壓縮、兩份 JSON 左右對比、上傳下載、範例資料與自動格式化，還有時間戳與本地時間的互轉，秒、毫秒、微秒、奈秒都認得。時間戳這一項在 formatter 類工具裡不算標配，對經常看日誌的人卻很實用，因為時間戳的位數判斷恰恰是肉眼最容易出錯的地方。

中文是預設語言

多語言的處理也透露了這個專案的定位。中文是預設語言，路徑不帶前綴，另外提供英、日、韓、葡、德五種語言。多數開源工具的慣例是英文預設、其他語言掛在子路徑下，這裡反了過來。

這個選擇與專案的起點一致：作者自己就是那個「不敢把資料貼到別人網站」的使用者，預設語言服務的是與作者處境相同的人。工具的目標使用者先被想清楚了，介面的語言順序才會長成這樣。

資料不離開瀏覽器，是功能也是介面

「資料不會離開你的瀏覽器」是這個專案的核心主張，但它其實有兩層意義。技術上，所有格式化都在本地執行，部署在 Cloudflare Workers 上的是頁面本身，不是資料的去向。體驗上，這句話也重新定義了工具與使用者的關係：使用者不需要在便利與風險之間權衡，可以直接把公司內部的 API 回應、設定檔或日誌貼進去。

貼文末尾作者寫著「還很糙，歡迎挑問題」，並邀請使用者到 GitHub 倉庫提 issue。這種把半成品直接放上社羣的姿態，本身就是開源工具的一種發布設計：先讓最在意隱私的那批人用起來，功能缺口由實際需求補齊。

一款 JSON formatter 沒有什麼宏大的美學可言，但它的價值恰恰在於每個決定都具體可查：編輯器裁到多小、摺疊時顯示什麼、預設語言給誰。工具越小，取捨越藏不住，而這個專案的取捨，整體上是誠實的。