JSX 格式化工具

0 字元

GeekFormat JSX 格式化工具，基於 Prettier v3 Standalone 引擎對 React JSX/TSX 組件代碼進行專業美化排版。支持12項格式化配置（縮進大小、分號、引號風格、尾逗號、括號間距、箭頭函數括號、打印寬度、JSX單引號、JSX括號同行、屬性引號策略等），內置 Terser 壓縮引擎，提供 JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON 七種語言切換。CodeMirror 6 語法高亮編輯器，左右分欄實時對照，支持文件上傳下載、歷史記錄、URL分享、一鍵複製。純瀏覽器端處理，代碼不上傳服務器。

相關推薦

JSX 壓縮

TSX 格式化

JavaScript 格式化工具

CSS 格式化

JSON 格式化

關於 JSX 格式化

JSX 是 JavaScript XML 的縮寫，是 React 框架引入的一種 JavaScript 語法擴展，允許在 JavaScript 代碼中直接書寫類似 HTML 的標籤結構。JSX 在編譯時會被 Babel 或 TypeScript 等工具轉換爲普通的 React.createElement() 函數調用。JSX 讓組件代碼的結構更加直觀，開發者可以像寫 HTML 一樣描述 UI 結構，同時獲得 JavaScript 的全部表達能力。然而，JSX 代碼如果缺乏規範的格式化——標籤嵌套層級混亂、屬性排列無序、縮進不統一——會嚴重影響可讀性和維護效率，這也是 JSX 格式化工具的價值所在。

Prettier 是目前 JavaScript/JSX 生態中最主流的代碼格式化工具，由 James Long 於 2017 年創建，現已成爲事實標準。Prettier 的核心理念是"有主見的格式化"（opinionated formatter）——它只提供少量可配置項，其餘規則內置不可修改，這樣做的好處是消除了團隊間關於代碼風格的無休止爭論。Prettier 支持 JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown 等多種語言和格式，被 React、Vue、Angular 等主流框架社區廣泛採用。大多數現代前端項目都會在 CI/CD 流水線中集成 Prettier 確保代碼風格一致。

JSX 格式化的核心規則包括：第一，縮進層級——每個嵌套的 JSX 標籤和表達式都增加一級縮進，體現 DOM 樹狀結構；第二，屬性排列——當標籤有多個屬性且超出行寬時，每個屬性獨佔一行並對齊；第三，括號處理——多行 JSX 表達式通常用圓括號包裹，防止自動分號插入（ASI）問題；第四，自閉合標籤——沒有子元素的組件使用 <Component /> 形式；第五，字符串引號——JSX 屬性默認使用雙引號（與 HTML 一致），JavaScript 字符串默認使用單引號；第六，空格處理——標籤內的花括號 {} 兩側是否加空格可配置。

JSX 壓縮（Minification）是格式化的反向操作，目的是將 JSX 轉換爲體積最小的可執行代碼，用於生產環境部署以減少網絡傳輸量和加快加載速度。JSX 壓縮通常包含以下步驟：先用 Babel 將 JSX 編譯爲 React.createElement 調用（即普通 JavaScript），然後使用壓縮器（如 Terser、UglifyJS）進行：移除註釋和空白字符、縮短變量名和函數名（mangling）、消除死代碼（dead code elimination）、簡化表達式和條件語句、合併聲明、內聯函數等。現代構建工具（Webpack、Vite、Rollup）在 production 模式下都會自動執行代碼壓縮。

代碼格式化爲什麼重要？在團隊協作中，統一的代碼風格可以大幅提升可讀性和審查效率。如果每個開發者都按照自己的偏好格式化代碼，Git diff 中會充斥着大量無意義的格式變更，審查者很難找到真正的邏輯變化。研究表明，開發者花在閱讀代碼上的時間遠多於寫代碼的時間，一致的格式化風格可以顯著降低閱讀認知負擔。Google、Meta、Airbnb 等大公司都有嚴格的代碼風格規範和自動化格式化工具鏈，這也是軟件工程成熟度的體現。

Prettier 與 Linters（如 ESLint、TSLint）的分工是現代前端工程化的最佳實踐：Prettier 專管格式（formatting）——換行、縮進、空格、分號、引號、逗號等純風格問題；ESLint 專管質量（code quality）——未使用變量、潛在 bug、安全問題、最佳實踐等邏輯問題。兩者配合使用時，需要通過 eslint-config-prettier 關閉 ESLint 中與 Prettier 重疊的格式規則，避免衝突。很多團隊還會配置 pre-commit 鉤子（通過 husky + lint-staged），在提交代碼前自動運行 Prettier 和 ESLint，保證入庫代碼都符合規範。

