每个人的编码习惯都是不一样的，那如何在团队工作中保证所有人，按照一套统一的规范来编码呢？

首先，使用 ESLint 来统一代码规范。ESLint是能在编译中发现代码错误的工具，在团队协作中，可以避免低级 Bug 或错误警告之类的，产出风格统一的代码。

为了保证每个人提交的代码都是规范的，则需要使用 Git 钩子来做最后一道关卡。

Git 钩子就是 Git 在特定的重要动作发生时触发自定义脚本。

Git 钩子分为客户端和服务端。此时只看客户端钩子。

客户端钩子有两种：

pre 前置钩子，在动作开始前调用

post 后置钩子，在动作执行后调用

当钩子在非零状态下退出，git 操作就会停止。

因为要做的是在代码提交前做规范性的检查，所以 使用了 pre-commit 钩子。

在钩子函数里写入指令 执行 eslint 检查代码，执行到钩子函数时，会先执行指令。eslint检查代码规范，则下一步。不规范则非零退出，停止git操作。

安装插件

npm install eslint husky lint-staged --save-dev

eslint 代码规范检查工具。可以在 .eslintrc.js 文件自行配置规则。

husky 在 .git/hooks 中写入 pre-commit 等脚本激活钩子，在 Git 操作时触发；

lint-staged 参考 Git 中 staged 暂存区概念，在每次提交时只检查本次提交的文件。(为了不检查所有文件，提高性能)

修改 package.json 文件

"scripts": {

...

"lint-staged": "lint-staged",

...

},

"husky": {

"hooks": {

"pre-commit": "npm run lint-staged"

}

},

"lint-staged": {

"**/*.less": "stylelint --syntax less",

"**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",

"**/*.{js,jsx,tsx,ts,less,md,json}": [

"prettier --write"

]

},

执行流程

每次执行 commit 前 会先去执行 npm run lint-staged

npm run lint-staged 会去匹配配置好的文件，执行对应的检查机制。

stylelint 检查所有的 less 文件

js,jsx,ts,tsx 按照 eslint 检查，不符合的 会提示 按照 .prettierrc.js 的配置优化。

总结

至此，团队开发中代码风格获得了统一，减少了开发bug，避免了了不必要的问题。