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

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

它是怎么工作的？

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

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

Prettier 能解決什么問題？

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

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

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

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

怎么開始使用 Prettier？

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

1. 安裝 Prettier

   • 可以通過 npm 或 yarn 安裝：

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

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

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

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

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

3. 運行 Prettier

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

     npx prettier --write .

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

4. 集成 Git Hook（可選）

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

常見問題和注意事項

有些同學剛用 Prettier 會遇到幾個小坑：

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

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

  dist/
  build/
  *.min.js

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

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

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