前端代碼風格自動化系列（四）之Prettier

Prettier是一個支持多語言的代碼格式工具，如經常使用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，很是全面，將代碼解析爲AST，而後從新組裝，目的是最終輸出風格統一的代碼，對比eslint對error的fix要強一些，如最大長度的改動，eslint只是對有問題的地方進行格式化修改，不改動源代碼風格，而prettier是對全量的代碼進行格式化。

安裝

npm install --save-dev prettier

配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

這裏咱們結合以前用到的husky、lint-staged，默認prettier是直接標準輸出到終端的，--write，這個配置表明直接改寫文件。

這裏有個官網的例子

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

格式化以後

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

prettier讓咱們專一於業務邏輯，無需再糾結代碼風格，配合其它工具，實現了代碼提交到倉庫前，統一格式化。