prettier 代码格式化

在团队项目开发中,由于个人水平和编码习惯参差不齐,有些人不格式化代码就提交,有些人用VSCode格式化代码,有些人用其它开发工具格式化代码,不同的人反复格式化代码对Git的diff可读性有巨大的影响,因此比较现代的代码工程通常都会要求维护使用一种通用的格式化配置。
NodeJS工程(包括前端工程)中目前主要使用的代码格式化工具是Prettier。
官方文档:https://prettier.io/
使用Prettier插件
Prettier最简单的使用方法是直接安装对应的代码编辑器插件。在VSCode中,我们可以安装Prettier - Code formatter这个插件。Prettier可以进行一些自定义的格式化配置,但即使不配置它默认也能良好的工作。

安装完成后,按下格式化代码快捷键时,VSCode就会提示我们是否使用Prettier的格式化器,我们选用即可。

此外我们还可以在设置中勾选Format on Paste和Format on Save,这样粘贴代码和保存时能够自动进行格式化,也非常实用。
在工程中安装使用Prettier
虽然VSCode中通过插件使用Prettier非常简单,但团队开发中还是有些人不用VSCode,他们一定要用一些非主流的代码编辑器并拒绝(或不会)安装插件,这时我们只能在工程中安装Prettier包,并将格式化操作Hook到Git提交操作上,以此保证代码质量。多人开发中,搭建工程时推荐这种方式,工程内安装Prettier后VSCode会以工程内的Prettier为更高的优先级执行。
先安装Prettier。
npm install prettier -D
然后使用mrm安装配置lint-staged。
npx mrm@2 lint-staged
执行完成后,package.json中会添加husky和lint-staged这两个包,husky是一个工程的Git Hook维护工具,lint-staged能够将JavaScript代码格式化的操作Hook到提交前(即commit时自动提交格式化后的代码),package.json中还添加了lint-staged的相关配置。
{
// ... 其他配置
"lint-staged": {
"*.{js,css,md}": "prettier --write"
}
}
此外我们的工程中还会添加一个.husky目录,其中是Git的Hook脚本,注意该目录需要提交到版本控制系统。此时我们在commit时代码就会自动格式化了,我们可以把代码弄乱来试验一下。
补充说明:另外要说明的是mrm一个傻瓜式的配置工具,我们也可以不用它,但这样就需要分别手动配置husky和lint-staged,会略微麻烦一些。实际上mrm做了这样的一些配置操作:
- 安装
husky和lint-staged包 - 在
package.json中添加lint-staged的配置项 - 执行
husky install命令,在工程中启用husky - 执行
npx husky add .husky/pre-commit "npx lint-staged",它表示在husky中配置一条pre-commit规则,执行lint-staged命令
Prettier配置
Prettier提供了一些能够让我们自定义格式化的配置,但不多,从工程角度来看这是一件好事,可以省去纠结该用哪种代码风格的烦恼。要配置Prettier,我们可以在工程根目录创建.prettierrc,它是一个JSON文件。工程内安装的Prettier和VSCode的Prettier插件都支持该配置文件。
下面例子中我们将Print Width修改为200,表示格式化器在代码一行超过200个字符时再考虑自动换行,该配置的默认值是80。
{
"printWidth": 200
}
具体的其它配置项我们参考官方文档即可。