Prettier

Prettier的中文意思是“漂亮的、機靈的”，也是一個流行的程式碼格式化工具的名稱，它能夠解析程式碼，使用你自己設定的規則來重新打印出格式規範的程式碼。

Prettier具有以下幾個有優點：
1. 可配置化
2. 支援多種語言
3. 整合多數的編輯器
4. 簡潔的配置項

使用Prettier在code review時不需要再討論程式碼樣式，節省了時間與精力。下面使用官方的例子來簡單的瞭解下它的工作方式。

Input

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis()
 
, isThereSeriouslyAnotherOne());

Output

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

安裝

使用yarn

yarn add prettier --dev --exact
# or globally
yarn global add prettier

使用npm

npm install --save-dev --save-exact prettier
# or globally
 

npm install --global prettier

和ESLint一起使用

很多專案都會使用ESLint來提高程式碼的質量，有兩種方式能夠整合Prettier和ESLint，你也可以單獨或同時使用它們。

使用ESLint執行Prettier

如果你已經在你的專案中使用ESLint並且想要只通過單獨一條命令來執行你的所有的程式碼檢查的話，你可以使用ESLint來為你執行Prettier。

yarn add --dev prettier eslint-plugin-prettier

.eslintrc.json

{
  "plugins": ["prettier"
 
],
  "rules": {
    "prettier/prettier": "error"
  }
}

關閉ESLint的格式規則

你是否通過ESLint來執行Prettier，又或者是單獨執行兩個工具，那你大概只想要每個格式問題只出現一次，而且你特別不想要ESLint僅僅是和Prettier有簡單的不同和偏好而報出“問題”。

所以你大概想要禁用衝突的規則（當保留其他Prettier不關心的規則時）最簡單的方式是使用eslint-config-prettier。它可以新增到任何ESLint配置上面。

yarn add --dev eslint-config-prettier

.eslintrc.json

{
  "extends": ["prettier"]
}

還有更多的細節可以通過文件來檢視。