選擇 JSX 格式化工具時需要考慮幾個因素：第一，引擎選擇——優先選擇 Prettier 作爲引擎，因爲它是社區標準，結果可預期且與 IDE 插件一致；第二，可配置性——根據團隊需求選擇可調參數的數量，太多選項反而增加決策成本；第三，安全性——確保工具在本地處理代碼，不上傳到服務器，避免源碼泄露風險；第四，附加功能——壓縮、語法高亮、歷史記錄、分享等功能可以提升使用效率；第五，多語言支持——一個工具覆蓋 JS/TS/JSX/TSX/CSS/HTML/JSON 等多種語言可以減少工具切換成本。

使用在線代碼格式化工具的安全注意事項：第一，優先選擇純瀏覽器端處理的工具——這類工具不需要服務器，代碼只在本地運行，安全性最高；第二，不要粘貼包含敏感信息的代碼——如數據庫密碼、API 密鑰、內部業務邏輯、專有算法等，即使工具聲稱不上傳，也要保持安全意識；第三，檢查工具是否使用 HTTPS——防止傳輸過程中被竊聽（雖然本地處理的工具不需要傳輸，但頁面本身也需要安全加載）；第四，重要代碼使用本地工具——對於核心業務代碼，建議使用本地安裝的 Prettier CLI 或 IDE 插件，不依賴在線服務；第五，定期審查工具的可信度——查看是否開源、社區評價如何、是否有隱私政策等。

適用場景

  • 從網上覆制的 React 組件代碼格式混亂，快速格式化後便於閱讀和學習
  • 接手老項目時整理 JSX 組件文件，統一代碼風格後再進行二次開發
  • 代碼審查前先格式化，消除格式差異導致的無意義 diff，聚焦於邏輯審查
  • 將壓縮後的 JSX 生產代碼反格式化，排查線上問題時閱讀混淆代碼
  • 編寫技術博客或文檔前美化 JSX 示例代碼，提升內容專業度
  • 對比不同格式化配置的效果，爲團隊 Prettier 配置方案做選型參考
  • 教學演示中展示 JSX 代碼從混亂到規範的排版過程
  • 在線調試 React 代碼片段時，先格式化再分析結構和定位 bug
  • 生成 JSX 代碼的組件庫文檔中，保證示例代碼風格統一美觀
  • 面試前整理自己的 React 項目代碼，確保提交的代碼樣例風格規範
  • 將 AI 生成的 JSX 代碼格式化後再放入項目，消除 AI 輸出的格式不統一問題
  • 開發 React Native 或 Next.js 項目時，在線快速格式化組件代碼片段

使用方法

  1. 在左側編輯器粘貼 JSX/TSX 代碼，或點擊上傳按鈕導入 .jsx/.tsx 文件，也可直接從示例加載
  2. 點擊設置按鈕調整格式化參數：縮進大小、分號、引號、尾逗號、打印寬度、JSX選項等，或保持默認配置
  3. 點擊美化按鈕（或按快捷鍵）執行格式化，右側面板即時顯示格式化結果，可左右拖拽調整面板寬度
  4. 如需壓縮，點擊壓縮按鈕切換爲壓縮模式，Terser 引擎將輸出最小化的 JSX 代碼
  5. 點擊複製按鈕將結果複製到剪貼板，或點擊下載保存爲文件，也可通過分享鏈接發送給他人

