[JavaScript] Setting up ESLint in Webpack

This assumes ESLint is already configured. Here's how to run ESLint when bundling with Webpack.

For ESLint configuration itself, please refer to the article below. Although it's set up for Nuxt.js, it works the same way.

[NUXT.JS] How to Configure ESLint and Prettier

INSTALLING ESLINT-LOADER

npm install eslint-loader --save-dev

CONFIGURING ESLINT-LOADER IN YOUR WEBPACK CONFIG

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // eslint options (if necessary)
        },
      },
    ],
  },
  // ...
};

However, in Webpack, it's probably rare to configure ESLint as the sole loader.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // option
            }
          },
          {
            loader: 'eslint-loader',
            option: {
              // option
            }
          }
        ]
      },
    ],
  },
  // ...
};

When used in combination, the order of declaration is important. If written as above, the loader will be processed starting with ESLint.

That said, if you want to strictly ensure `eslint-loader` runs before `babel-loader`, it should be configured as follows.

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  // ...
};

By adding `enforce: 'pre'`, you can ensure it runs first.

ABOUT OPTIONS

Here's a brief summary of the options. For details, please check the `eslint-loader` page.

By utilizing caching, you can reduce the time required for linting.

Use a formatter to automatically fix code that doesn't conform to coding rules.

type：String | function (default: stylish)

If an error occurs, it will cause the webpack build to fail.

type：boolean | object (default: false)

Here's how to write it using `outputReport` as an example. `outputReport` can further specify `filePath` and `formatter`.

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          outputReport: {
            filePath: 'checkstyle.xml',
            formatter: 'checkstyle',
          },
        },
      },
    ],
  },
};

RECOMMENDED JAVASCRIPT BOOKS

There's a lot of online information available for JavaScript, and Google search is very convenient, so you might not need to read books.

However, for those just starting out, I think reading one simple book will deepen your understanding. While there are good reference books, Google search is more convenient for copy-pasting, so perhaps they aren't necessary.

Enlightenment! JavaScript: The Essence of JavaScript Learned from Language Specifications

Highly recommended! You can learn JavaScript concepts that don't typically appear in Google searches. After finishing this book, I felt my coding skills had significantly improved.