创建react应用2

引入 eslint 依赖

yarn add -D eslint

初始化 eslint 配置文件

yarn eslint --init

这一步要回答几个问题，除了第 3 个问题必须选 react，第 4 个问题必须选 Browser，
其他的你可以根据自己的情况进行选择。

下面这些是我自己的选择。

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Google (https://github.com/google/eslint-config-google)
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-google@latest eslint@>=5.4.0
? Would you like to install them now with npm? Yes
Installing eslint-plugin-react@latest, eslint-config-google@latest, eslint@>=5.4.0
....
Successfully created .eslintrc.js file in /Users/jevi/projects/react-project
✨  Done in 247.48s.

修改.eslintrc.js

extends

找到 ’extends’ 属性，将值改为

'extends': ["eslint:recommended","plugin:react/recommended","google"]

数组里的最后一项取决于你前面的问题

? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Google (https://github.com/google/esl…

因为我选择了使用 google 的代码规范，所以这里写 google。

settings

加入 react 版本配置

"settings": {
  "react": {"version": "detect"}
}

最终.eslintrc.js 文件类似下面这样

module.exports = {
  'env': {
    'browser': true,
    'es6': true,
  },
  'extends': ["eslint:recommended","plugin:react/recommended","google"],
  'globals': {
    'Atomics': 'readonly',
    'SharedArrayBuffer': 'readonly',
  },
  'parserOptions': {
    'ecmaFeatures': {'jsx': true,},
    'ecmaVersion': 2018,
    'sourceType': 'module',
  },
  'plugins': ['react',],
  'rules': { },
  "settings": {
    "react": {"version": "detect"}
  }
};

使用 eslint 检查代码

yarn eslint app/**/*.js

然后就会看到 eslint 检查到的错误，类似下面这样

/Users/jevi/projects/react-project/app/main.js
   1:22  error  Strings must use singlequote                   quotes
   2:19  error  Strings must use singlequote                   quotes
   4:1   error  Missing JSDoc comment                          require-jsdoc
   5:1   error  Expected indentation of 2 spaces but found 4   indent
   6:1   error  Expected indentation of 4 spaces but found 8   indent
   7:1   error  Expected indentation of 6 spaces but found 12  indent
   8:1   error  Expected indentation of 4 spaces but found 8   indent
   9:1   error  Expected indentation of 2 spaces but found 4   indent
  12:45  error  Strings must use singlequote                   quotes

✖ 9 problems (9 errors, 0 warnings)
  8 errors and 0 warnings potentially fixable with the `--fix` option.

webpack 集成 eslint

webpack 在编译时，用 eslint 检查代码，可以让我们在开发阶段就能发现问题。

安装 eslint-loader

yarn add -D eslint-loader

修改 build/webpack.config.base.js

找到 rules 属性，该属性的值是个数组，给这个数组第一项插入以下内容

      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader"
      }

最终 webpack.conf.base.js 看起来就是下面这样

"use strict";
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {entry: path.resolve(__dirname, "../app/main.js"),
    output: {path: path.resolve(__dirname, "../dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {loader: "babel-loader"}
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({template: "app/index.html"})
    ]
};

执行编译命令

最后执行编译命令 yarn build:prod 或者yarn build:dev，就会显示错误的代码，并且编译失败。