image.png

Prettier 是什么？

• 編輯器保存代碼時(shí)自動(dòng)格式化

• 支持多種編程語(yǔ)言

• 可與大多數(shù)編輯器集成

• 一個(gè)node項(xiàng)目

• 支持工程化配置

國(guó)內(nèi)官網(wǎng)

默認(rèn)上支持 JavaScript、TypeScript、CSS、SCSS、HTML、Vue、React、JSON、Markdown 這幾種語(yǔ)言，

其它語(yǔ)言例如php、go、rust、python也支持，但是需要額外安裝社區(qū)插件

例如go、rust本身官網(wǎng)有自己的語(yǔ)言格式服務(wù)器，這里就不建議使用了，php沒(méi)有官網(wǎng)的格式服務(wù)器，推薦使用

常見(jiàn)的使用場(chǎng)景

工程命令行

以npm項(xiàng)目為例，執(zhí)行 npm install --save-dev prettier 安裝prettier

在項(xiàng)目根目錄下運(yùn)行 npx prettier --write .

命令解析：

• npx：調(diào)用本地 node_modules 中的 Prettier。

• -write：關(guān)鍵參數(shù)！ 表示直接覆蓋原文件（即“原地修改”）。

• .：表示當(dāng)前目錄及其所有子目錄。

  ? 執(zhí)行后，Prettier 會(huì)自動(dòng)遍歷所有它支持的文件類(lèi)型（如 .js, .ts, .vue, .css, .json 等），并按規(guī)則格式化。

在項(xiàng)目根目錄下，支持配置文件具體配置其格式化要求，這里不在多說(shuō)

git工程集成

現(xiàn)在要實(shí)現(xiàn)一個(gè)這樣的功能：每次 git commit 時(shí)，只會(huì)格式化本次提交的文件！

需要用到下面兩個(gè)工具 Husky、lint-staged

Husky：Git 鉤子管理器

Git 本身提供了很多鉤子（hooks），比如 pre-commit（提交代碼前觸發(fā)）、commit-msg（校驗(yàn)提交信息前觸發(fā)）、pre-push（推送代碼前觸發(fā)）等。這些鉤子默認(rèn)是 shell 腳本，編寫(xiě)和維護(hù)成本高。

Husky 把 Git 鉤子封裝成了更易用的 JavaScript 接口，讓你能通過(guò)簡(jiǎn)單的配置，在 Git 執(zhí)行特定操作（如提交、推送）時(shí)，自動(dòng)運(yùn)行指定的腳本（比如代碼檢查、格式化）。

lint-staged：只校驗(yàn)暫存區(qū)的文件

只對(duì) Git 暫存區(qū)（即將提交）的文件執(zhí)行指定命令，不會(huì)影響未修改的文件，既高效又精準(zhǔn)

安裝

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

項(xiàng)目配置

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx,vue,css,scss,json,md}": "prettier --write"
  }
}

編輯器集成

以vscode系列編輯器為例

1. 安裝插件 Prettier - Code formatter 安裝插件的同時(shí)已自動(dòng)安裝了Prettier 項(xiàng)目

2. 打開(kāi)語(yǔ)言基礎(chǔ)配置

這個(gè)是js和markdown的格式配置，保存代碼時(shí)編輯器就會(huì)自動(dòng)格式化

其重點(diǎn)是 "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" 這兩個(gè)配置塊

"[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
},

安裝非官方默認(rèn)的其它語(yǔ)言，例如rust/php/java 要單獨(dú)下載其配套插件，例如 npm install -g prettier @prettier/plugin-php 然后在vscode中配置，自行搜索吧，配置項(xiàng)要多幾個(gè)