vue+webpack中配置ESLint

2023-09-06 02:28:04 142

一、ESLint

协同开发过程中，经常感受到来自代码检视的恶意。代码习惯不一致，看半天；居然提交低级错误，我的天(╯‵□′)╯︵┻━┻！...研究了一番，决定使用ESLint来做代码规范检查。

二、配置方式

JavaScript注释：通过JavaScript注释把配置信息嵌入代码中。
package.json：在package.json文件中的eslintConfig字段中指定配置。
配置文件：通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息，ESlint会查找并且自动读取配置文件。

三、配置过程(配置文件)

安装相关npm包

yarnaddeslintbabel-eslinteslint-plugin-vueeslint-friendly-formatter--dev

增加文件

.eslintignore用来配置不需要检查的文件(类似git的.gitignore)。
.eslintrc.js用来配置ESlint验证规则的配置文件。

修改webpack配置文件

module.exports={
module:{
rules:[
test:/\.(js|vue)$/,
loader:"eslint-loader",
enforce:"pre",
//指定检查的目录
include:[resolve(__dirname,'src')],
//eslint检查报告的格式规范
options:{
formatter:require("eslint-friendly-formatter")
}
]
}
}

四、配置文件详解

以.eslintrc.js为例

module.exports={
//一旦配置了root，ESlint停止在父级目录中查找配置文件
root:true,
//解析器
parser:"babel-eslint",
//想要支持的JS语言选项
parserOptions:{
//启用ES6语法支持(如果支持es6的全局变量{env:{es6:true}}，则默认启用ES6语法支持)
//此处也可以使用年份命名的版本号：2015
ecmaVersion:6,
//默认为script
sourceType:"module",
//支持其他的语言特性
ecmaFeatures:{
//...
}
},
//代码运行的环境，每个环境都会有一套预定义的全局对象，不同环境可以组合使用
env:{
es6:true,
browser:true,
jquery:true
},
//访问当前源文件中未定义的变量时，no-undef会报警告。
//如果这些全局变量是合规的，可以在globals中配置，避免这些全局变量发出警告
globals:{
//配置给全局变量的布尔值，是用来控制该全局变量是否允许被重写
test_param：true
},
//支持第三方插件的规则，插件以eslint-plugin-作为前缀，配置时该前缀可省略
//检查vue文件需要eslint-plugin-vue插件
plugins:["vue"],
//集成推荐的规则
extends:["eslint:recommended","plugin:vue/essential"],
//启用额外的规则或者覆盖默认的规则
//规则级别分别：为"off"(0)关闭、"warn"(1)警告、"error"(2)错误--error触发时，程序退出
rules:{
//关闭“禁用console”规则
"no-console":"off",
//缩进不规范警告，要求缩进为2个空格，默认值为4个空格
"indent":["warn",2,{
//设置为1时强制switch语句中case的缩进为2个空格
"SwitchCase":1,
//分别配置var、let和const的缩进
"VariableDeclarator":{"var":2,"let":2,"const":3}
}],
//定义字符串不规范错误，要求字符串使用双引号
quotes:["error","double"],
//....
//更多规则可查看http://eslint.cn/docs/rules/
}
}

使用JavaScript注释启用或禁止指定规则

/*eslint-disable*/
alert('message');
/*eslint-enableno-alert,no-console*/
...

层叠配置

ESlint支持层叠配置，检测文件的规则是其目录层级结构中所有.eslintrc文件的组合，当规则冲突的时候，离检测文件最近的规则优先。

默认情况下，ESlint会沿着父级目录网上寻找配置文件，直到根目录。如果配置文件中有root:true，则ESlint会停止在父级目录中查找。

五、配置过程中出现的问题

出现错误：Usethelatestvue-eslint-parser。

解决方法：把parser:"babel-eslint"移动到parserOptions中。

{
//parser:"babel-eslint",
parserOptions:{
parser:"babel-eslint",
//...
}
}

问题原因：eslint-plugin-vue中的很多规则都需要vue-eslint-parser检查

vue+webpack中配置ESLint

热门推荐

随机推荐