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

骑猪看日落 2022-04-12 11:46 502阅读 0赞

前景提要：

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

> 前端项目的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][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暂时没有找到这个。

[git hooks]: https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90
[error-scss-file]: /images/20220412/7ab69abd57c24dc69e28c189386d80b6.png
[commit-result]: /images/20220412/68c1c61ae01b49c2a769e158c359a822.png
[https_github.com_benmosher_eslint-plugin-import_tree_master_resolvers_webpack]: https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack