建立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，就會顯示錯誤的代碼，而且編譯失敗。