如何格式化與整理文字與程式碼

為什麼重要

後端從客戶工單貼上 4 KB JSON，整段沒斷行。很難一眼看出是缺欄位還是枚舉拼錯。格式化 30 秒後結構清楚：currrency 三個 r 才是 bug。這就是格式化的日常——把讀不懂的 blob 變成人能推理的東西。

格式化也是風格錨點：全隊用同一套美化預設，code review 就不會淹沒在空白差異，可專注邏輯。

三個實際場景

後端工程師

快速檢視工單附的酬載

貼上一行 JSON，以 2 空格美化，立刻看到畸形欄位。

幾秒內診斷

前端開發者

縮小要給 CDN 的設定片段

手改的 HTML／CSS 區塊丟進去按縮小，產出更緊的檔案。

更小成品

資料分析師

分享前把 SQL 排漂亮

貼上單行 SELECT join 鏈，用 SQL profile 格式化，join 鍵、篩選與聚合一目了然。

可讀的分析

操作說明

格式化器位於 /content-tools/text-formatter。會從輸入猜語言，也可從工具列覆寫。

選語言 profile
JSON、JavaScript／TypeScript、HTML、CSS 或 SQL。正確 profile 可避免細微錯誤（例如 JSON 格式化器去平衡 JS arrow function 的大括號）。
貼上來源
編輯器接受任意大小。貼上內容留在瀏覽器工作階段。
美化或縮小
Format 縮排與換行。Minify 去掉空白與註解。改設定時右側即時更新。
調縮排、行寬、尾逗號
2 或 4 空格、最大行寬、是否尾逗號——對齊團隊 style guide。
複製或下載
複製鈕貼回 IDE，或直接下載檔案。

壓扁的 JSON 工單酬載變好讀

Input

{"orderId":"o-7711","items":[{"sku":"A1","qty":2},{"sku":"B2","qty":1}],"currrency":"USD"}

Output

{
  "orderId": "o-7711",
  "items": [
    { "sku": "A1", "qty": 2 },
    { "sku": "B2", "qty": 1 }
  ],
  "currrency": "USD"
}

Two-pane formatter view in MoreKits with language picker and indent options — 選語言、設縮排與行寬，右側隨打即更新。

實用技巧

先格式化再 diff。 比較兩份設定前先各跑一遍，抵銷空白與引號差異。見如何線上比對文字。
要貼進不允許換行的 JSON 設定欄（Slack webhook、部分 k8s 註解）前先 Minify。
維持 tab／空格一致——格式化前先切換縮排設定，否則編輯器存檔會製造雜訊 diff。
JSON5 手寫設定常含註解。 先用 JS profile 移除註解，再以嚴格 JSON 重排。

常見陷阱

格式化器拒絕美化 JSON

尾逗號、單引號或未加引號的鍵會讓輸入不是合法 JSON。先依工具列錯誤（會指行號）修語法再排。

常見陷阱

縮小的 JS 執行時壞掉

縮小器會壓扁對 ASI 敏感的行。若縮小現代程式碼依賴 optional chaining 或 top-level await，請確認執行環境支援，否則先用 bundler 轉譯。

常見陷阱

SQL 格式化弄壞別名

部分舊方言用雙引號當識別項。在 SQL profile 選對方言（PostgreSQL、MySQL、T-SQL）以保留引號規則。

何時不適合用這套

自動修 lint：用 ESLint、Stylelint 或 repo 內 dotnet format 做規則驅動清理。
重構（改名、萃取函式）：用 IDE 重構引擎。
綱要驗證：本工具只檢結構。語意請用 JSON Schema 驗證器。

FAQ

會改引號內的空白嗎？

不會。引號內空白原樣保留——只改結構性空白（縮排、符號間換行）。

支援 YAML 嗎？

直接 YAML 尚在路線圖；可先 YAML→JSON→格式化→再轉回。

Minify 後註解不見了？

Minify 預設移除註解以減體積。需要保留時在工具列開 Preserve comments。

