持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

最近在开发新的项目，然后新的项目是基于旧的项目构建的。因为旧的项目上是没有代码校验的，所以就得在新的项目上加上代码校验。

问题总结

其实旧的的项目是有.eslintrc.js文件，以及有相关的eslint依赖（比如eslint-loader），但是运行起来，代码校验却没有生效。

仔细排查一番后才发现，原来是之前的同事把vue.config.js的lintOnSave设置成false。相当于是关掉了代码校验。

lintOnSave默认是default,当代码校验不通过时候，在命令行会输出报错，以及在浏览器也会提示报错信息。需要都解决了error才会消失。等同于error。

其它值还有true/warning。设置这两个值错误只会输出在命令行，浏览器还可以正常开发，不影响。

还有个上面说的值，false，这个就是关闭代码校验。

因为我上面配的lintOnSave是true。错误只会在命令行上提示。

如果有时候提交代码的时候忘记去看命令行上有没有报错，然后就直接提交了。就会把未修正的代码提交了。

所以如果能在git提交的时候再校验一次，这样就不会忘了。

答案是可以的。

有个依赖叫lint-staged，这个是专门在git提交的时候校验代码的。

先安装依赖

"lint-staged": "^9.5.0",

接着在package.json上面配置gitHooks，在commit会校验代码

  "gitHooks": {
    "pre-commit": "lint-staged"
  }

配置哪些文件会执行代码校验，以及对代码格式化后把它添加到暂存区。

  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

一执行，报错了。

查阅资料后才发现，这个yorkie是@vue/cli-plugin-eslint需要的依赖。

再把@vue/cli-plugin-eslint依赖加上。

"@vue/cli-plugin-eslint": "^4.5.0"

安装后，git提交的时候就可以校验了。