husky, eslint, prettier保证代码质量

如果没有统一的代码规范, 就会有种”广式烧腊、天津狗不理“各种口味，更难免的还有”臭味相投“的，这些情况严重影响了应用质量.

所以我们想引入一些代码扫描工具对我们的代码进行提交前检测, 保证我们提交到的远端仓库都是统一规范的代码

工具

eslint(代码扫描) + husky+ prettier(帮你格式化代码)+ lint-staged(暂存区本次修改的东西, 而不是整个工程文件)

原理

• 待提交的代码git add 添加到暂存区；

• 执行 git commit；

• husky会触发注册在git pre-commit的钩子函数(git的hook可以理解成当执行如git add、git commit等git操作时的回调)被调用，执行lint-staged；如

    "husky": {   
        "hooks": {      "pre-commit": "lint-staged",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" }
    },
    "lint-staged": {    "*.{js,jsx,ts,tsx}":  "eslint --fix"  }
  

• lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 Prettier）；如果有错误（没通过ESlint检查）则停止任务，同时打印错误信息，等待修复后再执行commit；成功commit，可push到远程

核心点

• husky注册git的钩子函数保证在git 执行commit时调用代码扫描的动作；
• eslint完成按照配置的规则进行扫描；
• Lint-staged保证只对当前add到git stage区的文件进行扫描操作，这样做的原因在于，如果对全工程的文件进行扫描的话，并且之前的前端工程并未注重代码规则的检测的话，很大可能性会出现成百上千的error，基本上心里是崩溃的。因此，只对当前add的文件进行检测，达到及时止损的目的，历史代码可以切到新的分支进行修复后再进行合并。