功能特點

  • Prettier v3 引擎：基於業界最流行的 Prettier v3 Standalone 作爲格式化引擎，搭配 Babel 解析器，與 VS Code 中 Prettier 插件格式化結果一致，保證團隊代碼風格統一
  • 12項格式化配置：可調整縮進大小（2/4/8空格或Tab）、分號、單/雙引號、尾逗號（none/es5/all）、括號間距、箭頭函數括號、打印寬度、JSX單引號、JSX括號同行、屬性引號策略等12項參數
  • JSX語法高亮編輯器：基於 CodeMirror 6 的專業代碼編輯器，支持 JSX/TSX 語法高亮、行號、括號匹配，左側輸入右側結果實時對照
  • JSX壓縮功能：內置 Terser 壓縮引擎，一鍵將 JSX 組件代碼壓縮爲最小體積，支持變量名混淆（mangle）、死代碼去除、console/debugger清理等高級壓縮選項
  • 7種語言自由切換：支持 JavaScript、TypeScript、JSX、TSX、CSS、HTML、JSON 七種前端常用語言，一個工具覆蓋全棧格式化需求
  • 文件上傳下載：支持 .jsx/.tsx/.js/.ts/.css/.html/.json 文件直接上傳格式化，處理後可下載保存到本地
  • 歷史記錄面板：自動保存最近格式化記錄，支持回溯歷史版本，對比不同配置下的格式化效果
  • 一鍵複製結果：格式化或壓縮後的代碼一鍵複製到剪貼板，直接粘貼到 IDE 或項目中使用
  • URL分享功能：通過 LZ-String 壓縮將代碼和配置編碼到 URL hash 中，複製鏈接即可分享完整代碼和格式化參數
  • 語法錯誤友好提示：格式化失敗時區分語法錯誤與其他錯誤，給出定位提示幫助快速修復代碼問題
  • 可拖拽分欄：左右面板寬度可自由拖拽調整，適應不同屏幕尺寸和閱讀習慣
  • 瀏覽器本地處理：所有格式化、壓縮、分析均在瀏覽器 JavaScript 中完成，代碼內容不會上傳到任何服務器，源碼安全有保障

常見問題

JSX 格式化的原理是什麼？和 Prettier 有什麼關係？

本工具底層使用 Prettier v3 Standalone 版本作爲格式化引擎，通過 Babel 解析器解析 JSX 語法，然後按照配置的規則重新輸出排版整齊的代碼。Prettier 是目前前端生態中最流行的代碼格式化工具，被廣泛應用於 React/Vue/Angular 等項目。本工具的格式化結果與你在 VS Code 中安裝 Prettier 插件對 JSX 文件執行格式化的結果基本一致，適合在線快速格式化而無需打開本地 IDE。

支持哪些格式化選項？可以自定義縮進和引號風格嗎？

支持12項格式化配置：1）縮進大小：2空格/4空格/8空格或使用Tab；2）是否使用分號；3）單引號還是雙引號；4）尾逗號策略：none（無）/es5（數組對象）/all（函數參數也加）；5）對象大括號內是否有空格；6）箭頭函數單參數是否加括號；7）打印寬度（即每行最大字符數）；8）JSX屬性使用單引號還是雙引號；9）JSX多行時右括號是否與內容同行；10）對象屬性引號策略：按需/保留/一致；11）HTML空白敏感度；12）使用Tab縮進。設置面板中可自由調整。

格式化會改變 JSX 代碼的邏輯嗎？安全嗎？

格式化只調整空白字符（換行、縮進、空格）和引號、分號等語法糖形式，不會改變任何代碼邏輯。Prettier 是經過全球數百萬開發者驗證的成熟工具，格式化後的代碼在語義上與原始代碼完全等價。但需要注意：如果原始代碼本身有語法錯誤（如括號不匹配、標籤未閉合），格式化會失敗並提示語法錯誤，這時候需要先修復代碼問題再格式化。

JSX 壓縮功能是怎麼實現的？支持哪些壓縮選項？

JSX 壓縮使用 Terser 引擎（業界最流行的 JavaScript 壓縮器之一）在瀏覽器本地執行。壓縮包括：移除註釋和多餘空白、變量名縮短混淆（mangle）、死代碼消除（dead_code）、未使用變量移除（unused）、函數/變量提升優化、條件表達式簡化、循環優化等。壓縮會先通過 Babel 將 JSX 編譯爲普通 JavaScript，再進行壓縮優化。注意：壓縮後的代碼可讀性大幅降低，適合生產環境部署，不適合開發調試。

支持 TypeScript (TSX) 嗎？和 JSX 有什麼區別？

支持。工具默認是 JSX 語言，你可以通過左上角語言切換菜單切換到 TSX 模式。TSX 模式使用 TypeScript 解析器，能夠正確識別 TypeScript 類型標註（interface、type、泛型、類型斷言等），不會因爲類型語法而報錯。JSX 模式使用 Babel 解析器，適合純 JavaScript 的 React 組件。TSX 壓縮時會先自動去除類型標註再進行 Terser 壓縮。

輸入的 JSX 代碼會上傳到服務器嗎？隱私安全嗎？

