使用Prettier来自动格式化项目的提交代码

什么是Prettier?

Prettier 是一个支持多种文件格式(包括javascript、css、less、sass、typescript、markdown等)的样式格式化工具。它会删除代码里的原始样式,并确保输出的代码风格一致。

简单来说,个人觉得prettier具有以下几个优点:

  • 没有繁复的风格可配置项,它拥有一个近乎最佳实践总结出来的代码风格输出,符合绝大多数人的习惯(有点类似Standard的理念,但是又不那么极端,还是有少量的配置项,比如缩进空格数、tab或者空格缩进等)。
  • 支持javascript泛语法,包括ES5与ES next,Flow、jsx等,不会影响js的AST。
  • 支持制定行长,并针对所设置的行长对代码做样式优化。
  • 支持众多编辑器,可轻松配置利用git hooks,支持git代码提交自动格式化(下面有讲到)。

有一点需要注意,Prettier仅仅是对代码风格进行处理,并不会做Uglifyjs或者tree-shaking等代码优化(例如摒弃un-used代码)

使用

为什么要使用Prettier等工具?在多人项目中,大家每个人都有自己的代码习惯:运算符前后空格、大括号位置、行尾分号、缩进规则、代码块间空行等。。。风格的不一致,会导致一个项目中不同人接收过的模块有不同的代码格式,导致阅读、维护的困难。

之前我们使用lint类工具对代码风格做强定义,这样子会极大减少大家输出不一致的风格代码。但是这种强制大家一致书写习惯的方式,也会导致长期习惯了另外一种代码风格的人,开发效率的降低。他会把很多注意力,放在解决lint工具的警告、敲击空格键上。

Prettier就是这样一个可以觉得以上所有问题的优秀工具。

如何安装以及命令行调用参数配置等官网上已经有很详细的文档说明。一般情况下我们肯定不会手动去通过CLI来调用Prettier,那样子太低效率了。

比较适合的方式是,给你喜欢的编辑器安装一个prettier插件。幸运的事,prettier已经支持了市面上绝大多数常见的编辑器,例如Atom、VS Code、WebStorm、Vim、Emacs等,官网也提供了一个详细的页面,针对每个编辑器如何安装插件做了说明。

我个人经常使用Vim,并且使用ALE这个优秀的代码异步检查插件。幸运的是,Prettier可以和ale的Fixer特性结合起来用。我的vimrc部分配置如下:

let g:ale_javascript_prettier_options = '--config ~/.prettierrc'
let g:ale_fixers = {
\   'javascript': 'prettier',
\   'css': 'prettier',
\   'scss': 'prettier',
\   'sass': 'prettier',
\   'less': 'prettier',
\   'markdown': 'prettier',
\   'typescript': 'prettier',
\   'json': 'prettier',
\}

我制定了prettier所支持的所有格式文件都使用prettier来作为fixer。同时,我在系统用户根目录下放置了Prettier的全局配置文件(prettier也可以优先使用项目本地的配置)。我的Prettier全局配置文件内容如下:

{
  "printWidth": 120,
  "tabWidth": 4,
  "parser": "babylon",
  "trailingComma": "none",
  "jsxBracketSameLine": true,
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": ["*.json", ".eslintrc", ".tslintrc", ".prettierrc", ".tern-project"],
      "options": {
        "parser": "json",
        "tabWidth": 2
      }
    },
    {
      "files": "*.{css,sass,scss,less}",
      "options": {
        "parser": "postcss",
        "tabWidth": 4
      }
    },
    {
      "files": "*.ts",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

git提交自动格式化:pre-commit Hook

Prettier还可以很好的集成的到项目中,利用git的hooks机制,在提交commit时自动调用Pretter。这样子可以避免无法安装编辑器插件、安装了但是未提交代码前利用其格式化代码等各种情况的发生。

具体操作时,还需要 Huksy、lint-staged这两个工具。

  • Husky:可以方便的让你通过npm scripts来调用各种git hooks。
  • lint-staged:利用git的staged特性,可以提取出本次提交的变动文件,让prettier只处理这些文件。

第一步,配置npm scripts任务:

在项目的package.json中,配置pre-commit的hook任务:

{
  "scripts": {
    "precommit": "lint-staged"
  }
}

注:precommit这个值不能改变,这是husky默认的对应的pre-commit-hook的任务名。

第二部,配置lint-staged

在配置文件中插入以下字端,用来告诉lint-staged要处理的文件类型,以及调用的命令。

{
  "lint-staged": {
    "*.{js,json,css}": ["prettier --write", "git add"]
  }
}

至此,你的项目就可以支持自动Prettier了。即使团队中有人没有安装prettier,也可以确保他的代码在提交到项目仓库中时,总是被Prettier了之后。

还没人评论,快抢沙发啦!

发表评论 取消回复