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项目文件  这下你的代码就会被检测  建议没必要那么严格 会把人逼疯的  当然具体情况看公司要求