vue eslint简要配置教程详解

2020-06-14 06:30:58易采站长站整理

在前端开发过程中,难免习惯了 console.log 。

但是刚入门vue时,基于vue-cli 3.x,运行时终端老抛出error。一看信息,发现是不能使用 console.log ,另外import后的但是没有使用的变量也提示error信息,这是不错的。

1. 修改rules

但的你想去掉console提示?那可以通过 package.json 修改 rules 规则。

在package.json中,有这几其中的一项,在 rules 中添加 “no-console”: “off” ,如下:

修改完成后,重新运行即可生效。


"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},

2. eslintConfig说明


"eslintConfig": {
"root": true, // 此项是用来告诉eslint找当前配置文件不能往父级查找
"env": {
"node": true // 此项指定环境的全局变量,下面的配置指定为node环境
},
"extends": [ // 此项是用来配置vue.js风格,就是说写代码的时候要规范的写,如果你使用vs-code我觉得应该可以避免出错
"plugin:vue/essential",
"@vue/standard"
],
"rules": { // 规则配置写在这里
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint" // 此项是用来指定eslint解析器的,解析器必须符合规则,babel-eslint解析器是对babel解析器的包装使其与ESLint解析
}
},

2.1 关闭eslint(方案1)

直接把 package.json 上面这一段删除

重新运行项目。

2.2 关闭eslint(方案2)

在 vue.config.js 中,加上下面的配置信息


devServer: {
// eslint 配置开始
overlay: {
warnings: false,
errors: false
},
lintOnSave: false
// eslint 配置结束
}

重新运行项目。

3. eslint 规则配置说明

如上面第1点示例 “no-console”: “off”


"eslintConfig": {
...
"rules": {
"no-console": "off"
},
...
},

3.1 规则值


"off"或者0 // 关闭规则关闭
"warn"或者1 // 在打开的规则作为警告(不影响退出代码)
"error"或者2 // 把规则作为一个错误(退出代码触发时为1)

3.2 规则参数