前端工程化-ESLint+webpack

简介

在上篇文章介绍了如何gulp + ESLint ，所以呢在本篇文章中主要介绍ESLint+webpack

ESLint+webpack

1、首先安装ESLint 和eslint-loader
需要注意的loader加载顺序是从后往前的，所以说eslint-loader需要写在babel-loader后面，如下

  rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'eslint-loader',
                enforce: "pre"
            },

            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
      ]

ESlint配置

module.exports = {
    env: {
        browser: true,
        es2020: true
    },
    extends: [
        standard,
    ],
    parserOptions: {
        ecmaVersion: 11
    },
    rules: {
         "react/jax-uses-react": 2,
         "react/jax-uses-vars": 2
    },
    plugins: [
         "react"
    ]
};

另外一种ESLint配置方式 这种方式更常用

module.exports = {
    env: {
        browser: true,
        es2020: true
    },
    extends: [
        standard,
        "plugin:react-recommended"
    ],
    parserOptions: {
        ecmaVersion: 11
    },
    rules: {
    },
    plugins: [
    ]
};

谢谢观看，如有不足敬请指教