git 源代码自动检查_前端项目配置 Git hooks 实现提交时自动语法检查, 修复

前端项目配置 Git hooks 实现提交时自动语法检查, 修复

1. 项目中要配置好代码检查工具

笔者这配置了 eslint 来检查语法错误, prettier 来格式化代码;

当然, 你完全可以使用其它的语法检查工具.

2. 安装插件

NPM install husky lint-staged --save-dev

说明:

husky: 可以方便的让你通过 NPM scripts 来调用各种 Git hooks ;

lint-staged: 利用 Git 的 staged 特性, 可以提取出本次提交的变动文件, 让你的代码检查器只处理这些文件;

3. 编辑 package.JSON/** 配置 husky 添加 Git hooks */

"husky":{

"hooks":{

"pre-commit":"lint-staged"/** Git commit 之前执行 "lint-staged" 命令 对修改过的文件进行代码检查 */

}

},

/**

* 配置 lint-staged */

* 由于笔者当前是 vue 项目 故检查以下几种文件 其它项目可以自行编辑要检查的文件

* 笔者在这执行 prettier 来检查语法错误, 执行 eslint 来检查代码错误

* 当然, 也可以在此执行相关命令进行 autoFix*/

"lint-staged":{

"src/**/*.{js,vue.json}":[

"prettier --check src/**/*.js src/**/*.vue src/**/*.json",

"eslint --ext .js,.vue src/",

"git add ."

],

"src/**/*.{less,sCSS,sass}":[

"prettier --check src/**/*.less src/**/*.scss src/**/*.sass",

"git add ."

]

},

4. 执行命令测试一下, 没问题就可以愉快的玩耍啦 ~

来源: http://www.jianshu.com/p/459401bab36a