vue项目集成eslint超简单

总结

为了方便，我把总结放在最前面，节约时间增加效率。

vue项目集成eslint，且实现保存编译时检测，方法有2种：

• 新项目：在用vue-cli创建项目时就配置选择eslint。
• 老项目：进入项目，执行vue add eslint，然后完成配置。重启项目，即可实现。

前言

最近公司再推代码规范化，作为小组里的唯一前端，前端代码规范的任务就给我了，没有大佬依靠，那就只能自己当大佬了。哎，山中无老虎，猴子称大王，难受，我还是一条咸鱼，连当大王的资格都没有啊。只能赶鸭子上架了，上架一只算一只。

先查了有没有集成eslint的先例，好家伙，挺多，然后一试，好家伙，没效果，此时我还没注意到我用的是公司自己开发的框架，项目启动走的是框架自己的命令，而非vue-cli的，所以说细节决定成败是没错的，这个玩意消耗了我2天的时间搞它。

既然网上的捷径不通，那只能脚踏实地了。先去eslint官网看一波，安装，初始化，配置，插件都了解了，ok，开工，先用vue-cli新建个项目试试水，先npm install eslint --save-dev，然后初始化，eslint --init，初始化完成，生成配置项，测试下，ok，可以检测js了，然后测试.vue后缀文件，不行，继续干，找到如果要识别.vue后缀的，需要插件，安装！npm install eslint-plugin-vue --save-dev，还需要个babel-eslint用于eslint解析es6，装！大手一挥，怕啥，老子有的是空间，装！测试一下，还是不行，搞毛线。继续找问题：为什么不能检测.vue后缀。先看看eslint-plugin-vue的官网，ok，发现因为我们

// package.json
{
  script: {
    eslint: eslint src
  }
}

使用的是eslint src，eslint如果没有在全局或者命令中指定文件种类，默认只检测js文件，好吧，修改下命令：
eslint: eslint --ext .js,.vue src，运行，测试ok。
然后就是我们要实现编译保存时检测了。

项目编译时检测

如果是vue-cli创建的项目，直接参照总结，如果不是，则问你使用的框架组技术人员。嘿嘿。