vue实战开发005:解决Vue-cli3中的Eslint报错

       今天用之前vue-cli3搭建的项目开始进行开发,发现每次启动服务时都会弹出编译错误,我就简单的写了两个页面,在layout.vue中引入了header.vue(里面基本没什么内容),然后根据提示去查看代码,怎么也没看出问题出现在哪里。虽然报错了,但是服务还是正常启动了,在浏览器上访问http://localhost:8080/可以查看到写的内容。

vue实战开发005:解决Vue-cli3中的Eslint报错_第1张图片

    这里可以看到系统提示找到错误“12 errors found,12 errors potentially fixable with the `--fix` option“,查了下是Eslint抛出的错误提示,之前我们在vue实战开发003:详解vue-cli 3.0项目搭建的时候选择的是standard(正常模式)所以每次启动项目的之后都会对代码进行检查,是否符合Eslint规范。

vue实战开发005:解决Vue-cli3中的Eslint报错_第2张图片

     而 Eslint语法规范相当的严格,就是空格位数不对都会报错,所以相当的麻烦。打开.editorconfig配置文件我们可以看到Eslint的缩进是2,而vscode默认的缩进是4(代码格式化与 Eslint 的代码规范不一致)。

vue实战开发005:解决Vue-cli3中的Eslint报错_第3张图片

       我们将vscode中的缩进改过来,改成Eslint语法的缩进方案,用快捷键shift+alt+f重新格式化下代码,然后重新启动服务,系统还是会报错。

vue实战开发005:解决Vue-cli3中的Eslint报错_第4张图片

       把Eslint缩进改成4也同样出错了,我重新检查了一下代码,将一些简单的问题修改了一下,报错解决了,再次新增代码的时候就要注意了,代码写法一定要符合Eslint语法规范,Eslint语法连空格都不允许错误的。

vue实战开发005:解决Vue-cli3中的Eslint报错_第5张图片

       如果你不喜欢Eslint的语法规范可以将其关闭,我后面就直接关闭了,太麻烦了经常都是因为一些缩进问题导致的错误提示,真心不怎么想用Eslint,以后创建项目的为了找些时候还是直接忽略代码检测得了(自己检查),想要关闭Eslint语法检查只要在.eslintrc.js文件中找到'@vue/standard'配置将其删除即可。

vue实战开发005:解决Vue-cli3中的Eslint报错_第6张图片

总结:ESLint 是一个语法规则和代码风格的检查工具,用来保证写出语法正确、风格统一的代码,这个比较适合团队开发和对代码已经轻车熟路的大神使用,个人觉得Eslint的语法规范比较严格,作为新手的我们能难去适应它这么高的要求,当然如果你从一开始就能适应ESLint规范来敲代码,相信你以后一定能成为大神的(我是做不到了)。

百度经验:vue实战开发005:解决Vue-cli3中的Eslint报错

你可能感兴趣的:(前端框架vue)