JavaScript 格式化工具
什麼是 JavaScript 格式化？
JavaScript 格式化工具會把 JS 程式碼整理成一致、清楚、便於閱讀的結構。它會處理縮排、換行、區塊、物件字面量、陣列、函式呼叫和巢狀表達式，讓邏輯和資料流更容易追蹤。它適合除錯、程式碼審查、學習範例、複製片段，以及查看壓縮或產生後的檔案。格式化不是靜態分析，不會修復執行期錯誤、證明非同步邏輯正確、識別所有不安全依賴，也不能取代 lint。在真實專案中，輸出應與 ESLint、Prettier 或團隊既有規範保持一致，避免樣式變化掩蓋真正的程式碼改動。
使用方式
使用方式
- 在左側輸入框中貼上或輸入 JavaScript 程式碼
- 選擇縮排大小、引號樣式和分號設定
- 點選「格式化」美化程式碼，或點選「驗證」檢查語法
- 在右側檢視結果（含語法高亮）
- 點選「複製」將結果複製到剪貼簿
選項說明
快速鍵
- Ctrl + Enter格式化
- Ctrl + Shift + C複製結果
JavaScript 提示
- 格式化僅確認語法正確，不代表執行時無誤。修改依賴自動分號插入或建置轉換的 JavaScript 程式碼後，請重新執行測試或在瀏覽器中驗證。
- 驗證貼上的程式碼時，請注意瀏覽器解析器的支援範圍可能與目標執行環境或打包工具設定不同。
使用場景
技術原理
JavaScript 格式化工具是一個三階段管線，基於 ECMA-262 語法定義：詞法掃描器產生 IdentifierName、NumericLiteral、StringLiteral、TemplateHead/Middle/Tail、Punctuator、Keyword 和 LineTerminator 的詞法單元流；解析器建構與 ESTree 相容的 AST（即 @babel/parser、acorn 和 esprima 所使用的形狀）；列印器遍歷樹狀結構，根據縮排大小和目標列印寬度的規則產生文字。Prettier 將 AST 編譯為由 group、indent、line 和 softline 原語組成的 Doc 中間表示，然後排版演算法選擇斷點使輸出適應 printWidth（80、100、120）。ESLint --fix 則針對原始碼就地改寫詞法單元，更積極地保留註解，但僅修正標記為自動修正的規則。 列印器不能隨意插入換行：ECMA-262 第 11.9.1 節的自動分號插入（ASI）會在任何 LineTerminator 處結束陳述式，除非下一個詞法單元是延續。具體來說，在以 (、[、`、+、-、/ 開頭的行前斷行，或在 ++/-- 詞法單元前斷行，會悄悄改變語意；在 return、throw、break、continue 或 yield 之後直接換行會插入分號並丟棄運算元。模板字串（反引號）逐位元組保留其內部內容，包括嵌入的 ${} 表達式（其內部作為 JS 重新格式化，但周圍的空白不會處理）。註解透過 leading/trailing/innerComments 陣列重新附加到鄰近的 AST 節點，使其在往返轉換中得以保留。 詞法掃描和列印都是 O(n) 複雜度（n 為原始碼長度），常數很小；得益於 ECMA-262 LR(1) 風格語法的單一詞法單元前瞻，解析器對格式良好的程式碼實際上是線性的。標準 JavaScript 解析不涵蓋 JSX、TypeScript 型別標註、裝飾器或 Flow，這些需要 @babel/parser 外掛或 @typescript-eslint/parser；對 .tsx 檔案執行純 JS 工具會拒絕 `: type` 標註。Source Map（v3 版）可在建置步驟需要保留堆疊追蹤準確性時保留原始行列對應，行尾（LF 與 CRLF）在寫入時正規化，而非在解析時。
- 管線：詞法掃描器（依 ECMA-262 第 12 節產生詞法單元流）-> ESTree AST（acorn/@babel/parser/esprima）-> 列印器；詞法掃描器和列印器為 O(n)，解析器為 O(n) 且帶單一詞法單元前瞻。
- ECMA-262 第 11.9.1 節的 ASI 陷阱：絕不在以 (、[、`、+、-、/ 開頭的詞法單元前斷行，也不在 ++/-- 前斷行，更不要在 return/throw/break/continue/yield 之後立即斷行。
- Prettier 與 ESLint --fix 的差異：Prettier 將 AST 降階為 Doc 中間表示（group/indent/line），選擇適應 printWidth（80/100/120）的排版；ESLint --fix 就地改寫詞法單元，僅套用標記為修正器的規則。
- 註解保留：leading/trailing/innerComments 綁定到 AST 節點；緊接在宣告上方的 JSDoc 區塊會保持附著，列印器不會將其孤立到前一個陳述式上。
- 模板字串（反引號）逐位元組保留；僅 ${} 內部的 JS 會重新列印。正則表達式字面值和字串字面值的引號會正規化為選定的單引號/雙引號風格，並重新計算 \ 跳脫。
- 方言覆蓋：純 JS 解析器拒絕 JSX、TypeScript 型別、裝飾器和 Flow；.tsx/.ts 檔案需要 @babel/parser 外掛 ['jsx','typescript','decorators-legacy'] 或 @typescript-eslint/parser。
- 輸出行正規化：根據設定寫入 LF 或 CRLF 行尾（與輸入無關），多行陣列/物件/呼叫套用尾隨逗號策略，當工具鏈需要保留原始行列資訊時會輸出 Source Map v3。
範例
格式化前
function greet(name){if(!name){return 'Hello, stranger';}const greeting=`Hello, ${name}!`;console.log(greeting);return greeting;}格式化後（2 個空白縮排）
function greet(name) {
if (!name) {
return 'Hello, stranger';
}
const greeting = `Hello, ${name}!`;
console.log(greeting);
return greeting;
}壓縮後
function greet(n){if(!n)return"Hello, stranger";const e=`Hello, ${n}!`;return console.log(e),e}常見問題
格式化工具採用哪種風格？
大多數版本使用 Prettier 預設設定：每行 80 字元寬、加分號、雙引號、2 空格縮排，並在 ES5 允許的位置加上尾隨逗號。如果您的專案採用不同風格，可以調整選項。在相同設定下，輸出是確定性的——同樣的輸入會得到同樣的輸出。
工具會執行我的 JS 嗎？
不會。它只解析並重新印出原始程式碼。副作用、網路請求和執行時錯誤都不相關——格式化工具不會執行腳本。
它會修正語法錯誤嗎？
不會。解析器拒絕格式化無效的 JavaScript，並會指出解析失敗的位置。請先修正語法錯誤；常見原因包括括號缺失、IIFE 之後的 return 缺少分號，或範本字串的反引號不對稱。
支援 JSX 與 TypeScript 嗎？
大多數現代版本可以解析含 JSX 的 JavaScript 與 TypeScript 語法（.ts、.tsx）。格式化工具會根據解析結果自動辨識語法。如果您是在純 ES5 環境中作業，請關閉 TypeScript 模式以避免誤報錯誤。
可以壓縮 JS 嗎？
部分版本提供 minify（Terser 風格）模式，會重新命名變數、移除空白並消除無用程式碼。輸出體積很小但難以閱讀。生產環境建構時使用壓縮，原始碼審閱時則使用格式化。
我的程式碼會被上傳嗎？
不會。解析與輸出都在您的瀏覽器中透過 JavaScript 解析器完成。貼上的程式碼不會被傳輸出去。
為什麼我的註解位置略有移動？
Prettier 與類似的格式化工具會把註解附加到最近的 AST 節點上。位於兩個函式之間的註解，在 AST 中可能「歸屬」於下方的函式，因此重新輸出時會被掛到那裡。同行的尾端註解通常會原樣保留，獨立註解則可能位置偏移。