JavaScript 格式化工具

上傳

0 字元

在瀏覽器中執行的 JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON 程式碼格式化工具。支援 Prettier 風格詳細設定、Terser 壓縮與混淆，內建 CodeMirror 編輯器、即時預覽、快速鍵操作、檔案上傳下載功能。

適用場景

前端開發過程中貼上被壓縮的第三方 JS 程式碼，快速整理成可讀格式方便偵錯
團隊程式碼審查前，將 JavaScript/TypeScript 程式碼統一格式化，解決縮排、引號、分號等風格差異，專注在邏輯審查
接手 legacy 專案時，一鍵格式化排版雜亂的老舊 JS 程式碼，快速理解程式碼結構與邏輯層次
上線環境部署前，使用 Terser 壓縮與混淆 JavaScript 程式碼，縮小檔案體積提升網頁載入速度
線上撰寫 JS/JSX 範例時，即時格式化整理程式碼，方便分享給同事或社群
學習 Prettier 各設定項目的效果時，調整選項立即預覽格式化結果，理解 tabWidth、trailingComma 等參數作用
從 Stack Overflow、GitHub 等平台複製的程式碼片段，自動修正縮排與換行問題
編寫 JSON 設定檔時，自動格式化縮排與換行，避免逗號、括號錯誤導致剖析失敗
開發 CSS/HTML 頁面時，同一專案內 JS+CSS+HTML 程式碼一次格式化，統一風格
面試、筆試前快速整理演算法題目的 JS 程式碼，讓程式碼看起來整齊美觀

使用方法

開啟 JavaScript 格式化工具頁面，在左側編輯區直接貼上程式碼，或點擊上傳按鈕選擇本機檔案（支援 .js/.ts/.jsx/.tsx/.css/.html/.json 格式）
選擇對應語言類型：工具通常會自動辨識，但辨識不準確時，從語言下拉選單手動選擇 JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON
設定格式化選項：可選擇快速預設風格（default/modern/classic），或手動調整 Prettier 選項（縮排寬度、Tab/空格、行寬、分號、引號、尾隨逗號、箭頭函式括號）
需要壓縮程式碼時，切換至壓縮模式，設定 Terser 壓縮選項（是否啟用 compress、是否使用 mangle 混淆變數名、是否壓縮頂層變數）、CSS 最佳化等級、HTML 壓縮選項
工具會即時處理程式碼，在右側編輯區立即顯示格式化或壓縮後的結果，下方狀態列即時顯示字元數、位元組數、壓縮率統計
使用鍵盤快速鍵提升效率：Ctrl+Shift+B 執行格式化、Ctrl+Shift+M 切換壓縮模式、Ctrl+Shift+O 開啟檔案、Ctrl+Shift+D 下載結果、Ctrl+Shift+K 清除編輯器
滿意後點擊複製按鈕將結果複製到剪貼簿，或點擊下載按鈕儲存為本機檔案；也可點擊分享按鈕產生包含程式碼與設定的 URL 連結分享給他人

功能特點

多語言支援：支援 JavaScript、TypeScript、JSX、TSX、CSS、HTML、JSON 等前端常用 7 種語言格式化，前端程式碼一鍵處理
Prettier 風格詳細設定：支援 tabWidth 縮排寬度（2/4/8 空格）、useTabs Tab 與空格選擇、printWidth 行寬、semi 分號、singleQuote 單引號與雙引號、trailingComma 尾隨逗號、arrowParens 箭頭函式括號等完整選項
程式碼壓縮功能：整合 Terser 壓縮引擎，支援 compress 程式碼壓縮、mangle 變數名混淆、toplevel 頂層變數壓縮等上線等級壓縮選項
CSS 特殊最佳化：提供 CSS 最佳化等級設定，支援 CSS 壓縮、移除註解、移除空白等特殊處理
HTML 壓縮選項：對應 HTML minify 設定，可摺疊空白、移除註解、移除屬性引號等
即時處理：輸入程式碼時即時預覽格式化結果，無需點擊按鈕即可看到整理效果
CodeMirror 編輯器：內建專業 CodeMirror 編輯器，提供語法高亮、行號顯示、括號配對、程式碼摺疊等專業編輯體驗
檔案上傳／下載：支援直接上傳本機 .js/.ts/.jsx/.tsx/.css/.html/.json 檔案，格式化後一鍵下載處理後的檔案
分享連結：透過 URL hash 儲存程式碼與設定，產生分享連結，傳給同事即可重現目前格式化設定
歷史記錄：自動將格式化歷史記錄儲存至 localStorage，隨時可還原先前的程式碼版本與設定
鍵盤快速鍵：支援 Ctrl+Shift+B 格式化、Ctrl+Shift+M 壓縮、Ctrl+Shift+O 開啟檔案、Ctrl+Shift+D 下載、Ctrl+Shift+K 清除等快速鍵操作
快速預設：提供 default 預設、modern 現代、classic 經典三種快速設定預設，一鍵切換常用風格
字元統計：即時顯示原始程式碼與處理後程式碼的字元數、位元組數、壓縮率比較
範例程式碼：內建各語言的範例程式碼，點擊即可載入並立即體驗功能

