程式碼格式化

功能簡介

程式碼格式化工具能把擠成一團、被壓縮過或縮排不一致的程式碼，重新排成整齊一致的樣式。它支援網頁開發最常碰到的語言：HTML、CSS、SCSS、Less、JavaScript、TypeScript、JSON、XML、Markdown、YAML 和 GraphQL。

底層執行的是數百萬個專案都在用的 Prettier，所以結果和在 VS Code 裡或透過 pre-commit hook 格式化的程式碼完全一樣。每種語言的解析器只在你選擇時才載入，讓頁面保持輕快。

使用方法

1. 選擇程式碼的 語言。
2. 貼上程式碼，或開啟一個檔案。
3. 選擇 縮排 方式（2 個空格、4 個空格或 Tab）和 每行寬度。超過寬度的行會在語法允許的地方換行。
4. JavaScript 和 TypeScript 可以選擇敘述結尾是否加 分號；指令碼和樣式表如果專案偏好，可以選擇 單引號。
5. 複製或下載結果。

範例

範例是一個只有一行的 HTML 頁面，內嵌了 CSS 和 JavaScript。格式化之後，每個元素各占一行，CSS 規則展開成每行一個宣告，指令碼中的箭頭函式加上了括號和分號：

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

使用建議

• 格式化同時也是一次快速的語法檢查。如果 Prettier 無法解析輸入，錯誤訊息會標出行號和欄號，讓你直接跳到出錯的位置。
• XML 格式化時會把空白視為無意義，這樣巢狀標籤才能正確縮排。如果你的文件依賴元素內部的精確空白，使用前請先檢查結果。
• 需要反過來？可以用 JavaScript 與 CSS 壓縮工具縮小正式環境的程式碼，或用 JSON 格式化工具驗證與壓縮 JSON。