Using ESLint with Webpack 4 and JavaScript Standard Style guide

ESLint installation

Install eslint from npm, if you haven't already:

npm install eslint --save-dev

• more about ESLint

Set up a configuration file:

npx eslint --init

This command will run the ESLint CLI

Note:

We choose the Standard style guide in the prompt "? Which style guide do you want to follow?"

• more about JavaScript Standard Style

This will creates the eslintrc.js into the root directory

Ignoring files

We tell ESLint to ignore specific files and directories by creating an .eslintignore file:

touch .eslintignore

• more about Ignoring Files and Directories

In addition we configure the .eslintignore file:

# /node_modules/* and /bower_components/* in the project root are ignored by default

# Ignore built files except build/index.js
#build/*
#!build/index.js

# Ignore dist folder with all files inside
dist/*

Using ESLint with Webpack

Install eslint-loader from npm:

npm install eslint-loader --save-dev

• more about eslint-loader

Usage:

we add eslint-loader into the webpack configuration file:

webpack.config.js

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

That's it !

Author:

• Thomas G. aka Drozerah - Github

License:

• ISC