完全安全。本工具的所有功能（格式化、壓縮、語法檢測、歷史記錄）都在你的瀏覽器本地通過 JavaScript 完成，代碼內容不會通過網絡發送到任何外部服務器。Prettier 和 Terser 都是純 JavaScript 實現的庫，可以在瀏覽器端直接運行。你可以在斷網狀態下使用本工具，所有功能仍然正常。歷史記錄保存在瀏覽器的 localStorage 中，僅在你當前設備可見。

歷史記錄保存在哪裏？會丟失嗎？

歷史記錄保存在瀏覽器的 localStorage（本地存儲）中，與具體瀏覽器和設備綁定。如果你清除瀏覽器數據、切換瀏覽器或使用無痕模式，歷史記錄會丟失。歷史記錄用於快速回溯最近格式化過的代碼片段，方便對比不同配置的效果。建議重要代碼自行保存爲文件，不要僅依賴歷史記錄功能。

URL 分享功能會把代碼傳到服務器嗎？

不會。URL 分享功能將代碼和配置使用 LZ-String 壓縮後編碼到 URL 的 hash 部分（#號後面的內容）。URL hash 有一個重要特性：它不會隨 HTTP 請求發送到服務器，僅在瀏覽器本地被 JavaScript 讀取和解析。當接收方打開分享鏈接時，瀏覽器直接解析 hash 並解壓顯示代碼，整個過程不需要服務器參與。但請注意：分享鏈接中包含完整代碼內容，如果代碼敏感，請不要在公開渠道分享。

格式化失敗提示語法錯誤怎麼辦？

格式化失敗最常見的原因是代碼本身存在語法錯誤：1）JSX標籤未閉合——檢查所有標籤是否成對，自閉合標籤是否正確（<img />而非 <img>）；2）括號不匹配——檢查花括號{}、圓括號()、方括號[]是否成對；3）引號未閉合——字符串的引號是否完整；4）語法寫錯——比如使用了 JSX 中不允許的語法。可以先檢查錯誤提示中的行號和錯誤信息定位問題，也可以將代碼簡化後逐步排查。

打印寬度（printWidth）是什麼意思？應該設多少？

打印寬度（printWidth）是 Prettier 的核心參數之一，表示每行代碼的最大字符數。當一行代碼超過這個寬度時，Prettier 會自動將其折行。默認值是 80 字符，這是一個歷史悠久的編程慣例（源自穿孔卡片和終端寬度）。常見的設置值：80（經典保守）、100（較常見）、120（寬屏友好）。設置過小會導致代碼頻繁折行反而不易讀，設置過大則一行太長在窄屏下閱讀困難。建議根據團隊規範和顯示器寬度選擇 80-120 之間的值。

尾逗號（trailing comma）有什麼用？應該選哪種模式？

尾逗號是指在數組、對象、函數參數等多行結構的最後一項後面也加一個逗號。好處包括：1）添加/刪除項時只改動一行，Git diff 更乾淨；2）避免忘記加逗號導致的語法錯誤；3）某些情況下解析更穩定。Prettier 提供三種模式：none（不加尾逗號，最簡潔）、es5（僅在 ES5 支持的地方加，即數組和對象，最兼容）、all（所有可能的地方都加，包括函數參數，需要 ES2017+ 或 Babel/TS 支持）。現代項目推薦使用 'all' 模式，配合 Babel 或 TypeScript 編譯完全沒問題。

JSX單引號和JSX括號同行分別是什麼效果？

JSX單引號（jsxSingleQuote）：控制 JSX 屬性值使用單引號還是雙引號。默認關閉（雙引號），這與 HTML 屬性慣例一致。開啓後 JSX 中的屬性字符串將使用單引號。JSX括號同行（jsxBracketSameLine）：控制多行 JSX 元素的結束右尖括號（/> 或 >）是否放在最後一行的末尾（同行），還是另起一行（不同行）。默認關閉（另起一行），開啓後右括號與最後一個屬性在同一行。不同團隊有不同偏好，選擇與項目一致的風格即可。

支持批量格式化多個文件嗎？

目前網頁版工具主要針對單文件快速格式化場景設計，支持單個文件上傳處理。如果你有大量 JSX/TSX 文件需要批量格式化，推薦在項目中安裝 Prettier CLI 工具，通過命令行批量處理（如 npx prettier --write "src/**/*.jsx"）。本工具的底層引擎與 Prettier 完全一致，格式化結果相同。後續版本可能會考慮增加批量處理功能。

可以和 ESLint 配合使用嗎？

