如何充分发挥eslint在团队协作开发中的作用eslint在项目中的配置使用，推荐参考eslint官网。

前言

目前项目中都是配置了eslint校验，但是发现几个老项目要么代码有成片的报错，要么没有eslint报错提示，看着有点小闹心，这是团队协作开发中一个常见的代码规范问题，思考了一下，导致该问题的几个原因：

1、项目中配置的.eslintrc.js并未生效

2、开发过程中缺乏明显的eslint报错提示来进行代码规范约束

正文

针对1：正确配置项目中的eslint

eslint在项目中的配置使用，推荐参考eslint官网。

中文官网：eslint.cn/docs/user-g…

英文官网：eslint.org/docs/user-g…

针对2：合理利用eslint报错提示

1、统一编辑器eslint配置

优点：及时看到红色波浪线的报错提示进行修改，从根源预防

缺点：编辑器不统一不好统一配置（忽略使用sublime eslint支持并不是特别好的，就不能看到报错，还需要使用npx eslint src去手动查看报错）

由于我们小组的童鞋们都使用vscode，可以从根源预防，关于vscode eslint配置，可以参考本人第一篇小白文章 juejin.cn/post/684490…

2、项目中配置eslint执行脚本校验文件

package.json中添加scripts: {"lint": "eslint --ext .js,.vue src"}，通过npm run lint进行手动校验

优点：对使用编辑器eslint报错提示不友好的童鞋，可以手动执行脚本去进行eslint校验。

缺点：需要主动和手动去校验。

3、结合webpack的eslint-loader在本地开发运行编译中自动校验eslint

使用方法：

（1）项目中安装eslint-loader

（2）在js/vue文件的配置中使用use: eslint-loader

module: {
    rules: [{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src')],
        options: {
            formatter: require('eslint-friendly-formatter')
        }
    }]
}

优点：可以不用主动和手动校验eslint了。

缺点：在终端查看eslint错误很不友好。

4、在3的基础上，在webpack的devServer配置中添加overlay: true，

优点：可以将错误以弹层的形式告诉开发者，给vscode和sublime非常完美的体验

缺点：3和4使用eslint-loader，导致webpack在编译的时候速度变慢了一些，因为在编译js之前，先使用eslint-loader检测下了语法，肯定会影响速度。

5、在提交代码的pre-commit钩子中去执行npm run lint

使用方法:

在husky.config.js中配置如下：

{
  "hooks": {
      "pre-commit": “./node_modules/.bin/eslint --ext .js ./src”,   
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

优点：提交代码时再次拦截eslint报错不能提交到仓库。

缺点：如果前面几种方式都已经执行过eslint校验，显然这部操作就是多余的，反而还会增加提交代码的时间。

那么问题来了，hucky是什么呢？可以参考以下两篇文章来了解它，主要是用来规范团队协作代码提交

juejin.cn/post/684490…