项目规范commit/eslint结合使用

项目统一规范之commit/eslint

解决的问题

1. 项目加入eslint，git commit的时候使用eslint检查
2. eslint 只检查修改的文件
3. 规范git commit

安装包说明

1. husky： 是一个 Git Hook 工具
2. lint-staged：是一个在git暂存文件上运行linters的工具,当然如果你觉得每次修改一个文件就给所有文件执行一次lint检查不恶心的话，这个工具对你来说就没有什么意义了，请直接关闭即可。
3. @commitlint/config-conventional:引入commit规范,每次commit时，commitlint会用在git的hook回调中

配置步骤

1. 配置所有代码质量工具，如Prettier和ESlint。
2. 安装husky，lint-staged，@commitlint/cli，@commitlint/config-conventional 依赖
3. 在package.json中配置

 npm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional

// package.json 文件
"husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/": ["eslint --fix","stylelint --fix","git add"]
  }

配置说明

• commit-msg
  • git commit的时候触发 检查commit是否规范 不规范则报错不向下进行
  • 不使用这个规范略过这个命令

  "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
  /*
  *  git commit 规范例如： git commit -m ‘feat: 新功能描述’
  * 					 git commit -m ‘fix: 修复什么什么bug’
  *
  commit message:    <type>:    <subject>  (注意冒号后面有空格)
	type:
		feat：新功能（feature）
		fix：修补bug
		docs：文档（documentation）
		style： 格式（不影响代码运行的变动）
		refactor：重构（即不是新增功能，也不是修改bug的代码变动）
		test：增加测试
		chore：构建过程或辅助工具的变动
		revert：回滚
		perf：优化
	  ...  可以看一下源码
	subject：
		subject是 commit 目的的简短描述
  */

• pre-commit
  • pre-commit的git钩子，在调用git commit 命令时自动执行某些脚本检测代码，若检测出错，则阻止 commit代码，也就无法push
  • 使用 lint-staged 等同于 npm run lint-staged （git add 文件 ）
  • 使用 eslint /npm run eslint等（全部文件）

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

• lint-staged
  • 只对git add到stage区的文件进行扫描
  • 从v3.1开始，您现在可以使用不同的方式进行配置：
    • lint-staged 在你的对象 package.json
    • .lintstagedrc JSON或YML格式的文件
    • lint-staged.config.js JS格式的文件
    • 使用–config或-c标志传递配置文件

 /*
 *  配置应该是一个对象，其中每个值都是要运行的命令，其键是要用于此命令的glob模式
 *  package.json例
 *	"*"          匹配所有的git add 文件
 *  “*.js” 		 匹配以add文件中的js文件
 *  “*.{js,jsx}" 匹配js以及jsx文件
 *  “src/”       匹配src目录下所有文件
 *   ....
 * 
 *   “eslint”       运行eslint  
 *   “eslint --fix” 运行eslint --fix并自动向提交添加更改
 *   "["eslint --fix","stylelint --fix"]" 数组表示命令多个，按照从左到右的顺序逐个执行，不通过则后面不执行
 *   
 */
 {
	 "lint-staged": {
    	"*": "["eslint --fix","stylelint --fix"]"
  	 }
 }