還在手動調整代碼格式？還在為團隊代碼風格不統一而頭疼？

相信很多朋友都遇到過這樣的痛苦場景：

• 寫完代碼一團糟，看著就難受
• 團隊成員代碼風格千差萬別，維護起來要命
• 每次提交代碼前都要手動整理格式，費時費力

上一篇《10分鐘搞定Vue3項目》已經搭建好了項目基礎架構，腳手架已經幫我們集成了三大神器：

• Prettier：代碼自動美化，告別手動格式化
• ESLint：代碼規范檢查，統一團隊風格
• TypeScript：類型檢查，減少低級錯誤

但是光有工具還不夠，還得讓你的開發工具"認識"這些神器才行！今天就用WebStorm來演示，教你如何讓開發工具自動幫你干活。

讓WebStorm認識Prettier

打開 Settings，搜索 Prettier，找到 Prettier 選項。

配置 Prettier package 為項目當中的 Prettier 包路徑，點擊右側的 ... 選擇項目當中的 node_modules/prettier 路徑。

這里我還勾選了一個 Run on 'Reformat Code' action，意思是當我在 WebStorm 當中使用 Reformat Code 功能時，也會觸發 Prettier 代碼美化。

測試Prettier是否生效

好了這樣 Prettier 就配置好了，接下來測試一下，隨便找一個 Vue 文件，右鍵選擇 Reformat with Prettier。

可以看到代碼被 Prettier 美化了。

只要在執行 Prettier 代碼美化的時候不報錯，表示配置工程化成功。

如果發現格式化效果不好，也沒有關系，之后可以使用另外一種格式化方式。

ESLint配置（可選）

為了開發效率更高，可以關閉 ESLint 的校驗導致的編譯錯誤，同樣可以在開發工具中禁用 ESLint。

打開 Settings，搜索 ESLint，找到 ESLint 選項，選擇 Disable ESLint。

如果要開啟 ESLint 校驗，選擇 Automatic ESLint configuration，意思就是自動配置 ESLint。

還有就是修改 eslint.config.js、.prettierrc.json、tsconfig.json 文件可以改變 ESLint、Prettier、TypeScript 的校驗規則。

如果不使用腳手架，就需要自己整合這些工具：

• 代碼規劃(eslint)：https://eslint.org/docs/latest/use/getting-started
• 代碼美化(prettier)：https://prettier.io/docs/install.html
• 直接整合：https://github.com/prettier/eslint-plugin-prettier#recommended-configuration（包括了 https://github.com/prettier/eslint-config-prettier#installation）

對于前端新手來說, 直接使用腳手架即可，省時省力。不需要再深入了解這些工具的配置細節。

純當工具使用即可，應該把更多的精力放在業務代碼的開發上。