2022年前端快速開發工具 - Christoph

Vite
Vite是我用過的最好、最快的開發伺服器。起初我是持懷疑態度的，但現在我不喜歡在任何沒有使用Vite的前端專案上工作。透過引擎蓋下的esbuild，它構建整個專案的速度比其他人熱過載一個變化的速度要快。雖然其他捆綁器可以做到快速，但Vite做到了開箱即用，幾乎不需要配置。

如果你還沒有使用它，在一個小專案上試試，不要回頭看。

Tailwind
Tailwind是另一個我最初持懷疑態度的專案。經過一年的使用，Tailwind的權衡對我來說是合理的。它將造型抽象為一個CSS變數系統，而不是直接分配CSS屬性，這種方式是天才的。如果你想要合理的預設樣式、智慧的樣式組合，以及整個專案的一致性，我推薦你使用它。它處理黑暗模式樣式的方式也很好。

我們考慮了其他的選擇。

• Emotion。如果上述標準對你不適用，比如你的公司有一個明確的設計系統，或者你有高度具體的造型需求，那麼就使用情感。
• 許多其他的CSS-in-JS庫。目前，Emotion是我最喜歡的一個。

pnpm
pnpm是贏得我心的JavaScript軟體包管理器。它是一個快樂的工具，基本上任何與包管理或monorepos有關的東西都可以使用，它的速度很快，並且在你遇到第三方包的問題時提供了逃生通道。然而，雖然我更新了許多專案使用pnpm，並向大家推薦它，但這個模板對你所使用的包管理器沒有意見。

注意：我發現，對於長期執行的專案來說，經常更新你的依賴關係是最理想的。取決於有多少自動化測試，以及專案處於哪個開發階段，我甚至可能每天更新依賴關係。這使我能夠將第三方更新中的問題隔離在較小的變化範圍內，並確保我不會落後太多，使更新成為一件麻煩事。

ESLint和Prettier
ESLint和Prettier被廣泛採用，你可能已經在使用它們。它們都是圍繞著程式碼風格而服務的，表面上看，在ESLint中執行Prettier似乎是個好主意。然而，在分析ESLint在一些專案上執行緩慢的原因時，我注意到Prettier一直在佔用ESLint總執行時間的50%左右。如果你在儲存時格式化你的文件，那麼在ESLint中同時執行Prettier是沒有意義的。

對於CI或本地測試執行，我現在把prettier --cache --check .和eslint --cache .作為單獨的命令並行執行。這兩個專案現在都支援--快取標誌，以減少它們在本地開發時的工作量。你應該使用這些標誌!

儘管有Prettier的存在，關於程式碼風格的爭論仍然存在，比如如何對ES模組匯入進行排序。手動對ES模組進行排序是很浪費時間的，而且通常會導致你在寫程式碼時失去上下文，然後不得不瀏覽檔案的頂部來修改你的匯入語句。我喜歡使用@trivago/prettier-plugin-sort-imports外掛，它可以自動對新的匯入進行排序，並與TypeScript的自動匯入功能完美配合。同樣地，prettier-plugin-tailwindcss也會自動對你程式碼中的Tailwind類進行排序。

最後，我的預設ESLint配置和Prettier配置是為一致性而設計的。我對一些諸如ES模組匯入的具體順序沒有意見，但我確實關心在一個專案中擁有一個一致的順序。

npm-run-all
我喜歡在本地開發時執行所有的測試和檢查。npm-run-all1將你的指令碼並行化，如果有一個檢查失敗就立即失敗，確保不會拖累你。

"scripts": {
  "build": "vite build",
  "dev": "vite dev",
  "format": "prettier --write .",
  "lint:format": "prettier --cache --check .",
  "lint": "eslint --cache .",
  "test": "npm-run-all --parallel tsc:check lint lint:format",
  "tsc:check": "tsc"
}

Node.js中的ECMAScript模組
Node.js中的ES模組（ESM）在孤立的情況下是很好的，但生態系統的整合和遺留的第三方包使ESM很難使用。我花了太多的時間試圖弄清楚如何在不破壞一切的情況下用Node使用ESM，而不是用神秘的錯誤資訊。說真的，我至少嘗試了五次，但都沒有成功，而且還做了一些取捨，我不願意做。以下是我的要求。

• 使用本地ESM。
• 快速的JS編譯。
• 當檔案發生變化時，立即重新啟動指令碼。

VS程式碼擴充套件
這裡有四個擴充套件，讓我在流程狀態下停留的時間更長，尤其是All Autocomplete 和 Error Lens。

code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension usernamehw.errorlens