git提交代码自动格式化

使用到的模块

prettier 代码格式化模块
husky git的钩子，在git的hook中执行一些命令
lint-staged 对git暂存的文件进行lint检查
eslint 代码检测工具

1、prettier

新增配置文件.prettierrc，JSON格式不能注释，所以我使用js文件格式（prettier.config.js或.prettierrc.js）

module.exports = {
  printWidth: 200, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, //一个tab代表几个空格数，默认为80
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  semi: true, //行位是否使用分号，默认为true
  singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
  trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"
  bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  arrowParens: 'avoid', //只有一个参数的箭头函数的参数是否带圆括号（默认avoid不带）
  jsxBracketSameLine: false, //在JSX中使用单引号
};

遇到问题的配置项：parser: 'babylon'

prettier针对不同的语言，所使用的的parser有多个，编译js默认情况下为babylon。 babylon即babel6的编译工具，在babel7中已更名为@babel/parser。在提交自动格式化代码的时候报错Couldn't resolve parser "babylon"，可能是版本不一致，于是修改为'babel'，但是会报vue语法错误，但是把配置中的这项删除之后就可以正常格式化代码了。

webstorm是支持使用Prettier作为默认格式化程序的，如下图设置

2、husky

参考husky使用总结

安装

npm install husky --save-dev

package.json 添加脚本

"scripts": {
  "prepare": "husky install"
}

运行之后项目中会生成.husky文件夹

npm run prepare

添加hooks

npx husky add .husky/pre-commit "lint-staged"

此时.husky文件夹会新增一个名为pre-commit的shell脚本，内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

遇到问题： 在sourceTree中提交代码，会报错npx: command not found，这是由于sourcetree无法获取到我们的环境变量，所以在pre-commit中添加环境变量

PATH=$PATH:/usr/local/bin:/usr/local/sbin

3、lint-staged

在package.json中增加配置

"lint-staged": {
    "src/**": [
        "prettier --config .prettierrc --write",
        "eslint --fix",
        "git add"  //此项是为了提交被自动格式化修改后的文件
    ]
}

整个流程

git commit时会触发husky定义的pre-commit脚本
运行 lint-staged
根据配置项先自动化格式化代码，然后检测eslint，如果没问题才会触发commit提交

可见husky + lint-staged可以做很多自动化的事情，比如commitlint（提交文案规范检测），单元测试等等等