webpack eslint 的入门级别教程
eslint 又叫做代码质量检测 说白了就是帮你检测代码中的问题
1.还是和老样子一样直接开始走程序了
首先你先配好一个基础的webpack项目 这个我在之前有讲过的 就不再重复 讲解了
安装 依赖 npm i -D eslint eslint-loader
2.在package.json文件中 配置 eslint 的启动命令 (加到 scripts里面)
"eslint_init": "eslint --init"
3.在命令行中启动 npm run eslint_init
然后根据具体情况进行选择 第一个是只检测语法 第二个是 不仅仅是语法 还会检测其他的问题 第三个就不是正常人用的 他会检测 你代码标准不标准 比如空格 有没有敲等等 会让人拽狂的
4.选择完之后你的目录下回生成一个 .eslintrc.js文件
下面是一些基础的配置 你也可以手动添加一些配置 具体想增加什么 可以参考eslint的官网 反正笔者看完之后感觉头发掉了一些
module.exports = {
"env": {
"browser": true, //环境是浏览器
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018, // ecma版本 2018
"sourceType": "module"
},
"rules": {
"indent":["error",2], // 检测代码缩进
"quotes":["error","double"] // 字符串必须是双引号 是单引号会报错
}
};
5.更改webpack.config.js文件
module:{
rules:[
{
test:/\.(js|jsx)$/i,
loader:'eslint-loader',
exclude:/node_modules|bower_modules/, // 忽略这些文件
options:{}
}
]
},
6.启动webpack项目文件 这下你的代码就会被检测 建议没必要那么严格 会把人逼疯的 当然具体情况看公司要求