常見問題

格式化後的 JavaScript 程式碼邏輯會變嗎？

不會。格式化只是調整程式碼的空白、縮排、換行、括號位置、引號風格等「排版」相關的內容，是基於 AST（抽象語法樹）轉換的，格式化前後程式碼的 AST 結構完全一致，執行邏輯 100% 相同。只要程式碼本身語法正確能正常剖析，格式化不會改變任何執行行為，可以放心使用。但壓縮（mangle）雖然邏輯也不變，需要注意 eval、全域變數匯出等特殊場景，避免設定不當。

格式化工具和我本機 VS Code/Prettier 格式化結果不一樣怎麼辦？

本工具的格式化邏輯盡量和 Prettier 官方行為保持一致。如果結果不一樣，請檢查設定項：tabWidth、useTabs、semi、singleQuote、trailingComma、arrowParens 這幾個核心選項兩邊是否完全一樣。另外注意 Prettier 版本差異——Prettier 2/3 預設設定有細微差別（v3 預設 trailingComma: all、v2 預設 es5；v2 開始 arrowParens 預設 always）。如果你本機專案有 .prettierrc 設定檔，對照裡面的選項在網頁上調整一致即可，格式化結果就會相同。

壓縮後的程式碼可以還原嗎？mangle 過的變數名能恢復嗎？

格式化後的程式碼是完全可逆的——因為只是排版變了，所有識別字、邏輯都完整保留，再格式化就能回來。但壓縮後的程式碼：僅移除空白註解的部分可以重新格式化恢復布局，但 mangle（變數名混淆）是不可逆的——原來有意義的變數名 userName 變成了 a，這個過程是單向的，無法自動還原回原來的名稱。如果需要在上線環境偵錯壓縮後程式碼，應該設定產生 Source Map 檔案，透過 Source Map 映射回原始碼位置。所以壓縮前請一定保留原始未壓縮的原始程式碼！

支援哪些瀏覽器？在手機上可以用嗎？

本工具支援所有現代瀏覽器：最新版 Chrome、Firefox、Safari、Edge 都可以正常使用。IE 瀏覽器不支援（現在也沒有人用 IE 做開發了）。響應式布局適配手機螢幕，但程式碼編輯在小螢幕上體驗一般，建議還是在桌面端瀏覽器使用，大螢幕效率更高。所有格式化和壓縮計算都在瀏覽器端執行，不需要上傳程式碼到伺服器，程式碼不會離開你的瀏覽器，安全可靠。

為什麼有些程式碼格式化不了，提示剖析錯誤？

格式化工具首先需要把程式碼剖析成 AST 才能工作，如果程式碼有語法錯誤（括號不成對、字串沒閉合、關鍵字寫錯、多餘逗號等），剖析器無法理解程式碼結構就會報錯。請先檢查程式碼本身的語法錯誤：檢視主控台是否有報錯資訊，編輯器有沒有紅色波浪線提示錯誤位置，修正語法錯誤後就可以正常格式化了。另外要確認選擇了正確的語言模式，JSX/TSX 程式碼不要選成一般 JS。

我的程式碼會上傳到伺服器嗎？程式碼安全嗎？

