代码规范以及 commit 扫描代码
本篇是在写个人 react-native 项目中运用总结的，其他项目配置略有差异，酌情使用
使用插件工具：perttier+eslint+husky
1、perttier
👉 官方文档
1.1、步骤
(1) 安装 prettier 并 check 项目代码
安装依赖
yarn add --dev --exact prettier
添加 prettier 的配置文件
echo module.exports = {}> prettier.config.js
执行检查
npx prettier --check .
(2) 配合使用 Git hooks （husky）
👉 文档 husky
说明：
husky 插件非常强大，代码开发周期的本地开发、代码格式检查、提交远程仓库等阶段关联起来，应用于整个开发流程管理里。如果有需要，也可以配置使用系统变更号、jire 工单号等使用。
下图中的 以 .sample 结尾的钩子文件并不会在进行 git 操作的时候触发，只有这样的文件【pre-commit】的文件才会执行。如果只是单纯的手动修改文件名，确实可以在自己本地运行，但是，并不能同步到远程代码仓库，所以在协同开发下手动修改文件名还是会引发一些别的问题。然后 husky 就是用来解决这个问题的插件。
老版本的 husky（之前用过 4.2.5 版本）是通过修改 .git/hooks 里面的钩子函数文件（去掉 .sample 扩展名），来达到拦截处理功能的
新版本的 husky（我用的最新的 8.0.1）支持在项目根目录下创建 .husky 目录，在里面编写需要用到的 git hooks（如下图）。通过在 npm scripts 中增加脚本命令 "prepare":"husky install"的方式，来使得协同开发人员拉取仓库代码并安装 node_modules 的时候，执行 husky install 命令【感兴趣请看npm脚本命令解析】 ，开启 husky。
安装依赖
yarn add --dev husky lint-staged
启用 husky
npx husky install
执行命令后可在项目目录查看效果 .git/config [core] hooksPath = .husky
混入 项目根目录下的 .husky 文件夹，以达到使用 git hooks 的目的
在 package.json 中写入下面的脚本
npm set-script prepare "husky install"
如果执行失败或者没有成功写入脚本，可选择升级 npm 版本的方式处理
npm install -g npm继续执行命令；或者使用 该命令：npm pkg set scripts.prepare "husky install"
创建 hook
在根目录生成 .husky/pre-commit 文件
使用版本：
1.2、 配置 prettier.config.js
2、配合使用 ESLint
2.1、步骤
官网文档： http://eslint.cn/docs/user-guide/configuring
项目中安装包
yarn add eslint
配置 ESlint
npx eslint --init
2.2、配置 .eslintrc.js
3、husk 使用
文档：https://typicode.github.io/husky/#/?id=install
3.1、package.json 中添加配置
3.2、完整的 package.json
3.3、卸载 husky
4、整体使用效果
下面这个图片是老版本 husky 的效果
我是 甜点 cc
热爱前端开发，也喜欢专研各种跟本职工作关系不大的技术，技术、产品兴趣广泛且浓厚。本号主要致力于分享个人经验总结，希望可以给一小部分人一些微小帮助。
希望能和大家一起努力营造一个良好的学习氛围，为了个人和家庭、为了我国的互联网物联网技术、数字化转型、数字经济发展做一点点贡献。数风流人物还看中国、看今朝、看你我。
版权声明: 本文为 InfoQ 作者【甜点cc】的原创文章。
原文链接:【http://xie.infoq.cn/article/678df3560a165325eb5051e05】。文章转载请联系作者。
看见另一种可能 2020-04-30 加入
欢喜勇猛
评论