可以。在實際項目中，推薦使用 Prettier 負責代碼格式（換行、縮進、空格、引號等），ESLint 負責代碼質量（未使用變量、潛在 bug、最佳實踐等）。兩者配合使用的最佳實踐是：1）安裝 eslint-config-prettier 關閉 ESLint 中與 Prettier 衝突的格式規則；2）先運行 Prettier 格式化，再運行 ESLint 檢查。本工具專注于格式化（Prettier 擅長的部分），不包含 ESLint 的代碼檢查功能。

手機上可以使用嗎？移動端體驗如何？

可以在手機瀏覽器中使用。工具採用響應式設計，在小屏幕設備上會自動調整佈局——左右分欄會變爲上下分欄，工具欄按鈕優化爲適合觸控的尺寸。但代碼編輯在手機上體驗不如桌面端，建議主要在電腦上使用。如果經常需要在移動設備上處理代碼，建議使用支持 Prettier 的移動端代碼編輯器 App。

故障排查

格式化失敗提示語法錯誤怎麼辦？

先確認代碼是否完整：JSX 組件通常需要 export 或至少包含一個函數返回 JSX。常見語法錯誤包括：1）JSX 標籤未閉合——檢查每一個開始標籤是否有對應的結束標籤或自閉合標記；2）花括號不匹配——JSX 中 {} 表達式的括號是否成對；3）字符串引號未閉合——檢查所有單引號/雙引號/反引號；4）JSX 中使用了保留字——如 class 要寫成 className，for 要寫成 htmlFor；5）多個根元素——JSX 只允許一個根元素，多個元素需要用 <>...</> 或 <div> 包裹。錯誤信息中通常會提示行號和原因，可以據此定位。

上傳文件後沒有反應或格式不對？

首先確認文件擴展名是否正確——.jsx/.tsx/.js/.ts/.css/.html/.json 文件都可以上傳。如果文件擴展名不標準，工具可能無法正確識別語言格式，導致格式化結果不符合預期。解決方法：1）確保文件擴展名爲標準格式；2）上傳後檢查左上角語言選擇是否正確，不正確可手動切換；3）確認文件內容是純文本而非二進制文件；4）文件過大（超過 1MB）可能導致瀏覽器卡頓，建議使用桌面工具處理。

格式化後的代碼和我本地 Prettier 結果不一樣？

可能的原因：1）版本差異——本工具使用 Prettier v3，如果你的項目使用 v2 版本，某些細節可能不同（如尾逗號默認值變化）；2）配置不同——檢查打印寬度、縮進、引號、尾逗號等參數是否與項目配置一致；3）解析器不同——JSX 使用 Babel 解析器，TSX 使用 TypeScript 解析器，確認選擇正確；4）插件差異——如果本地 Prettier 安裝了額外插件（如 prettier-plugin-tailwindcss），本工具不包含這些插件。建議將本工具的配置調整爲與項目 .prettierrc 一致。

壓縮 JSX 後代碼不能正常運行？

JSX 壓縮使用 Terser 引擎，它首先將 JSX 編譯爲普通 JavaScript 再進行壓縮。如果壓縮後代碼不能運行，檢查：1）壓縮配置是否過於激進——如開啓了 toplevel 可能會改變模塊行爲；2）代碼中是否使用了 eval 或動態屬性訪問——變量混淆可能導致名稱不匹配；3）是否依賴特定的函數名或類名——如果有，需要開啓 keep_fnames 或 keep_classnames 選項。生產環境的壓縮建議使用項目構建工具（Vite/Webpack）完成，它們有更完善的配置和插件生態。

術語表

