webpack使用eslint

• 目录

  
  捕获.JPG

npm install eslint --save-dev
npm install --save eslint-friendly-formatter
npm install --save eslint-loader
npx eslint --init //初始化  选择如何配置eslint 之后会生成配置文件.eslintrc
npx eslint src 检查src下的js文件

• .eslintrc

module.exports = {
   
    "env": {//环境
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",//导入推荐规则  npm install -D eslint-config-airbnb  使用airbnb规则
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"//按照模块解析
    },
    "rules": {
        //自定义规则
        "no-var": "error",//error warn off三种等级
    }
};
//npx eslint --init
//npx eslint src检查src下的代码是否符合规范

• webpack.config.js

const path = require('path')
module.exports = {
    mode:'development',
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                enforce: "pre",//编译前检查
                include: [path.resolve(__dirname, 'src')], // 指定检查的目录
                options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
                    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
                }
            }
        ]
    },
    entry:{
        main:'./src/index.js'
    },
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'./dist')
    },
}

github地址