webpack 引入 eslint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：
（1）在注释中配置：使用JavaScript注释直接把配置嵌入到JS文件中。
（2）配置文件：使用下面任一的文件来为全部的目录和它的子目录指定配置信息。
    可以被配置的信息主要分为3类：
    1>Environments：你的 javascript 脚步将要运行在什么环境（如：nodejs，browser，commonjs等）中。
    2>Globals：执行代码时脚步需要访问的额外全局变量。
    3>Rules：开启某些规则，也可以设置规则的等级。

1:安装webpack支持eslint三件套

npm add eslint eslint-loader eslint-friendly-formatter -D

 

2:修改webpack.dev.conf.js文件，添加如下rule

{
    test: /\.js$/,
    use:[{loader:'eslint-loader',
        options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
            formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
        }
    }],
    enforce: "pre", // 编译前检查
    exclude: /node_modules/, // 不检测的文件
    include: [path.resolve(__dirname, 'src')], // 指定检查的目录
},
 

3:新建.eslintrc.js文件

（1）先添加如下代码

module.exports = {
    root: true, // 作用的目录是根目录
    parserOptions: {
      sourceType: 'module' // 按照模块的方式解析
    },
    env: {
      browser: true, // 开发环境配置表示可以使用浏览器的方法
      node: true //
    },
    rules: {
      // 自定义的规则
      "linebreak-style": [0 ,"error", "windows"],
      "indent": ['error', 4]
    }
}

（2）eslint 配置项

root 限定配置文件的使用范围
parser 指定eslint的解析器
parserOptions 设置解析器选项
extends 指定eslint规范
plugins 引用第三方的插件
env 指定代码运行的宿主环境
rules 启用额外的规则或覆盖默认的规则
globals 声明在代码中的自定义全局变量

rule 中规则的开启关闭：
“o