下一步

用文字比對與參考版比較格式化結果。
要嵌進 HTML 或 JSON 前可用文字跳脫處理特殊字元。
Markdown 草稿轉 HTML 可用 Markdown 轉 HTML。

為什麼重要

格式化也是風格錨點：全隊用同一套美化預設，code review 就不會淹沒在空白差異，可專注邏輯。

三個實際場景

後端工程師

快速檢視工單附的酬載

貼上一行 JSON，以 2 空格美化，立刻看到畸形欄位。

幾秒內診斷

前端開發者

縮小要給 CDN 的設定片段

手改的 HTML／CSS 區塊丟進去按縮小，產出更緊的檔案。

更小成品

資料分析師

分享前把 SQL 排漂亮

貼上單行 SELECT join 鏈，用 SQL profile 格式化，join 鍵、篩選與聚合一目了然。

可讀的分析

操作說明

格式化器位於 /content-tools/text-formatter。會從輸入猜語言，也可從工具列覆寫。

選語言 profile
JSON、JavaScript／TypeScript、HTML、CSS 或 SQL。正確 profile 可避免細微錯誤（例如 JSON 格式化器去平衡 JS arrow function 的大括號）。
貼上來源
編輯器接受任意大小。貼上內容留在瀏覽器工作階段。
美化或縮小
Format 縮排與換行。Minify 去掉空白與註解。改設定時右側即時更新。
調縮排、行寬、尾逗號
2 或 4 空格、最大行寬、是否尾逗號——對齊團隊 style guide。
複製或下載
複製鈕貼回 IDE，或直接下載檔案。

壓扁的 JSON 工單酬載變好讀

Input

{"orderId":"o-7711","items":[{"sku":"A1","qty":2},{"sku":"B2","qty":1}],"currrency":"USD"}

Output

{
  "orderId": "o-7711",
  "items": [
    { "sku": "A1", "qty": 2 },
    { "sku": "B2", "qty": 1 }
  ],
  "currrency": "USD"
}

實用技巧

先格式化再 diff。 比較兩份設定前先各跑一遍，抵銷空白與引號差異。見如何線上比對文字。
要貼進不允許換行的 JSON 設定欄（Slack webhook、部分 k8s 註解）前先 Minify。
維持 tab／空格一致——格式化前先切換縮排設定，否則編輯器存檔會製造雜訊 diff。
JSON5 手寫設定常含註解。 先用 JS profile 移除註解，再以嚴格 JSON 重排。

常見陷阱

格式化器拒絕美化 JSON

尾逗號、單引號或未加引號的鍵會讓輸入不是合法 JSON。先依工具列錯誤（會指行號）修語法再排。

常見陷阱

縮小的 JS 執行時壞掉

縮小器會壓扁對 ASI 敏感的行。若縮小現代程式碼依賴 optional chaining 或 top-level await，請確認執行環境支援，否則先用 bundler 轉譯。

常見陷阱

SQL 格式化弄壞別名

部分舊方言用雙引號當識別項。在 SQL profile 選對方言（PostgreSQL、MySQL、T-SQL）以保留引號規則。

何時不適合用這套

自動修 lint：用 ESLint、Stylelint 或 repo 內 dotnet format 做規則驅動清理。
重構（改名、萃取函式）：用 IDE 重構引擎。
綱要驗證：本工具只檢結構。語意請用 JSON Schema 驗證器。

FAQ

會改引號內的空白嗎？

不會。引號內空白原樣保留——只改結構性空白（縮排、符號間換行）。

支援 YAML 嗎？

直接 YAML 尚在路線圖；可先 YAML→JSON→格式化→再轉回。

Minify 後註解不見了？

Minify 預設移除註解以減體積。需要保留時在工具列開 Preserve comments。

下一步

用文字比對與參考版比較格式化結果。
要嵌進 HTML 或 JSON 前可用文字跳脫處理特殊字元。
Markdown 草稿轉 HTML 可用 Markdown 轉 HTML。