不會。所有格式化、壓縮、語法高亮全部在你瀏覽器端透過 JavaScript 執行，程式碼不會傳送到任何伺服器，完全在你的裝置上處理。你可以斷網測試：中斷網路連線後工具依然可以正常使用。分享連結功能是把程式碼和設定編碼到 URL hash 裡，點擊分享只是產生一個 URL，程式碼不會上傳——但如果你把連結發給別人，別人打開連結就能看到你的程式碼，所以敏感程式碼不要透過連結分享。

可以格式化 Vue 單一檔案元件（.vue 檔案）嗎？Svelte 呢？

目前本工具的多語言支援包括 JS/TS/JSX/TSX/CSS/HTML/JSON，Vue 的 <template>/<script>/<style> 單一檔案（SFC）和 Svelte 元件目前不支援直接整體格式化，但你可以把其中的 script 部分（JS/TS）、style 部分（CSS）、template 部分（HTML）分別複製出來選擇對應語言單獨格式化。後續會考慮增加 Vue/Svelte SFC 格式化支援。

怎麼設定團隊統一的格式化規範？

團隊統一規範建議三層配合：①專案根目錄放 .editorconfig，統一編輯器基礎設定（縮排、換行字元、編碼）；②使用 Prettier 並在專案中放 .prettierrc 設定檔，所有人和 CI 都用這個設定格式化，本工具也可以選擇對應選項符合設定；③使用 ESLint + eslint-config-prettier 關閉 ESLint 風格規則，只檢查程式碼品質。編輯器設定儲存時自動格式化（VS Code 安裝 Prettier 擴充功能，設定 editor.formatOnSave: true），CI 加 lint 步驟檢查格式，確保提交的程式碼都符合規範。

尾隨逗號（trailingComma）有什麼好處？應該開嗎？

強烈建議開啟尾隨逗號（至少 es5 等級，推薦 all 等級）。尾隨逗號的好處是：①Git diff 更乾淨：新增最後一個元素時不需要修改上一行加逗號，只有新增行的 diff，不會因為加逗號汙染上一行的 diff；②重新排列元素順序時更方便，不需要處理末尾逗號問題；③現代瀏覽器和 Node.js 都完全支援尾隨逗號，舊 IE 不支援但現在不需要考慮 IE。唯一缺點是多一個逗號，但和帶來的便利相比完全值得。Prettier v3 預設就是 all。

壓縮時需要開 mangle 嗎？compress 和 mangle 有什麼區別？

上線環境壓縮建議 compress 和 mangle 都開啟，這兩個是獨立的壓縮選項：compress 是程式碼最佳化（常數折疊、移除無用程式碼、簡化表達式等），只在能簡化時修改程式碼結構，不改變變數名；mangle 是區域變數名縮短，把長變數名改成單一字元，這是體積減小的最大來源之一。只要你的程式碼不是要做為函式庫被外部直接呼叫變數名，或者沒有用 eval 動態存取變數名，mangle 是安全的，且能大幅縮小體積。如果是開源函式庫需要保留 API 名稱，設定 mangle.reserved 保留匯出的名稱即可。

格式化 JSON 時為什麼會自動跳脫某些字元？

JSON 規範有嚴格的語法要求：字串必須雙引號、不能有尾隨逗號、特殊字元必須跳脫（換行→\n、引號→\"、反斜線→\\、Tab→\t 等）。如果你的 JSON 字串裡有未跳脫的特殊字元，格式化時會按照 JSON 規範自動跳脫，這是正確的行為。注意：JSON 不是 JavaScript，JSON 中不能寫註解、不能有單引號、不能有 undefined，這些都會導致 JSON 剖析失敗。

如何讓箭頭函式參數始終有括號？或者不要括號？

調整 arrowParens 選項：always 是始終加括號（(x) => x），這是 Prettier v2+ 預設，好處是增減參數時不需要加刪括號，diff 更乾淨；avoid 是單一參數時省略括號（x => x），程式碼更簡潔。根據團隊風格選擇即可，兩種風格都沒有對錯，統一就行。注意：參數型別註解、預設參數、解構參數不管什麼設定都會有括號。

