引入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? JavaScriptChecking peerDependencies of eslint-config-google@latestThe 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? YesInstalling 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，就会显示错误的代码，并且编译失败。