【工具】提交代码前的代码检查pre-commit

前景提要:

 项目提交之前做代码检查,避免不规范的代码推送到服务器。

前端项目的pre commit check,检查内容:.js .vue .scss (可能是其他的jsx 或者less)

  实际上原理是 git hooks, 在commit之前执行某些脚本。这个脚本的定义是放在.git/hooks/pre-commit 文件里。

我们需要借助工具库 husky 和 lint-staged, 他们要配合起来使用达到这个目的。

1,第一步:
安装工具包(假定你已经安装了eslint 和 stylelint相关包):

  npm install --save-dev lint-staged husky

2, 第二步 :
在package.json里面配置git hooks 里面,pre-commit要执行的内容。
我们要做的操作是用eslint对.js 和 .vue文件检查规范,以及对.scss文件进行规范检查,并且fix一些scss的缩进或者写法错误。

{
  "name": "Project Demo",
  "version": "1.0.0",
  "description": "des",
  "author": "",
  "private": true,
  "scripts": {
	 // ...
    "lint-staged": "lint-staged" // key words
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"  // key words
    }
  },
  "lint-staged": {
    "**/*.js": "eslint --ext .js",  // key words
    "**/*.vue": "eslint --ext .vue",  // key words
    "src/**/*.scss": "stylelint --syntax scss && stylelint --fix scss"  // key words
  },
  "dependencies": {
  	//...
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",  
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    
    "husky": "^1.2.0",
    "lint-staged": "^8.1.0",
    
    "stylelint": "^9.9.0",
    "stylelint-config-standard": "^18.2.0",
  }

这里我们提交之前检查了3种文件,用eslint检查js文件和vue文件,用stylelint检查scss类型的文件。

第三步:
修改或者添加我们的.eslintrc文件 或者.stylelintrc文件,这样我们git staged中文件,在commit之前,husky和 lint-staged会帮助我们对staged中的js/vue/scss文件分别执行如下的命令,就是我们定义在package.json里面的lint-staged节点:

eslint --ext .js

eslint --ext .vue

stylelint --syntax scss && stylelint --fix scss

常见的.stylelintrc文件长这样:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-pseudo-class-no-unknown": null,
    "shorthand-property-no-redundant-values": null,
    "at-rule-empty-line-before": null,
    "at-rule-name-space-after": null,
    "comment-empty-line-before": null,
    "declaration-bang-space-before": null,
    "declaration-empty-line-before": null,
    "function-comma-newline-after": null,
    "function-name-case": null,
    "function-parentheses-newline-inside": null,
    "function-max-empty-lines": null,
    "function-whitespace-after": null,
    "number-leading-zero": null,
    "number-no-trailing-zeros": null,
    "rule-empty-line-before": null,
    "selector-combinator-space-after": null,
    "selector-list-comma-newline-after": null,
    "selector-pseudo-element-colon-notation": null,
    "unit-no-unknown": null,
    "no-descending-specificity": null,
    "value-list-max-empty-lines": null
  }
}


如果某一个步骤检查出来有错误,那么就会提交失败。

例子:

我们修改了项目中的一个scss文件,里面有3个错误,分别是:
1,第一个font-size和font-family冒号后面没有空格
2,重复的font-size声明
3,文件最后一行没有一个空行
error-scss-file

我们git add 然后执行 commit命令,会出现下面的情况:
commit-result

因为我们写了stylelint --fix scss 这个命令【看上面配置】,能够fix的就已经fix了,但是font-size重复的就不能fix,需要手动修改。

js文件和 vue文件是同样的效果。


在使用eslint-plugin-import 的时候要注意

    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-plugin-import": "^2.14.0",

在.eslintrc里面要配置一下 webpack的resolve,在settings节点加上这个,注意,config后面是相对.eslintrc文件的配置resolve的webpack文件的路径,你应该根据你自己的文件结构来写这个路径

  settings: {
    "import/resolver": {
        "webpack": {
            "config": "./build/webpack.base.conf.js"
        }
    }
  }

参考这里: https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack


遇到了新问题

vue文件里面的style并没有被修复,我们需要修改脚本,在lint-staged节点增加了第四行

  "lint-staged": {
    "**/*.js": "eslint --ext .js",
    "**/*.vue": "eslint --ext .vue",
    "src/**/*.scss": "stylelint --syntax scss && stylelint --fix scss",
    "src/**/*.vue": "stylelint --fix"
  },


补充,对于js代码来说,vscode有eslint官方的插件,可以帮我们根据eslintrc的配置来检查js代码是否合法,并且保存的时候自动帮我们修复能修复的,但是需要我们在vscode中配置eslint,先安装eslint插件,然后在vscode的user setting JSON文件添加这两个键值对:

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
      "javascript",{
          "language": "vue",
          "autoFix": true
      },
      "html",
      "vue"
  ]

这时候我们在代码工作区就能实时看到js代码的不规范的地方,stylelint只需要安装插件,不需要配置就能看到不规范的地方,至于stylelint的autofixonSave暂时没有找到这个。

posted on 2018-12-03 22:57  狂奔的冬瓜  阅读(4838)  评论(0编辑  收藏  举报