[web] 利用git hooks维护代码规范
最近接触到prettier，了解过后觉得适用性和功能性都比原本eslint、stylelint的方案更为合适，所以决定改为采用prettier作为hooks脚本的核心。
js
可参考的js代码规范
使用eslint检查js代码
根据制定的规范，利用eslint维护相应的代码规范。
实现流程：
1.安装
npm i eslint -g
npm i eslint -D
//eslint-plugin-react -D//如果要支持react检查需要安装这个
2.配置
eslint --init会生成一个.eslintrc文件，里面写的是验证规则。
规则的错误级别：
"off"或0- 关闭规则
"warn"或1- 将规则作为警告（不影响退出代码）
"error"或2- 将规则转为错误（触发时退出代码为1）
3.执行
执行该命令会在命令行显示不符合规则的代码。
eslint filename.js
执行该命令会将报告生成 eslint_report.html文件。
eslint -f html filename.js > eslint_report.html
执行该命令可以在检查过程中自动修复一些规则
eslint filename.js --fix
css
可参考的css代码规范
使用stylelint检查css代码
考虑到stylelint文档的稀烂，该工具应该在生产项目中谨慎使用。
实现流程：
1.安装
npm i stylelint -g
2.配置
stylelint与eslint有一点相似，也需要一个.***rc文件填写配置。但是没发现类似stylelint --init这样的命令。
手动创建一个.stylelintrc文件后,在里面填写规则。
开启规则方式大多以true与数字为主。
3.执行
执行该命令会在命令行显示不符合规则的代码。
stylelint filename.css
执行该命令会将报告生成 stylelint_report.txt文件。
stylelint -f string filename.js > stylelint_report.txt
执行该命令可以在检查过程中自动修复一些规则。
stylelint filename.css --fix
文档上说有这个命令，但是不像eslint对可修复的有标识，实测也没发现对哪个规则生效。
commit message
Commit message 和 Change log 编写指南
commit message的限制应该是在远程服务器利用git hooks或者其他方式限制，不在本文的实现范围内。在此提及只是觉得该项也应该列入规范之一。
使用prettier检查js、css代码
实现流程：
1.安装
npm i prettier -g
npm i prettier -D
2.配置
相较于eslint繁琐的规则，prettier的规则相对来说要简单许多。
3.执行
prettier [opts] [filename ...]
prettier --tab-width 4 --use-tabs true --write folder/*
这里可能需要注意的是，prettier的write功能，其实是重写文件，如果重写可能出现的bug，他有一定的检验机制提醒，但是具体规则文档里没写，还需要实践摸索。
4.IDE集成
在文档里介绍将prettier集成到几种IDE的方式。
这里简单用webstrom做个例子：
进入File | Settings | Tools，这里既可以把prettier加入File Watchers 也可以加入External Tools中，个人觉得External Tools更加灵活。
选择External Tools后，点击+号,可以看到其中
name为工具名,
Program为运行prettier的cmd，你可以写其存放目录，也可以将其加入环境变量中，只写prettier,
Parameters是执行prettier时相应的命令参数,
Working directory为工作目录;
这里是我的配置
name prettier
Program D:\workshop\Roaming\npm\prettier.cmd
Parameters --write --tab-width 4 --use-tabs true $FilePathRelativeToProjectRoot$
Working directory $ProjectFileDir$
配置好后你就能在IDE里右键选择相应External Tools使用了，如果觉得麻烦，也可以在设置里的keymap设置使用相应工具的快捷键，将能取代IDE原本的代码格式化，并且功能更强大。
git hooks
上面介绍了规范和工具，现在说说怎么利用git hooks实现在每次提交代码前帮你自动校验代码规则。
git hooks在.git/hooks文件夹中，有pre-push pre-rebase等几种，本质上只是生命周期的不同，这里只讨论pre-commit。
通过编写pre-commit脚本，可以实现在提交前执行一些工具，比如说eslint，如果不符合规范，将无法提交代码。
这里我写了该pre-commit脚本，其本质是在commit前使用了prettier进行代码格式化。
这样就在本地实现了利用git hooks配合工具维护代码规范的目的。
hooks团队共享
.git目录是不会被clone下来的。
我的思路是编写一个js脚本，执行该脚本将同步的sh脚本写入.git/hooks/pre-commit.sh中来达到同步更新的目的。
现在你可以将示例fork下来，执行npm run prect生成pre-commit hooks。
修改一下js/css代码，然后commit，之后你会发现一些可能细微的错误和格式混乱的问题被自动修正了。
