大家好,又见面了,我是你们的朋友全栈君。
在实际开发过程中,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,重启服务
代码语言:javascript复制// 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 同时显示警告和错误:
代码语言:javascript复制// 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控制,后续补充
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143849.html原文链接:https://javaforall.cn