在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选项，（那如何选择启用，请参照方案二）

方案二

假设我们已经启用了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.js
module.exports = {
    lintOnSave: false
}

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

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

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

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

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

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

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

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

// vue.config.js
module.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 检查的关闭。希望本文的内容能对广大开发者有所帮助，使他们在处理代码质量和风格检查时更加得心应手。