前言
不知道你有没有遇到过这种情况，就是在你查看团队中别的小伙伴的前端代码时各种难受，因为习惯和编辑器不一样，写出的代码风格也是不一样的。那为了方便阅读统一格式化团队的代码时个不错的选择。
安装依赖
我们最终希望的是在git提交前进行风格检查并格式化通过了才提交，不然就报错。代码风格方面选择的是比较流行的prettier，它会武断地根据配置文件格式化代码，至于具体的配置规则，团队小伙伴之间协商定就好了。而husky相当于给我们提供了git提交过程中的一些列钩子函数，在这里我们就要用到pre-commit钩子，我们先安装依赖：
yarn add husky prettier -D
配置prettier格式化规则
我们可以使用.prettierrc文件也可以在package.json文件中添加配置，但这里推荐使用.prettierrc文件：
{
"arrowParens": "always", //剪头函数参数是否使用（）
"bracketSpacing": false, // {foo: xx}还是{ foo: xx }
"jsxSingleQuote": true, // jsx是否使用单引号
"jsxBracketSameLine": false,
"semi": true, // 是否每句后都加分号
"singleQuote": true, // 是否使用单引号
"tabWidth": 2, // tab占用的字符数
"trailingComma": "es5"
}
配置husky钩子
这边用的单独的配置文件.huskyrc，直接上配置代码
{
"hooks": {
"pre-commit": "lint-staged" // pre-commit，提交前的钩子
}
}
这里的lint-staged也是需要单独安装的，这里面才是提交前具体做的事情，先安装依赖
yarn add lint-staged -D
配置文件.lintstagedrc如下：
{
"src/**/*.js?(x)": [
"prettier --write",
"eslint --fix",
"git add"
],
"src/**/*.{css,less,scss}": [
"stylelint --fix",
"git add"
]
}
大概就是符合要求的文件先用prettier格式化，然后再用eslint修复，如果安装了eslint的话，最后才是提交git；
后记
当然如果想在本地就格式化代码的话也可以找到自己所用的编辑器中相应的prettier插件，这里就不展开了。而且我们可以在package.json的script对象里添加一组命令，达到格式化代码的目的：
"eslint": "prettier --check --write src/**/*.js?(x)"
