在Vue项目中关闭ESLint检查的方法详解

在现代前端开发中,Vue.js 是一种非常流行的框架,它以其简洁易用的语法和强大的功能而受到广大开发者的喜爱。然而,在使用 Vue.js 开发项目时,ESLint 作为一个代码质量和风格检查工具,有时会显得过于严格,导致开发效率下降。因此,有时我们需要在 Vue 项目中关闭 ESLint 检查,以便更快地完成开发任务。本文将详细介绍在 Vue 项目中关闭 ESLint 检查的方法,并提供相应的步骤和示例代码,帮助开发者更好地理解和应用这些技巧。

vue如何关闭eslint检查

在实际开发过程中,eslint的作用不可估量,诸如:

  • 1.审查代码是否符合编码规范和统一的代码风格;

  • 2.审查代码是否存在语法错误;

But,对于初学者来说,这个功能极其不友好,各种问题层出不穷,让很多初学者头疼不已,我们有没有办法关掉它,等适当时机在启用它呢,答案是肯定的。

不同vue cli版本创建工程的时候,稍微有些差别,要仔细甄别,我的vue cli v4.5.9

方案一

vue脚手架创建工程的时候,不要选择Linter / Formatter选项,(那如何选择启用,请参照方案二)

图片[1]-在Vue项目中关闭ESLint检查的方法详解-趣考网

方案二

假设我们已经启用了eslint,找到我们工程目录下的package.json,将‘devDependencies’中的依赖删掉(我的是eslint、eslint-plugin-vue、@vue/cli-plugin-eslint这三个),然后执行npm install,然后重启服务,你会发现.eslintrc.js文件的作用已经失效。

同样,如果要启用还得安装上这几个依赖包,显然,并不是那么犀利顺畅。

方案三

通过vue.config.js配置lintOnSave

先来看看vue.config.js是个啥,官网给的解释是:

vue.config.js是一个可选的配置文件,如果项目的 (和package.json同级的) 根目录中存在这个文件,那么它会@vue/cli-service自动加载。

vue.config.js官网, 其中一条就关于配置eslint的。

lintOnSave

Type:boolean|\'warning\'|\'default\'|\'error\'

Default:\'default\'

是否在开发环境下通过eslint-loader在每次保存时 lint 代码。

这个值会在@vue/cli-plugin-eslint被安装之后生效。

如果你想关闭eslint,可以将之设置为false,重启服务

//vue.config.jsmodule.exports={lintOnSave:false}

设置为true\'warning\'时,eslint-loader会将 lint 错误输出为编译警告。

默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。

如果你希望让 lint 错误在开发时直接显示在浏览器中,你可以使用lintOnSave: \'default\'

这会强制eslint-loader将 lint 错误输出为编译错误,同时也意味着 lint 错误将会导致编译失败。

设置为error将会使得eslint-loader把 lint 警告也输出为编译错误,这意味着 lint 警告将会导致编译失败。

或者,你也可以通过设置让浏览器 overlay 同时显示警告和错误:

//vue.config.jsmodule.exports={devServer:{overlay:{warnings:true,errors:true}}}

lintOnSave是一个 truthy 的值时,eslint-loader在开发和生产构建下都会被启用。如果你想要在生产构建时禁用eslint-loader,你可以用如下配置:

//vue.config.jsmodule.exports={lintOnSave:process.env.NODE_ENV!==\'production\'}

方案四

通过eslintrc.js控制,后续补充

其实这个并不能关闭检测,只不过是让你的eslint检测更人性化一点,以什么样的规则去检测您的代码,每个项目配置不尽相同,选择适合自己的即可,可以参照官网的配置。

Introduction | eslint-plugin-vue (vuejs.org)

总结

本文介绍了在 Vue 项目中关闭 ESLint 检查的几种方法,包括修改 package.json 文件、使用 .eslintrc 配置文件、在 VSCode 中禁用 ESLint 插件等。每种方法都有其独特的优点和适用场景。通过对比和分析,开发者可以根据具体需求选择最合适的方法,从而实现 Vue 项目中 ESLint 检查的关闭。希望本文的内容能对广大开发者有所帮助,使他们在处理代码质量和风格检查时更加得心应手。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享