errors potentially fixable with the `--fix` option报错

errors potentially fixable with the --fix option.报错如何解决

问题描述

在用vue-cli3搭建的项目开始进行开发时候,在项目搭建完成之后,每次启动服务时都会弹出编译错误,我就是简单的新建一个index.vue,写了几个标签,发现初次npm run serve不会报错,在浏览器上访问可以显示正常的内容,但只要每次修改保存之后就会报错,根据提示去查看代码,怎么也没看出问题出现在哪里。虽然报错了,但是服务还是正常启动了。

出错原因

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

而 Eslint语法规范相当的严格,就是空格位数不对都会报错,所以相当的麻烦。打开.editorconfig配置文件我们可以看到Eslint的缩进是2,而我的编辑器默认的缩进是4(代码格式化与 Eslint 的代码规范不一致)。我们将自己的代码中的缩进改过来,改成Eslint语法的缩进方案,用快捷键shift+alt+f重新格式化下代码,然后重新启动服务,系统还是会报错。

解决方案

一、关闭Eslint语法规范

在.eslintrc.js文件中找到’@vue/standard’配置将其删除或注释。

errors potentially fixable with the `--fix` option报错_第1张图片

二、在你的编辑器里装一个eslint 插件,用于自动修复eslint规范

下面是安装之后的效果图
errors potentially fixable with the `--fix` option报错_第2张图片

步骤

1、安装插件
npm i -g eslint
2.安装成功之后打开,根据以下提示修改配置

这个是mac版(提示:mac版打开sittings 的快捷键是commed+,)
errors potentially fixable with the `--fix` option报错_第3张图片
这个是windows版
errors potentially fixable with the `--fix` option报错_第4张图片

3、最后点击Apply应用,点击ok就行了
4、使用可以在菜单栏下的code->ESlint Fix 修复或则可以添加快捷键

你可能感兴趣的:(vue)