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

他的整個圈子很強大，有基於各種編輯器的外掛（vs code，atom），有指令碼類的，有外掛類的（eslint的外掛eslint-plugin-prettier）。

更多有關prettier的資訊，請點選 這裡

Prettier具有以下幾個有優點：

1. 可配置化
2. 支援多種語言
3. 整合多數的編輯器
4. 簡潔的配置項

官方給的例子

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

格式化前

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

格式化後

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

幾種使用方式

一、編輯器外掛類

在這裡以vs code為例，也是最簡單的使用方式，我在這裡強烈推薦，我自己也是這麼用的。

這種方式的優點就是開發時隨意寫，寫完後一鍵格式化。按下快捷鍵，Prettier就會幫我們重寫想要格式化的檔案，不需要像eslint那樣報錯後我們需要一行一行去修改。

安裝vs code的外掛Prettier - Code formatter，這裡不再贅述如何安裝vs code的外掛。

使用方法：

格式化某個檔案時，在開啟檔案的當前頁按shift + alt + f

格式話某段程式碼時，先選中這段程式碼，在按 shift + alt + f

二、指令碼類

安裝

使用yarn

yarn add prettier --dev --exact
// and globally
yarn global add prettier

使用npm

npm install --save-dev --save-exact prettier
// and globally
npm install --g prettier
 

這裡需要全域性安裝一下prettier，不然prettier命令會無效。

//測試是否安裝成功
prettier -v
// 會打印出版本號

使用

1.使用prettier預設配置規則格式化檔案方式

prettier --write <檔案路勁+檔名>

//例如，格式化當前路勁下的aaa.js檔案
prettier --write  ./aaa.js

2.自定義配置檔案使用方式

自定義檔案的格式可以有多種

• .prettierrc 檔案，支援yaml和json格式；或者加上副檔名也可以，可選的副檔名有 .yaml/.yml/.json
• .prettierrc.toml 檔案
• prettier.config.js or .prettierrc.js 返回一個物件
• 或者在package.json檔案中加上prettier物件

關於這部分的官方文件

以上這幾個檔名是prettier預設會去查詢的檔案，執行方式為

//預設配置檔案都是在根目錄下，只要使用了以上幾種命名都可使用下面的命令
prettier --config --write <檔案路勁+檔名>
// 例如
prettier --config --write ./aaa.js

//如果配置檔案沒在根目錄下，則需要加上配置檔案的路勁
prettier --config <配置檔案路徑+檔名> --write <檔案路勁+檔名>

//其實他的規則很符合一般指令碼規則，比如webpack，eslint，babel等

json 配置檔案寫法

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

toml 檔案寫法

#  .prettierrc.toml
semi = false
singleQuote = true

yaml檔案寫法

# .prettierrc
semi: false
singleQuote: true

js寫法

// prettier.config.js or .prettierrc.js 返回物件
module.exports = {
  semi: false,
  singleQuote: true
};

外掛類

這裡以eslint為例

當做eslint的外掛來使用

//安裝
yarn add --dev prettier eslint-plugin-prettier

在eslint的配置檔案中新增配置

在.eslintrc 或者 .eslintrc.json 或者 .eslintrc.js檔案中

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

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[email protected]