前端代码风格自动化系列（四）之Prettier

发表于

Prettier是一个支持多语言的代码格式工具，如常用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，非常全面，将代码解析为AST，然后重新组装，目的是最终输出风格统一的代码，对比eslint对error的fix要强一些，如最大长度的改动，eslint只是对有问题的地方进行格式化修改，不改动源代码风格，而prettier是对全量的代码进行格式化。

安装

1
npm install --save-dev prettier

配置

1
2
3
4
5
6
7
8
9
10
11
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

这里我们结合之前用到的husky、lint-staged，默认prettier是直接标准输出到终端的，--write，这个配置代表直接改写文件。

这里有个官网的例子

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

格式化之后

1
2
3
4
5
6
foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

prettier让我们专注于业务逻辑，无需再纠结代码风格，配合其它工具，实现了代码提交到仓库前，统一格式化。