Prettier 是一個流行的代碼格式化工具，其主要作用是自動統(tǒng)一代碼風(fēng)格，減少團(tuán)隊協(xié)作中關(guān)於代碼樣式的爭論。它支持JavaScript、TypeScript、HTML、CSS、JSON 等多種語言，基本覆蓋前端和部分後端開發(fā)場景。 Prettier 會根據(jù)項目中的配置文件（如.prettierrc）對代碼進(jìn)行格式化，僅改變“外觀”，不修改功能。常見做法包括集成到編輯器中保存時自動格式化，或配合ESLint 在提交代碼前檢查並格式化。 Prettier 能解決的問題有：1. 統(tǒng)一代碼風(fēng)格；2. 節(jié)省討論時間；3. 提升可讀性；4. 減少代碼審查負(fù)擔(dān)。開始使用Prettier 的步驟如下：1. 安裝Prettier（npm 或yarn）；2. 創(chuàng)建配置文件（如.prettierrc）；3. 運行格式化命令（也可設(shè)置保存自動格式化）；4. 可選集成Git Hook 自動格式化改動部分。常見問題包括：1. 與ESLint 衝突可通過eslint-config-prettier 和eslint-plugin-prettier 解決；2. 不想格式化的文件可通過.prettierignore 排除；3. 格式化效果不滿意可通過調(diào)整配置或參考社區(qū)模板優(yōu)化?？傊?，Prettier 不僅讓代碼整潔，還提升了編碼效率和協(xié)作體驗。

Prettier 是一個流行的代碼格式化工具，它的主要作用是自動統(tǒng)一代碼風(fēng)格，減少團(tuán)隊協(xié)作中關(guān)於代碼樣式的爭論。它支持多種語言，比如JavaScript、TypeScript、HTML、CSS、JSON 等，基本能覆蓋前端開發(fā)和部分後端開發(fā)的常見場景。

它是怎麼工作的？

簡單來說，Prettier 會根據(jù)你項目中的配置文件（比如.prettierrc ）裡的規(guī)則，對代碼進(jìn)行格式化。它不會改代碼的功能，只改變代碼的“外觀”。比如函數(shù)括號要不要換行、字符串用單引號還是雙引號、末尾要不要加分號等。

常見的做法是把它集成到編輯器裡（如VS Code），保存文件時自動格式化。也可以配合ESLint 一起使用，在提交代碼前做一次檢查和格式化。

Prettier 能解決什麼問題？

很多人剛開始寫代碼的時候不太注意格式，或者團(tuán)隊成員各自有不同的編碼習(xí)慣。結(jié)果就是同一個項目裡，代碼風(fēng)格五花八門，看代碼像看拼貼畫。

Prettier 的出現(xiàn)主要是為了解決這些問題：

• 統(tǒng)一代碼風(fēng)格：讓所有人的代碼看起來像是一個人寫的。
• 節(jié)省討論時間：不用再爭論“空格還是Tab”、“要不要加分號”這些細(xì)節(jié)。
• 提升可讀性：整潔一致的代碼更容易閱讀和維護(hù)。
• 減少代碼審查負(fù)擔(dān)：Code Review 時可以更關(guān)注邏輯而不是格式。

這也是為什麼現(xiàn)在很多開源項目和公司都默認(rèn)集成了Prettier。

怎麼開始使用Prettier？

如果你是新手，或者想在現(xiàn)有項目裡加上Prettier，其實步驟並不復(fù)雜：

1. 安裝Prettier

   • 可以通過npm 或yarn 安裝：

      npm install --save-dev prettier
     # 或者yarn add --dev prettier

2. 創(chuàng)建配置文件

   • 在項目根目錄加一個.prettierrc文件，比如這樣設(shè)置：

      {
       "semi": false,
       "singleQuote": true,
       "trailingComma": "es5"
     }

   • 這些選項分別控制是否加結(jié)尾分號、是否用單引號、對象最後一個屬性是否加逗號等。

3. 運行Prettier

   • 可以手動運行命令格式化：

      npx prettier --write .

   • 也可以設(shè)置成保存時自動格式化（VS Code 插件就可以這麼設(shè)）。

4. 集成Git Hook（可選）

   • 用Husky 和lint-staged 可以做到在提交代碼前自動格式化改動的部分，避免有人忘記格式化就提交了。

常見問題和注意事項

有些同學(xué)剛用Prettier 會遇到幾個小坑：

• 和ESLint 衝突怎麼辦？
  可以安裝eslint-config-prettier來關(guān)閉ESLint 中與Prettier 衝突的規(guī)則，再配合eslint-plugin-prettier把Prettier 當(dāng)作ESLint 的規(guī)則來運行。

• 某些文件不想格式化怎麼辦？
  可以加個.prettierignore文件，裡面寫上不需要處理的目錄或文件名，比如：

   dist/
  build/
  *.min.js

• 格式化效果不滿意怎麼辦？
  多數(shù)時候是因為配置沒調(diào)好。 Prettier 的配置項雖然不多，但影響範(fàn)圍廣。建議參考官方文檔，或者找一些社區(qū)推薦的配置模板作為起點。

基本上就這些。 Prettier 看起來只是一個格式化工具，但它帶來的好處遠(yuǎn)不止排版整齊那麼簡單。很多開發(fā)者用了之後都會覺得“早該用了”，因為它確實能讓日常編碼變得更省心、更高效。

以上是什麼更漂亮的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！