格式化可以自動修正 ESLint 報的風格問題嗎？

本工具是 Prettier 風格格式化，只能修正 Prettier 負責的風格問題（縮排、引號、分號、尾隨逗號、行寬、空白等）。ESLint 報的程式碼品質問題（如未使用變數、缺少 return、=== 問題）是邏輯問題，格式化工具無法自動修正，需要手動修改。如果你的 ESLint 設定了 eslint-config-prettier，那麼 Prettier 格式化後，ESLint 就不會再報風格相關的錯誤了，剩下的品質問題手動修正即可。

最大支援多大的程式碼檔案？大檔案格式化會卡嗎？

因為格式化在瀏覽器端執行，支援的檔案大小取決於你的裝置效能，一般幾十 KB 到幾 MB 的 JS 檔案都可以正常處理，普通專案的單檔案 JS 完全夠用。如果是特別大的打包後的 JS 檔案（幾十 MB）可能會延遲甚至記憶體不足，這種超大檔案建議本機用 Node.js+Prettier/Terser 指令列處理。日常開發中的單個原始檔大小通常都在處理範圍內。

快速鍵在 Chrome 裡按 Ctrl+Shift+B 怎麼開啟了書籤管理員？

這是 Chrome 瀏覽器預設快速鍵衝突：Ctrl+Shift+B 是 Chrome 顯示／隱藏書籤列的快速鍵，瀏覽器快速鍵優先順序高於網頁 JS 快速鍵，所以會被 Chrome 攔截。解決方法：①點擊格式化按鈕操作；②如果你是 Mac 使用者用 Cmd+Shift+B 不會和 Chrome 衝突；③可以在 Chrome 設定裡修改瀏覽器快速鍵；④可以先聚焦到編輯器內，某些狀況下編輯器焦點能擷取快速鍵。其他瀏覽器如果也有快速鍵衝突，都可以透過按鈕操作。

故障排查

格式化時顯示「語法剖析錯誤」，無法格式化

程式碼本身有語法錯誤：括號不成對、字串未閉合、缺少關鍵字、多餘逗號等，語法錯誤會導致 AST 剖析失敗無法格式化，請先修正語法錯誤語言模式選擇錯誤：例如 JSX/TSX 程式碼選成了 JavaScript，泛型語法被誤判為 JSX 標籤，或反之，請手動選擇正確的語言類型包含實驗性語法：程式碼使用了太新的、還未成為標準的 JavaScript 語法提案（如裝飾器、Pipeline 運算子），剖析器不支援檔案有 BOM 標頭：UTF-8 BOM（EF BB BF）三個位元組在開頭，某些剖析器可能無法處理，可嘗試儲存為無 BOM 的 UTF-8 混入了其他語言程式碼：例如 HTML 中嵌入的範本語言（EJS、Handlebars、Vue 範本指令）不是純 JS/HTML，剖析器無法識別程式碼中有未結束的區塊註解：/* 沒有對應的 */，註解沒閉合導致後續程式碼全部被當成註解規則運算式歧義：某些看起來像除法／運算子的地方實際是規則運算式字面值，剖析器誤判，可以在規則運算式前加分號消除歧義

壓縮（Minify）時報錯，無法壓縮

程式碼語法錯誤：和格式化一樣，壓縮也基於 AST，程式碼必須語法正確才能壓縮，先修正語法錯誤使用了 ES Module 的 import/export 但沒有正確標記模組類型，或者壓縮設定和模組類型不匹配 mangle 屬性名時出問題：如果開啟了屬性名 mangle（預設不開啟），動態屬性存取 obj['key'] 會導致找不到屬性，不要隨意開啟屬性 mangle 程式碼中有 eval() 或 with 陳述式：Terser 遇到 eval/with 時 mangle 可能出錯，因為 eval 可以動態存取作用域變數名，上線程式碼避免使用 eval 保留名稱設定錯誤：如果設定了 mangle.reserved 但拼寫錯誤或漏了必須保留的名稱（如 jQuery、$ 等全域函式庫），可能導致執行時期錯誤 toplevel 壓縮設定問題：如果你的程式碼是在全域作用域執行而不是打包在 IIFE/模組內，開啟 compress.toplevel: true 可能破壞全域變數參考目標瀏覽器版本設定過舊：Terser 壓縮時可能使用了目標瀏覽器不支援的語法，可以設定 ecma 版本指定輸出的 JS 語法版本

