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)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。