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创建的项目,直接参照总结,如果不是,则问你使用的框架组技术人员。嘿嘿。

你可能感兴趣的:(vue项目集成eslint超简单)