使用 Oxfmt 來排版 Svelte 檔案

前幾天赫然發現，void(0) 的排版工具 Oxfmt，終於也支援 Svelte 了！問了 AI 設定方式與查看文件之後，我發現設定相當簡單，接下來就來分享（水）一下安裝與使用方式。

void(0) 是由 Vue.js 與 Vite 的創始人尤雨溪（Evan You）所創立的公司，旨在打造一套高效且能整合前端開發全流程的全新工具鏈。而 Oxc（Oxidation Compiler）便是該公司推出的一系列工具集，全部都由 Rust 開發而成，當中包含 Oxlint、Oxfmt 與 oxc-parser 等組件。其中，負責程式碼格式化與排版的專屬工具正是 Oxfmt。

安裝並設定 Oxfmt

使用套件管理工具（我是使用 pnpm）下載 Oxfmt：

pnpm install -D oxfmt

初始化 Oxfmt 的設定檔案 .oxfmtrc.json：

node_modules/.bin/oxfmt --init

編輯 .oxfmtrc.json，開啟對 Svelte 檔案的排版支援：

{
    "$schema": "./node_modules/oxfmt/configuration_schema.json",
    // [!code highlight:1]
    "svelte": true
}

Oxfmt 最棒的優點之一就是也支援對 Tailwind CSS Utility Classes 的排序，且規則與官方的 Prettier 套件相同，不需要再額外安裝套件。

{
    "$schema": "./node_modules/oxfmt/configuration_schema.json",
    "svelte": true,
    // [!code highlight:3]
    "sortTailwindcss": {
        "stylesheet": "resources/css/app.css"
    }
}

接下來可以在 package.json 中加上 oxfmt 的指令。

{
    "scripts": {
        "fmt": "oxfmt",
        "fmt:check": "oxfmt --check"
    }
}

加上 --check 代表是只檢查排版是否符合 Oxfmt 的規則，但不進行排版。如果不符合規則，Oxfmt 會回傳錯誤的狀態碼，方便使用者可以在 CI 的環境中使用並對排版進行檢查。

Checking formatting...

resources/js/pages/dashboard/Page.svelte (36ms)

Format issues found in above 1 files. Run without `--check` to fix.
Finished in 635ms on 45 files using 8 threads.
[ELIFECYCLE] Command failed with exit code 1.

設定好 Oxfmt 之後，就可以刪除 Prettier 啦！

# 解除安裝 Prettier 與相關套件
pnpm uninstall prettier prettier-plugin-svelte prettier-plugin-tailwindcss

# 刪除 Prettier 的設定檔案
rm .prettierrc

Oxfmt 的另外一個優點，就是非常快，因為它是用 Rust 開發的工具，如果是包含許多檔案的大型專案，你一定可以感受到 Oxfmt 在排版上的速度提升。

在你最喜歡的 IDE 中使用 Oxfmt

不論你是使用 VS Code、Zed 或是 JetBrains IDE，Oxfmt 都有在上面推出相對應的套件，讓你可以在最習慣的程式碼編輯器中使用 Oxfmt。

以 PhpStorm 為例，在專案中設定好 Oxfmt 之後，你就可以在 Plugin 中下載 Oxc 套件。

然後在 Settings → Tools → Actions on Save 中開啟 Run Oxfmt 'Fix All' on Save，讓你的 IDE 在儲存時對檔案進行排版。

除了排版，如果你想對語法進行檢查，不妨考慮看看同樣由 void(0) 推出的 Oxlint 工具，安裝與設定方式與 Oxfmt 幾乎一致。那麼對於 Oxfmt 的簡單介紹就到這邊，感謝你的閱讀，我們下次見 👋。

參考資料

• AI
• Oxc 官方文件