格式化中文／中文註解顯示亂碼

檔案編碼不是 UTF-8：上傳的本機檔案是 Big5/GBK/GB2312 等中文編碼，工具預設按 UTF-8 剖析導致亂碼，用編輯器將檔案轉存為 UTF-8 編碼後再上傳瀏覽器頁面編碼被意外修改：雖然現在瀏覽器預設 UTF-8，但某些舊瀏覽器或特殊設定可能編碼不對，可在瀏覽器選單檢視頁面編碼設定為 UTF-8 檔案帶有 UTF-8 BOM 標頭：雖然 BOM 通常不會導致亂碼，但某些剖析器處理 BOM 異常，可以用編輯器去掉 BOM 儲存為無 BOM 的 UTF-8 複製貼上時編碼轉換問題：從某些老軟體（如舊版記事本、Word）複製程式碼時，特殊字元（如中文引號、全形空白）可能被錯誤轉換，盡量用 VS Code 等現代編輯器複製字型問題：某些等寬字型對中文支援不好導致顯示異常，這不是編碼問題，只是顯示字型問題，換一個支援中文的等寬字型即可特殊 Unicode 字元：程式碼中包含 emoji、零寬空格、控制字元等特殊不可見字元，可能導致顯示異常或格式化出錯，可以開啟編輯器顯示不可見字元檢視 gzip 壓縮或 Proxy 問題：如果是部署後存取出現亂碼，檢查伺服器是否正確設定了 Content-Type: application/javascript; charset=utf-8 回應標頭

JSX/TSX 程式碼格式化失敗或剖析錯誤

語言模式選成了 JavaScript 而不是 JSX/TSX：一般 JS 剖析器不識別 <標籤> 語法，會把 JSX 標籤當成比較運算子剖析報錯，請手動選擇 JSX 或 TSX 語言 TSX 泛型語法歧義：<T> 泛型參數在 TSX 中可能被誤判為 JSX 標籤，如 const f = <T>(x: T) => x，可在 <T> 後面加個逗號 <T,> 消除歧義（這是 TSX 的通用寫法） JSX 標籤未閉合：JSX 要求所有標籤必須正確閉合，自閉合標籤必須有 />，和 HTML 不一樣，<img> 要寫成 <img/> JSX 中 JS 表達式括號問題：{} 裡的 JS 表達式要正確閉合，{obj.prop} 如果沒寫 } 會導致後續剖析錯亂 Fragment 短語法問題：<></> 空標籤需要 React 16+ 支援，且必須正確閉合；如果用 <Fragment> 需要正確匯入 JSX 屬性值引號問題：JSX 屬性值如果是字串必須用引號（雙引號），是表達式用 {}，不要混用 TSX 檔案副檔名是 .ts 而不是 .tsx：TypeScript 剖析器只有 .tsx 副檔名才啟用 JSX 剖析，如果用 .ts 副檔名寫 JSX 會報錯，請用正確副檔名

格式化後縮排不對，和預期不一致

tabWidth 設定不對：檢查縮排寬度設定是 2 還是 4，團隊常用 2 空格，如果預期是 4 空格需要手動調整 tabWidth 選項 useTabs 設定不對：如果團隊用 Tab 縮排但你設定了空格，或者反過來，檢查 useTabs 選項是否正確程式碼本身有語法錯誤：語法錯誤會導致 AST 結構異常，格式化出來縮排就亂了，先修正紅色波浪線提示的語法錯誤混用了 Tab 和空格：原始程式碼中有些地方是 Tab 縮排有些地方是空格，格式化會統一為設定的風格，但原始碼混亂太嚴重可能需要多次格式化 printWidth 設定太小：如果行寬設定太小（如 40），程式碼會頻繁換行看起來縮排亂，設定為 80 或 100 更合適 bracketSameLine/arrowParens 等排版選項設定不符合預期：大括號位置、箭頭函式括號等樣式是設定決定的，不是縮排問題，調整對應選項即可 EditorConfig 和本機編輯器設定衝突：如果本機編輯器用了 .editorconfig 自動設定縮排，和網頁上設定的選項不一樣，兩邊格式化結果就會不一致，統一設定即可

