Prettier：讓代碼優雅起來的全能代碼格式化工具

一、Prettier介紹

Prettier是一個快速、強制一致的JavaScript/TypeScript代碼格式化工具，不僅僅支持JavaScript和TypeScript，還支持HTML、CSS、JSON、Markdown等多種語言。

相較於其他代碼格式化工具，Prettier有以下幾個特點：

1、支持自動適應ES6+語法，比如箭頭函數、模板字面量、可選鏈式調用等。

2、強制性格式化，相同的代碼在不同的開發者環境下，格式都是一致的，避免了團隊代碼風格不統一的問題。

3、Prettier對於代碼格式的優化和排版，比其他類似工具更優秀，讓代碼看起來更美觀、簡潔。

二、在項目中使用Prettier

1、全局安裝Prettier：

npm install prettier -g

2、在項目中安裝Prettier：

npm install prettier --dev --save-exact

安裝完成後，可以使用Prettier的命令行工具格式化代碼，如：

prettier --write src/**/*.js

其中–write的意思是將格式化結果覆蓋到原文件中，src/**/*.js是格式化所有src目錄下的js文件。也可以使用–check命令檢查是否符合規範，如：

prettier --check src/**/*.js

3、在編輯器中使用Prettier：建議在編輯器中安裝Prettier插件，當保存文件時會自動格式化代碼。

在VS Code中安裝Prettier插件的方法：

1、按Ctrl+Shift+X打開擴展搜索框，搜索Prettier安裝即可。

2、在.vscode/settings.json文件中添加以下配置（可選）：

{
    "editor.formatOnSave": true, //每次保存代碼自動格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode" //指定Prettier為默認代碼格式化工具
}

三、Prettier的配置項

Prettier提供了很多配置項，可以根據自己的需要進行定製。例如：

1、tabWidth：指定縮進的空格數，默認為2。

{
    "tabWidth": 4
}

2、semi：控制是否在語句末尾加上分號，默認為true。

{
    "semi": false
}

3、singleQuote：控制是否使用單引號代替雙引號。

{
    "singleQuote": true
}

使用方法：在項目中新建一個.prettierrc.json文件，並添加需要的配置項。

四、與ESLint集成

ESLint是一個代碼檢查工具，常用於檢查代碼質量和風格問題。

將Prettier與ESLint結合使用可以實現代碼格式化與代碼質量檢查的結合。

步驟如下：

1、安裝ESLint的prettier插件：

npm install eslint-plugin-prettier --save-dev

2、在ESLint配置中添加prettier插件，並進行相關配置：

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended" //添加prettier插件
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error", //規則配置
    //...
  }
}

3、根據自己的需求添加其他需要的規則。

五、與Git結合使用

將Prettier與Git結合使用可以實現在代碼提交前自動格式化代碼，並確保代碼倉庫中所有的代碼都符合同一種風格。

方法如下：

1、使用.git/hooks/pre-commit文件，在代碼提交前自動執行Prettier檢測和格式化：

#!/bin/sh

echo -e "\\033[1;33mRunning Prettier...\\033[0m"
if ! git diff --diff-filter=d --cached --exit-code --quiet -- '*.js' '*.jsx' '*.ts' '*.tsx' '*.html' '*.css'; then
  echo -e "\\033[1;31mThis commit will not be executed because there are unformatted file(s)\\033[0m"
  exit 1
fi
prettier --list-different '**/*.+(js|jsx|json|less|css|ts|tsx|md|graphql|yml|yaml)'
if [ $? -ne 0 ]; then
  echo -e "\\033[1;31mThis commit will not be executed because there are unformatted file(s)\\033[0m"
  exit 1
fi
echo -e "\\033[1;32mPrettier has completed !\\033[0m"
exit 0

2、安裝Husky，並在.git/hooks/pre-commit文件中添加precommit命令：

npm install husky --save-dev
npx husky add .husky/pre-commit "bash .git/hooks/pre-commit"

3、在項目中添加Prettier配置文件，如上文所述。

六、小結

Prettier是一款優秀的代碼格式化工具，能夠讓我們在開發中省去代碼風格的細節問題。通過與編輯器、ESLint、Git等工具的結合，可以進一步提高代碼質量和開發效率。在團隊協作中，可以使用Prettier統一代碼風格，規避風格不一致的問題。