JSX
JavaScript XML 的縮寫，React 引入的 JavaScript 語法擴展，允許在 JS 中書寫類 HTML 的標籤結構，編譯後轉換爲 React.createElement() 調用。
Prettier
目前最流行的有主見的（opinionated）代碼格式化工具，支持 JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown 等，已成爲前端代碼格式化事實標準。
Babel
JavaScript 編譯器，可將 ES6+/JSX/TS 等新語法轉換爲兼容舊瀏覽器的 ES5 代碼，同時也作爲 Prettier 解析 JSX 的底層引擎。
Terser
業界最流行的 JavaScript/JSX 壓縮器（minifier），支持變量混淆、死代碼消除、代碼壓縮等，是 Webpack/Vite 等構建工具的默認壓縮器。
Print Width（打印寬度）
Prettier 核心參數之一，表示每行代碼的最大字符數，超過此寬度時自動折行。默認 80 字符，常見設置爲 80/100/120。
Trailing Comma（尾逗號）
在數組、對象、函數參數等多行結構的最後一項後面也加逗號。可以讓 Git diff 更乾淨、避免語法錯誤。Prettier 支持 none/es5/all 三種模式。
Mangle（變量混淆）
代碼壓縮中的變量名/函數名縮短技術，將有意義的長變量名替換爲 a/b/c 等短名稱，減小代碼體積，也增加閱讀難度。
Dead Code Elimination（死代碼消除）
壓縮器優化技術，移除永遠不會執行的代碼（如 false 條件下的代碼、未使用的變量和函數），減小產物體積。
CodeMirror
本工具使用的瀏覽器端代碼編輯器組件（版本 6），提供語法高亮、行號、括號匹配等專業編輯功能，廣泛應用於各類在線 IDE。
LZ-String
JavaScript 實現的 LZ 壓縮算法，用於在 URL hash 中高效壓縮存儲代碼內容。壓縮比高且解碼速度快，適合分享鏈接場景。
localStorage
瀏覽器提供的本地鍵值存儲 API，容量約 5-10MB，數據持久保存（除非主動清除）。本工具用它存儲格式化歷史記錄。
ESLint
JavaScript/TypeScript 代碼靜態檢查工具（Linter），主要負責代碼質量和最佳實踐，通常與 Prettier 配合使用（Prettier 管格式，ESLint 管質量）。

支持的語言與文件格式

工具支持7種前端常用語言，可通過左上角菜單自由切換：

語言文件擴展名格式化引擎壓縮引擎
JavaScript.js, .mjs, .cjsPrettier (Babel)Terser
TypeScript.ts, .mts, .ctsPrettier (TypeScript)Terser (先去類型)
JSX.jsxPrettier (Babel)Terser
TSX.tsxPrettier (TypeScript)Terser (先去類型)
CSS.cssPrettier (PostCSS)CSSO
HTML.html, .htmPrettier (HTML)自定義實現
JSON.jsonPrettier (JSON)JSON.stringify

格式化配置項一覽

12項可配置的格式化參數及其作用：

配置項可選值默認值說明
tabWidth 縮進大小2 / 4 / 8 / Tab2 空格每級縮進使用的空格數，或使用 Tab 字符
semi 分號true / falsetrue語句末尾是否添加分號
singleQuote 單引號true / falsefalse (雙引號)JS 字符串使用單引號還是雙引號
trailingComma 尾逗號none / es5 / alles5多行結構最後一項後是否加尾逗號
bracketSpacing 括號空格true / falsetrue對象大括號內側是否加空格
arrowParens 箭頭括號always / avoidalways箭頭函數單參數時是否加括號
printWidth 打印寬度數字（建議80-120）80每行最大字符數，超出自動折行
jsxSingleQuote JSX單引號true / falsefalseJSX 屬性值使用單引號（默認雙引號）
jsxBracketSameLine JSX括號同行true / falsefalse多行JSX右括號是否與最後屬性同行
quoteProps 屬性引號as-needed / preserve / consistentas-needed對象屬性名何時加引號

JSX 壓縮前後效果對比

以一個典型 React 組件爲例，展示壓縮前後的體積變化：

對比項格式化（開發）壓縮（生產）壓縮比
代碼體積約 2.5 KB約 0.8 KB~68%
行數約 80 行1 行~99%
變量名有意義的名稱a/b/c/d 單字母—
註釋保留全部註釋全部移除—
可讀性高（可調試閱讀）極低（僅機器可讀）—
適用場景開發、調試、審查生產部署、CDN分發—

Privacy & Security

本 JSX 格式化工具所有操作完全在瀏覽器本地完成：你輸入或上傳的代碼僅在瀏覽器 JavaScript 中進行格式化和壓縮處理，不會通過網絡發送到任何外部服務器。Prettier 和 Terser 都是純 JavaScript 庫，可在瀏覽器端直接運行。歷史記錄保存在瀏覽器 localStorage（本地存儲）中，僅在當前設備和瀏覽器可見。URL 分享功能將代碼通過 LZ-String 壓縮後編碼在 URL hash 部分（#後內容不發送到服務器）。頁面不使用 Cookie 追蹤，不收集用戶輸入的代碼內容。你可以在斷網狀態下使用本工具，核心功能正常可用。

Authoritative References