鍵盤快速鍵無效，按了沒反應

焦點不在編輯器上：快速鍵只在編輯器獲得焦點時生效，如果焦點在按鈕、輸入框或者頁面其他地方快速鍵不觸發，先點擊編輯器區域聚焦瀏覽器快速鍵衝突：某些快速鍵（如 Ctrl+Shift+B 在 Chrome 是開啟書籤列，Ctrl+Shift+O 在 Firefox 是開啟歷史）被瀏覽器占用了，可以點擊按鈕操作，或者用 Cmd 代替 Ctrl（Mac）試下輸入法問題：中文輸入法狀態下某些快速鍵可能被攔截，切換到英文輸入法再試快速鍵其他擴充功能／外掛占用：瀏覽器安裝的快速鍵擴充功能、油猴腳本、Proxy 外掛可能占用了快速鍵，在無痕模式開啟頁面試試看系統快速鍵衝突：作業系統或其他執行的軟體（如截圖軟體、輸入法、IDE）全域快速鍵占用了對應組合鍵，可以修改其他軟體快速鍵或者用本工具按鈕操作 Mac/Windows 鍵盤差異：注意 Mac 用 Cmd（⌘）鍵，Windows/Linux 用 Ctrl 鍵，不要混用；Mac 上 Option 對應 Windows 的 Alt 瀏覽器安全限制：某些涉及檔案存取的快速鍵可能受瀏覽器安全策略限制，無法透過 JS 完全模擬，必要時直接點擊對應按鈕操作

術語表

Prettier: 目前最普及的前端程式碼格式化工具，採用 Opinionated 設計哲學，支援 JS/TS/CSS/HTML/Markdown 等多語言，強制統一程式碼風格，終結團隊風格爭論。
Terser: 新一代 JavaScript 壓縮工具，UglifyJS 的 ES6+ 相容分支，支援 ES6+ 語法壓縮與混淆，是 Webpack、Rollup、Vite 等現代建置工具的預設壓縮器。
UglifyJS: 經典 JavaScript 壓縮工具，Terser 的前身，但只支援 ES5 及更早語法，不支援 ES6+ 新特性，現在新專案一般使用 Terser 代替。
AST (Abstract Syntax Tree): 抽象語法樹，原始程式碼語法結構的樹狀表示，每個節點代表程式碼中的一個語法結構。Babel、Prettier、Terser、ESLint 等工具都是基於 AST 實作。
ESLint: JavaScript/TypeScript 生態系最流行的程式碼檢查工具（Linter），用於發現程式碼品質問題和統一程式碼風格，可與 Prettier 配合使用。
EditorConfig: 跨編輯器的程式碼風格統一設定檔，定義縮排風格、縮排大小、換行字元、編碼等基礎設定，讓不同編輯器開啟同一專案表現一致。
CodeMirror: 瀏覽器端程式碼編輯器元件，提供語法高亮、行號、括號配對、程式碼摺疊、多游標等專業編輯功能，是網頁端程式碼編輯器的主流選擇之一。
minify (壓縮): 在不改變程式碼邏輯前提下，透過移除空白、註解、縮短變數名、程式碼最佳化等手段最小化程式碼體積的過程，用於上線環境提升載入速度。
mangle (混淆／破壞): 壓縮過程中縮短變數名、函式名、參數名為單一字元的步驟，大幅減小程式碼體積同時讓程式碼更難閱讀，也叫變數名混淆。
beautify (美化): 即程式碼格式化，將壓縮或混亂的程式碼重新排版縮排、換行、加空格，提升可讀性，和 minify 相對。
trailing comma (尾隨逗號): 物件、陣列、函式參數最後一個元素後面的逗號，便於新增元素時 Git diff 更乾淨，ES5+ 環境支援。
arrow parens (箭頭函式括號): 單一參數箭頭函式的參數是否需要括號包裹，如 x => x（無括號）vs (x) => x（有括號）。
printWidth (行寬): 格式化時每行超過多少字元自動換行，Prettier 預設 80 字元，團隊可根據螢幕大小調整為 100 或 120。
semicolons (分號): JavaScript 語句末尾是否加分號，JS 有 ASI 自動分號插入機制，但大多數場景依然建議加分號避免意外。
single quote (單引號): 字串使用單引號還是雙引號，JS 中功能完全等價只是風格偏好，JSON 規範強制雙引號。
double quote (雙引號): 使用雙引號包裹字串，是很多語言的預設風格，也是 JSON 規範要求的字串格式。
tab width (縮排寬度): 每個縮排層級對應的空格數，前端社群常用 2 空格，後端語言常用 4 空格。
BOM (Byte Order Mark): 位元組順序標記，UTF-8 編碼檔案開頭可能出現的 EF BB BF 三個位元組，用於標記編碼，某些場景可能導致 JS 剖析錯誤。
UTF-8: Unicode 轉換格式 8 位元，目前 Web 和前端專案的標準檔案編碼，支援所有 Unicode 字元，是預設推薦編碼。
source map (原始碼映射): 壓縮／轉譯後的程式碼映射回原始碼位置的檔案，用於上線環境偵錯，壓縮後的程式碼報錯時可以定位到原始碼行號。

