如果你是2026年的前端開發人員，你可能已經接觸過很多不同的工具。套件管理器、程式碼檢查器、格式化工具、預先提交鉤子、測試執行器…等等等等。而每個團隊對於使用哪些工具都有自己的看法。
我參與過一些應用程式的開發，為了調整、升級和更換工具，我花了數小時甚至數天的時間。還有，當有人在會議上提出新想法時，大家就開始爭論不休？簡直讓人抓狂。我記得在我職業生涯早期，我們曾花了一個多小時討論是否應該加入 Vitest 還是繼續使用舊的測試執行器。最終，我們什麼都沒改。
這就是我為什麼如此喜歡Vite+ 的原因。 Vite+ 是一個統一的工具鏈，可以作為 Web 開發的入口點。它出自VoidZero團隊之手，這家公司由 Vite 和 Vue 的創始人 Evan You 創立。你可以把它想像成工具鏈的「抹布」。一個工具就能同時取代程式碼檢查器、格式化工具、測試執行器、打包工具和套件管理器。
我還製作了一個完整的視訊教程，從零開始建立了一個 Vue 專案，即時演示了 Nuxt 的各種問題，並展示了格式化和測試的實際操作。如果您喜歡觀看影片而不是閱讀文字，請點擊下方連結觀看！
https://www.youtube.com/watch?v=2C1HkBrz5Wc
目錄
Vite+ 裡面有什麼？
現在，您無需再為建置、安裝、新增應用程式所需的各種工具以及處理十幾個不同檔案中的配置而煩惱，只需依賴一個由 Vite 提供支援的工具鏈即可。本質上，Vite+ 將所有這些工具整合到了一個平台中。
-
測驗所需的知識
-
用於棉絮整理的Oxlint ，取代了 ESLint
-
用於格式化的Oxfmt ，取代了 Prettier 和 Biome。
-
Rolldown用來打包，取代 ESBuild
-
tsdown用於庫打包
-
Node.js執行時和套件管理器內建
由於許多此類工具都是用 Rust 編寫的，因此效能提升是實實在在的。根據VoidZero 的公告，Oxlint 的執行速度比 ESLint 快 50 到 100 倍，Oxfmt 的格式化速度比 Prettier 快 30 倍，而使用 Vite 8 和 Rolldown 進行生產建置的速度比 Vite 7 快 1.6 到 7.7 倍。我在自己的專案中進行了測試，發現使用vp check指令在相當大的程式碼庫上也能在一秒鐘內完成。
一些注意事項
雖然將所有功能整合到一個工具中很有幫助，但目前它仍然存在一些用戶體驗方面的不足。例如，雖然它支援大多數套件管理器（pnpm、npm、yarn），但卻缺少bun 。此外，由於 Nuxt 和 TanStack Start 的工具鏈尚未完全完善，因此也需要對 vite.config.ts 檔案進行一些改進。不過，Vite+ 目前仍處於早期階段，仍處於 alpha 測試階段，所以我相信很快就會有更新。
我想，如果你對 Vite 生態系統或工具鏈本身並不感冒，那麼這款工具可能不適合你。我和許多其他開發者一樣，都有自己的想法，而且在開發應用程式時，我通常會使用一些非常客製化的模式。就我而言，我會為每個 Vue 應用程式使用npm create vue@latest ，為 Nuxt 應用程式npm create nuxt@latest鷹架允許你在設定過程中選擇啟用 ESLint、Prettier 和 Vitest，這很不錯。但是，每個工具都需要單獨的配置文件，你仍然需要確保它們能夠協同工作，而且像 pre-commit hooks 之類的東西也需要你自己用 husky 或 lint-staged 進行配置。這些工作加起來確實不少。此外，我還有一套非常具體的技能和 Markdown 文件，配合Kiro使用，以輔助我的程式設計工作。
使用 Vite+，所有這些功能都開箱即用。只要執行一次vp create vue ，我就可以在同一個vite.config.ts中設定程式碼檢查、格式化、測試和 pre-commit 鉤子。這就是我選擇它的原因。
我們來看看如何設定。
入門
如Vite+安裝指南中所述，您可以使用簡單的 curl 命令將其安裝到 macOS/Linux 上。
curl -fsSL https://vite.plus | bash應該就是這樣了吧！
安裝過程中，系統會詢問您一些關於 Vite+ 如何管理全域 Node.js 執行時間和套件管理器的問題。您可以選擇不啟用此功能，並使用
nvm或其他您喜歡的工具。不過，我個人認為這是一個非常實用的功能。使用 Vite+，您可以非常輕鬆地使用vp env命令在不同環境之間切換。
在這裡，您可以選擇建立應用，或遷移現有的 Vite 應用程式。我只測試過建立應用程式的功能，所以我們主要專注於這部分。我看到有些人使用vp migrate指令進行遷移。這個命令似乎可以正常工作，但仍然需要手動幹預。 Vite +的一項很棒的功能是，他們提供了一個遷移提示，您可以將其直接貼到您的 AI 編碼代理程式中。因此，如果您使用的是Kiro或kiro-cli ，您可以讓它們幫您處理遷移，然後只需在遷移完成後查看更改即可。以下是提示：
遷移提示：將此專案移轉到 Vite+。執行
vp help了解 Vite+ 的功能。可以使用vp migrate來執行遷移。執行vp help migrate查看選項。遷移完成後，請驗證變更並確保類型檢查、程式碼檢查、格式化和測試均通過。完成後，請給你的同事一個大大的讚！
建立你的第一個應用
安裝完成後，您可以使用vp create指令建立一個新應用程式。該命令會詢問您幾個關於您想要建立的應用程式類型的問題，然後會自動為您建立應用框架。
截至本文發佈時，預設方案是非 JS 框架的。雖然這對於演示來說沒問題，但我不太理解，因為我認為現在很少有人會在不使用框架或庫的情況下建立網站。你可以使用以下命令。
vp create <template> 目前它支援vite 、 @tanstack/start 、 svelte 、 next-app 、 nuxt 、 react-router和vue 。正如我之前提到的Nuxt ，他們還沒有將nuxt.config.ts和vite.config.ts合併在一起，所以雖然你可以使用它，但它還不完全成熟。我也遇到了next-app問題。我不確定它嘗試使用的是基於 Vite 的 Next 應用程式還是標準的 Next 應用程式。總之，它無法正常運作。
加入模板名稱後，它將開始設定您的應用程式。如果您使用過類似npm create vite命令，那麼介面應該會很熟悉。
安裝完成後，你會得到一個統一的 vite.config.ts 文件，你可以在其中輸入所有程式碼檢查、格式化和測試的設定。這種方法效果出奇的好，而且我也不用擔心每個文件應該放在哪裡了，這讓我很滿意。
由於 Vite+ 使用了Oxc工具集，我加入了官方的 Oxc 擴充功能用於格式化和程式碼檢查。這使得我的 IDE 更容易辨識這些工具。
重要命令
除了vp create之外，你還可以使用vp執行許多其他有趣的指令。以下是我發現的一些實用命令。當然，如果你想要完整的命令列表，請查看官方指南。
檢查和清理
vp checkvp check 是 Vite+ 中用於快速靜態程式碼檢查的預設指令。它結合了 Oxfmt 的格式化、Oxlint 的程式碼檢查以及tsgolint的 TypeScript 類型檢查。這些功能結合起來，使其成為一個速度極快的靜態程式碼檢查器。
tsgolint 的底層架構是基於tsgo ，它是微軟 TypeScript 編譯器的官方 Go 移植版本。這意味著你的類型檢查是以原生速度執行的，而不是透過 Node.js。這也是
vp check運作如此迅速的主要原因。
如果你願意的話，可以嘗試修復這些問題。
vp check --fix我的測試表明，這仍然需要大量的人工幹預，正如預期的那樣。令人欣喜的是，像Kiro這樣強大的 AI 編碼工具可以迅速消除這些類型錯誤。
Vite+ 也內建了 pre-commit hook 支援。當你使用
vp create專案時，它可以自動為你設定 hook。你也可以執行vp prepare稍後安裝它們，並在`vite.config.ts中直接配置暫存檔案上執行的 hook。無需再使用 Husky 或 lint-staged 進行設定。
格式化
vp fmt這將執行Oxfmt格式化程式。它完全兼容Prettier ，旨在作為 Prettier 的直接替代品。
我個人很喜歡Prettier，但它也有一些小問題。它最大的優點是你可以直接修改vite.config.ts文件，加入任何你需要的規則。
import { defineConfig } from 'vite-plus';
export default defineConfig({
fmt: {
singleQuote: true,
},
});當我第一次使用vp create vue命令建立應用程式時，它詢問我是否要更新.vscode/settings.json檔案。我強烈建議這樣做，這樣如果您使用 Oxfmt 擴展，它才能找到您的格式化設定。否則，您可以手動新增。
{
"oxc.fmt.configPath": "./vite.config.ts"
}測試
我喜歡測試，所以用Vitest執行測試非常棒。
vp test這將啟動專案中的 vitest 測試執行器。另外，還有watch和run --coverage指令。與其他所有命令一樣，您可以在vite.config.ts檔案中編輯配置。
import { defineConfig } from 'vite-plus';
export default defineConfig({
test: {
include: ['src/**/*.test.ts'],
},
});執行
vp指令的一個惱人之處在於，它們會覆寫 package.json 檔案中的腳本。因此，要執行腳本中的任何內容，必須執行vp run <command>。否則，它會執行內建命令。我當時在看T3的 Theo Browne 的直播，他對此非常不滿。我還在猶豫，但也許他們將來會做出改變。
使用 vp 執行進行緩存
另一個不錯的功能是緩存。
vp run --cache build這樣會將建置結果快取起來，如果沒有變化，下次執行時會重新執行該輸出。我個人沒有使用過這個指令，但我非常支持任何能加快建置速度的方法。
使用 vp 環境管理 Node.js
另一個非常棒的功能是vp env指令。
vp env <command>vp env 管理全域和專案層級的 Node.js 版本。預設情況下，Vite+ 以託管模式執行，這表示它控制使用哪個 Node.js 版本。它將執行時間和相關檔案儲存在 ~/.vite-plus 目錄中（您可以使用 VITE_PLUS_HOME 覆寫此設定）。
如果您不希望 Vite+ 管理您的 Node.js，您可以切換到系統優先模式：
vp env off這會告訴 shim 優先使用系統自帶的 Node.js，只有在需要時才回退到 Vite+ 管理的執行時。如果以後想切換回來，只要執行：
vp env on您也可以使用以下命令將目前目錄中的 Node.js 版本鎖定到特定版本：
vp env pin或安裝一個全新的版本。
vp env install我非常喜歡這種靈活的套件管理器。我個人用的是nvm ，但我很喜歡 Vite+ 能處理這些事情的想法。這樣就少了一件需要操心的事。
雖然我還沒試過，但我很想看看它在持續整合（CI）環境中的表現如何。看起來你可以在 GitHub Actions 中輕鬆設定好，並執行所有需要的檢查。
- uses: voidzero-dev/setup-vp@v1
with:
node-version: '22'
cache: true
- run: vp install
- run: vp check
- run: vp test
- run: vp build結論
我確實覺得 Vite+ 能幫我節省很多建立新應用的時間。所有配置都放在一個設定檔裡，不用再費心考慮安裝哪個程式碼檢查器、格式化工具或測試執行器，這真是個不錯的改變。 vp 指令vp易懂，整個系統運作起來也很順暢。
話雖如此，這個專案目前仍處於 alpha 測試階段，我們拭目以待它的市場反應。鑑於前端生態系中已有如此多的開發者在使用 Vite，Vite+ 這類工具的出現也就順理成章了。如果您有意使用類似的工具，請告訴我。我覺得它非常有趣。謝謝！
原文出處：https://dev.to/erikch/i-tried-vite-and-replaced-my-entire-frontend-toolchain-4cgb
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
