使用Prettier完成代码提交的自动格式化

3,125 阅读4分钟

最终效果

  1. 执行git commit
  2. 代码自动完成我们定制规则的格式化功能,并提交到本地

使用的npm包

prettier:功能依赖包

husky:提供gitHook相关功能

lint-staged:让命令只对发生更改的文件生效

为什么做(WhyHow)

​ 在未建立规范之前,每个人的代码风格都是不一致的,并且开发过程中可能会出现忘记格式化,手误的问题,如果在提交之前,可以自动抹平差异统一多人开发风格,这时候作用就体现出来了

​ 代码风格是每一个程序员都要面对的问题,不论是在个人开发还是在团队协作中,都明白较好的代码风格是保证日后可维护性的关键,所以连不懂的开发或许都知道,要注意代码风格

怎么做(How)

​ 到了正在的推进时期,就会面对很多难题,无法确定一个所有人都满意的方案,而就算是少数服从多数,在实际开发中落实也会遇到一大堆问题,例如,编辑器的不同,格式化工具不同,或者说完全没这个习惯,好不容易决定推进了,每次代码审核都需要修改这种细节问题,一来二去就搁置了,实在是头疼,到底该如何将事情完美的落实下去呢?

​ 这里我们就需要一个权威的规范来帮助我们约束成为一个风格,Prettier表示我先给一个规范,大家先用起来,保证代码的可读性与可维护性,然后大家都遵循这和规则。

​ 而prettier本身是一个An opinionated code formatter 的格式化工具,我是一个规矩非常严格的框架,并不会给你很多的配置项,喜欢用就用,不喜欢就不用,绝大部分的编辑器集成了prettier,在编辑器的约束下,大家都遵循这个方案就好了

具体配置(What)

Vscode下载插件 prettier

项目按下依赖prettier,按文档完成步骤

prettier官网

配置commit钩子

​ 安装好之后,会在项目下生成文件.husky,并修改你的package.json,到目前为止,其实已经配置好了,他会在你每次commit之前执行npx lint-staged,这个命令会执行prettier --write,并且只对本次修改的文件生效

具体命令(躲懒不看文档的看这里~)

当前的prettier版本是2.4.1,如果版本号不一致,建议还是看官网

  1. vscode安装prettier
  2. 项目安装prettier
npm install --save-dev --save-exact prettier
  1. 创建配置文件
echo {}> .prettierrc.json
  1. 创建说明不需要格式化的文件
    1. 创建文件.prettierignore
    2. 写入内容
# Ignore artifacts:
build
coverage
  1. 执行命令npx prettier --write .,格式化现有代码,测试功能是否正常

  2. 编写配置文件

// json文件改为js文件(看个人习惯)写入内容
module.exports = {
  singleQuote: true, // 单引号
  trailingComma: 'es5', // 对象属性最后有 ","
  semi: false, // 是否需要分号
  printWidth: 110, // 一行最多120
  jsxSingleQuote: true, // jsx使用单引号
  tabWidth: 2, // 一个tab代表几个空格数,默认就是2
  useTabs: false, // 不使用缩进符,而使用空格
  jsxBracketSameLine: true,
}
  1. 再次执行npx prettier --write .,对格式化规则有建议参考文档对配置进行修改,知道自己满意
  2. 配置gitHook钩子(必须先加入git仓库,不然会无效果)
npx mrm@2 lint-staged
  1. 将代码格式改乱,尝试commit一下,查看功能是否正常(提交之前会被自动格式化)

一些注意事项

win电脑.prettierrc.json写入失败

这个问题在同事电脑上发现的,使用vscode中powershell执行echo {}> .prettierrc.json,会无写入内容,后面执行的命令也会失败,这里请使用电脑的cmd打开目标文件夹,执行该命令,这样测试是可行的

配置gitHook之后 commit不会自动格式化vue文件

这里需要修改在package.json中默认写入的lint-staged中的命令

这里根据项目中是否存在eslint,会写入不太一致,但是问题不打

"lint-staged": {
  "*.js": "eslint --cache --fix"
}

统一改成

"lint-staged": {
  "*.{js,css,md,vue}": "prettier --write"
}

这样每次commit的时候就会自动格式化代码了

结语

​ 如果查看本文遇到了一些问题,请到QQ群 530496237,一起吹吹水~