使用git钩子做eslint校验

git hook

git中,任何时候当前版本库中出现如commitpush等特殊的事件时,都会触发执行一个或多个任意的shell脚本,我们称之为git钩子,它存放在.git/hooks目录下,我们可以看到目录下有commit-msg.samplepre-commit.sample等文件,这些都是案例文件,不会执行,要想执行的话把后面的.sample后缀去掉就可以了。

钩子从执行顺序上分为两类:

  • 前置(pre)钩子,在动作完成前调用
  • 后置(post)钩子,在动作完成后执行

通常情况下,如果前置钩子一非零状态下退出,那么git动作就会终止,这样我们就可以在commit前对提交的内容做一些校验,如果不符合规定就不让提交。

钩子默认是不会继承的,也就是说如果你从仓库clone下来的版本库是没有这些钩子的,必须手动复制钩子脚本使其生效,我们可以再根目录建一个.hook的目录,然后把脚本放进去加入版本库管理,clone下版本库后执行一下拷贝命令就好了,可以把拷贝命令放入npm scripts

ESLint

ESLint是一个代码检测工具,估计很多人都用过或听过,不过博主开始用的时候对满屏的error吓到了,放弃了一段时间,其实在编辑器里装好了插件,从一开始写的时候就可以避免的。

众所周知,javascript是一门弱类型动态脚本语言,不像C语言那样严格的声明变量类型。这样的灵活性给程序埋下了很多隐患,另一方面,团队协作的时候应该保持一种编码风格,是用两个空格还是四个,驼峰命名还是下划线等问题应该一致。我们可以根据自己项目的实际情况,制定自己的规则,从而实现辅助编码规范的执行,有效控制项目代码的质量。

安装

1
npm install -g eslint

配置

首先新建ESLint配置文件.eslintrc.js,然后配置自己规则,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"env": {
"browser": true,
},
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
"globals": {
"$": true,
},
"rules": {
"camelcase": 2,
"curly": 2,
"brace-style": [2, "1tbs"],
"quotes": [2, "single"],
"semi": [2, "always"],
"space-in-brackets": [2, "never"],
"space-infix-ops": 2,
}
}

执行

1
eslint ./src

使用git钩子自动eslint校验

  • 项目安装ESLint, 并配置eslintrceslintignore
  • 在项目.hooks目录下新建pre-commit文件,内容为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#!/bin/sh
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep ".jsx\{0,1\}$")
if [[ "$STAGED_FILES" = "" ]]; then
exit 0
fi
PASS=true
echo "\nValidating Javascript:\n"
# Check for eslint
which eslint &> /dev/null
if [[ "$?" == 1 ]]; then
echo "\t\033[41mPlease install ESlint\033[0m"
exit 1
fi
for FILE in $STAGED_FILES
do
eslint "$FILE"
if [[ "$?" == 0 ]]; then
echo "\t\033[32mESLint Passed: $FILE\033[0m"
else
echo "\t\033[41mESLint Failed: $FILE\033[0m"
PASS=false
fi
done
echo "\nJavascript validation completed!\n"
if ! $PASS; then
echo "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass ESLint but do not. Please fix the ESLint errors and try again.\n"
exit 1
else
echo "\033[42mCOMMIT SUCCEEDED\033[0m\n"
fi
exit $?

来源pre-commit-eslint

  • package.json中添加
1
2
3
"scripts": {
"postinstall": "cp .hooks/* .git/hooks/"
},

在仓库clone下来后执行一下npm run postinstall,这样钩子就生效了,每次git commit的时候就会对你提交的这部分代码进行eslint校验,没通过的话就不会提交。

坚持原创技术分享,您的支持将鼓励我继续创作!