eslint-webpack-plugin

What is eslint-webpack-plugin?

The eslint-webpack-plugin is a plugin for webpack that utilizes ESLint to identify and report on patterns found in ECMAScript/JavaScript code. It is intended to help developers adhere to a consistent code style and find and fix problems in their JavaScript code.

What are eslint-webpack-plugin's main functionalities?

Linting on Build

Automatically lints your JavaScript files when you run your webpack build. The 'options' object can be used to customize the behavior of the plugin.

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ... other webpack configuration settings ...
  plugins: [new ESLintPlugin(options)],
};

Automatic Fixing

The plugin can be configured to automatically fix certain issues in your code as it lints. This is done by setting the 'fix' option to true.

new ESLintPlugin({ fix: true })

Customizable Linting

You can customize which files are linted, where the linting occurs, whether to cache results, and whether to fail the build on a lint error. You can also enable multi-threaded linting for performance.

new ESLintPlugin({
  extensions: ['js', 'jsx'],
  exclude: ['node_modules'],
  context: 'src',
  cache: true,
  cacheLocation: 'path/to/cache',
  failOnError: false,
  threads: true,
})

Other packages similar to eslint-webpack-plugin

ts-loader

The ts-loader package is a TypeScript loader for webpack. It is similar to eslint-webpack-plugin in that it integrates with webpack to process files, but it focuses on compiling TypeScript files rather than linting JavaScript files.

stylelint-webpack-plugin

This plugin is similar to eslint-webpack-plugin but is designed for linting CSS and SCSS files with stylelint instead of linting JavaScript with ESLint.

prettier-webpack-plugin

The prettier-webpack-plugin is a webpack plugin that formats your code using Prettier. While eslint-webpack-plugin focuses on identifying and reporting code quality issues, prettier-webpack-plugin focuses on code formatting and style.

README

eslint-webpack-plugin

This plugin uses eslint to find and fix problems in your JavaScript code

Getting Started

To begin, you'll need to install eslint-webpack-plugin:

npm install eslint-webpack-plugin --save-dev

Note: You also need to install eslint >= 7 from npm, if you haven't already:

npm install eslint --save-dev

Then add the plugin to your webpack config. For example:

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

Options

You can pass eslint options.

Note that the config option you provide will be passed to the ESLint class. This is a different set of options than what you'd specify in package.json or .eslintrc. See the eslint docs for more details.

Warning: In eslint-webpack-plugin version 1 the options were passed to the now deprecated CLIEngine.

context

• Type: String
• Default: compiler.context

A string indicating the root of your files.

eslintPath

• Type: String
• Default: eslint

Path to eslint instance that will be used for linting. If the eslintPath is a folder like a official eslint, or specify a formatter option. now you dont have to install eslint.

extensions

• Type: String|Array[String]
• Default: 'js'

Specify extensions that should be checked.

exclude

• Type: String|Array[String]
• Default: 'node_modules'

Specify the files and/or directories to exclude. Must be relative to options.context.

files

• Type: String|Array[String]
• Default: null

Specify directories, files, or globs. Must be relative to options.context. Directories are traveresed recursively looking for files matching options.extensions. File and glob patterns ignore options.extensions.

fix

• Type: Boolean
• Default: false

Will enable ESLint autofix feature.

Be careful: this option will change source files.

formatter

• Type: String|Function
• Default: 'stylish'

Accepts a function that will have one argument: an array of eslint messages (object). The function must return the output as a string. You can use official eslint formatters.

lintDirtyModulesOnly

• Type: Boolean
• Default: false

Lint only changed files, skip lint on start.

threads

• Type: Boolean | Number
• Default: false

Will run lint tasks across a thread pool. The pool size is automatic unless you specify a number.

Errors and Warning

By default the plugin will auto adjust error reporting depending on eslint errors/warnings counts. You can still force this behavior by using emitError or emitWarning options:

emitError

• Type: Boolean
• Default: true

The errors found will always be emitted, to disable set to false.

emitWarning

• Type: Boolean
• Default: true

The warnings found will always be emitted, to disable set to false.

failOnError

• Type: Boolean
• Default: true

Will cause the module build to fail if there are any errors, to disable set to false.

failOnWarning

• Type: Boolean
• Default: false

Will cause the module build to fail if there are any warnings, if set to true.

quiet

• Type: Boolean
• Default: false

Will process and report errors only and ignore warnings, if set to true.

outputReport

• Type: Boolean|Object
• Default: false

Write the output of the errors to a file, for example a checkstyle xml file for use for reporting on Jenkins CI.

The filePath is an absolute path or relative to the webpack config: output.path. You can pass in a different formatter for the output file, if none is passed in the default/configured formatter will be used.

Changelog

Changelog

License

MIT

Changelog

3.0.1 (2021-07-20)

Bug Fixes

• crash with ERR_REQUIRE_ESM error (26b4db3)