Prettier 核心選項對照表

選項名	作用	可選值	預設值	說明
tabWidth	縮排寬度（空格數）	`2, 4, 8`	`2`	useTabs 為 false 時生效，前端常用 2 空格
useTabs	使用 Tab 定位字元縮排	`true/false`	`false`	true 用 Tab 縮排，false 用空格縮排
printWidth	行寬限制（字元數）	`80, 100, 120`	`80`	超過寬度自動換行，非硬性限制
semi	語句末尾加分號	`true/false`	`true`	false 時僅在 ASI 可能失效處補分號
singleQuote	使用單引號	`true/false`	`false`	true 單引號，false 雙引號，JSX 屬性始終雙引號
trailingComma	尾隨逗號模式	`none, es5, all`	`all (v3+)`	none 無尾隨逗號，es5 物件陣列加，all 函式參數也加
arrowParens	箭頭函式單一參數括號	`avoid, always`	`always (v2+)`	avoid 單一參數省略括號，always 始終加括號
bracketSpacing	物件大括號內空白	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
bracketSameLine	HTML/JSX 閉合括號位置	`true/false`	`false`	true 閉合括號在最後一行末尾，false 單獨一行
vueIndentScriptAndStyle	Vue 檔案 script/style 縮排	`true/false`	`false`	是否縮排 Vue SFC 中 script 和 style 標籤內程式碼

JavaScript 程式碼壓縮前後對照範例

最佳化項目	格式化後程式碼（開發版）	壓縮後程式碼（上線版）	體積減少比例
空白與換行	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	`~60%`
移除註解	`// 計算兩數之和 function add(a,b){return a+b}`	`function add(n,d){return n+d}`	`~20%`
區域變數 mangle	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	`~40%`
常數折疊	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	`~50%`
布林簡化	`if (x === true) { doThing(); }`	`if(x)doThing();`	`~30%`
完整範例（含多個最佳化）	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	`~70%`

鍵盤快速鍵對照表

快速鍵 (Win/Linux)	快速鍵 (Mac)	功能說明	使用頻率
`Ctrl+Shift+B`	`Cmd+Shift+B`	執行格式化／美化	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	切換格式化／壓縮模式	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	開啟本機檔案	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	下載處理後檔案	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	清空編輯器內容	★★★
`Ctrl+S`	`Cmd+S`	下載（儲存）檔案	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	尋找 / 尋找取代	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	復原 / 取消復原	★★★★★
`Ctrl+/`	`Cmd+/`	切換行註解	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	增加縮排 / 減少縮排（選取時）	★★★★
`Alt+點擊`	`Option+點擊`	加入多游標	★★★
`Ctrl+D`	`Cmd+D`	選取下一個相同詞	★★★
`Home / End`	`Cmd+← / Cmd+→`	行首 / 行尾	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	檔案開頭 / 結尾	★★★