配置eslint

安装

安装eslint；webpack配置用到的eslint-loader；eslint用于解析js的解析器babel-eslint
npm i eslint eslint-loader babel-eslint -D

以airbnb为eslint的配置规则
npm i eslint-config-airbnb -D
及其所需要的插件
npm i eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react -D

node环境、es6环境下的插件
npm i eslint-plugin-node eslint-plugin-promise -D

配置.eslintrc

在项目根目录下新建.eslintrc文件，开始配置。

{
  // 指定js解析器
  "parser": "babel-eslint",

  // 定义ecma版本；sourceType定义为模块化的js编写模式
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },

  // 定义运行环境，如不配置browser为true则会报出window、document变量未定义的错误。同时需要配置node为true，因为项目基于webpack构建会用到node中的如process全局变量。
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  // 运用airbnb规则，标准规则为standard
  "extends": "airbnb", 

  // 自定义规则
  "rules": {
    "semi": [0] // 是否对结尾分号进行检测 -- 0为不检测
  }
}

配置webpack

module: {
  rules: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  }]
}

注意loader的执行顺序为从右到左，eslint-loader需在最右，先进行了eslint验证再进行babel的编译。

接着我们来走一波，然后发现了大量的报错，其中最为多的是这个东西