React配置Eslint

Eslint的配置相对复杂一点，记录一下项目中使用的配置，以备后续查阅。

1. 下载Eslint插件并在webpack的配置文件中声明、初始化

const EslintWebpackPlugin = require("eslint-webpack-plugin");

plugins: [
        //eslint用于代码规范检查，作用相当于js的编译器
        //eslint的配置还需要在根目录下的.eslintrc.js配置文件中指定更多规则
        new EslintWebpackPlugin({
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", //node_modules不做检查
            cache: true,
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/.eslintcache"),
        }),
]

2. 在项目的根目录下新建.eslintrc.js文件，需要注意文件名的拼写，以·开头；在eslint配置文件中继承React官方规则，并配置babelOptions以解决报错问题：

module.exports = {
    extends: ["react-app"], //继承react官方规则
    parserOptions: {
        babelOptions: {
            presets: [
                //继承react官方规则会有报错，通过以下配置解决报错问题
                ["babel-preset-react-app", false],
                "babel-preset-react-app/prod",
            ],
        },
    },
};