eslint-rspack-plugin

This plugin runs ESLint during Rspack compilation to detect issues in your JavaScript code. In watch mode, it re-runs ESLint on files changed by Rspack.

You may find it more efficient to avoid using the eslint-rspack-plugin, as running ESLint during the build can lead to longer build times. A separate lint command usually offers a better workflow.

Versions

• 5.x: Supports ESLint 9/10, see v4 -> v5 for migration guide.
• 4.x: Supports ESLint 8/9/10, see 4.x README for usage guide.

Getting Started

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

# pnpm
pnpm add -D eslint-rspack-plugin

# npm
npm install -D eslint-rspack-plugin

# yarn
yarn add -D eslint-rspack-plugin

# bun
bun add -D eslint-rspack-plugin

You also need to install eslint >= 9, if you haven't already:

# pnpm
pnpm add -D eslint

# npm
npm install -D eslint

# yarn
yarn add -D eslint

# bun
bun add -D eslint

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

import ESLintPlugin from 'eslint-rspack-plugin';

export default {
  plugins: [new ESLintPlugin()],
};

Options

You can pass ESLint options.

Note

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 eslint.config.js. See the ESLint docs for more details.

cache

• Type:

type cache = boolean;

• Default: true

The cache is enabled by default to decrease execution time.

cacheLocation

• Type:

type cacheLocation = string;

• Default: node_modules/.cache/eslint-rspack-plugin/.eslintcache

Specify the path to the cache location. Can be a file or a directory.

configType

• Type:

type configType = 'flat' | 'eslintrc';

• Default: flat

Specify the type of configuration to use with ESLint.

• flat is the current standard configuration format.
• eslintrc is the legacy configuration format and has been officially deprecated.

The flat configuration format is explained in its own documentation.

context

• Type:

type context = string;

• Default: compiler.context

A string indicating the root of your files.

eslintPath

• Type:

type eslintPath = 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 don't have to install eslint.

extensions

• Type:

type extensions = string | Array<string>;

• Default: 'js'

Specify extensions that should be checked.

Only works when configType is eslintrc. For flat config, use files option instead.

exclude

• Type:

type exclude = string | Array<string>;

• Default: 'node_modules'

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

resourceQueryExclude

• Type:

type resourceQueryExclude = string | RegExp | Array<string | RegExp>;

• Default: []

Exclude modules from linting when their resource query matches one of the provided patterns. The resource query is the part after ? in an import, such as raw in import './file.js?raw'.

String values are converted to RegExp. Use anchors when you need an exact match.

import ESLintPlugin from 'eslint-rspack-plugin';

export default {
  plugins: [
    new ESLintPlugin({
      resourceQueryExclude: 'raw',
    }),
  ],
};

You can also mix strings and RegExp values:

import ESLintPlugin from 'eslint-rspack-plugin';

export default {
  plugins: [
    new ESLintPlugin({
      resourceQueryExclude: [/media/, '^raw$'],
    }),
  ],
};

files

• Type:

type files = string | Array<string>;

• Default: null

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

fix

• Type:

type fix = boolean;

• Default: false

Will enable ESLint autofix feature.

Be careful: this option will change source files.

formatter

• Type:

type formatter = string| (
  results:  Array<import('eslint').ESLint.LintResult>,
  data?: import('eslint').ESLint.LintResultData | undefined
) => string

• 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:

type lintDirtyModulesOnly = boolean;

• Default: false

Lint only changed files, skip lint on start.

lintAllFiles

• Type:

type lintAllFiles = boolean;

• Default: false

Lint all files matching the files and extensions patterns, regardless of whether they are part of the compilation.

Tip

This option is particularly useful for multi-environment builds (e.g., Rsbuild/Rspack with separate client and server environments) where you want to ensure all files in your codebase are linted, not just the ones included in each environment's dependency graph.

Enabling this option will run a single ESLint instance to check all files rather than running separate ESLint instances for each environment.

severity

• Type:

type severity = {
  error?: 'error' | 'warning' | 'off';
  warning?: 'error' | 'warning' | 'off';
};

• Default:

{
  error: 'error',
  warning: 'warning',
}

Controls how ESLint diagnostics are emitted to Rspack.

Diagnostics emitted as compilation.errors are treated as build errors by Rspack and make the build fail. Diagnostics emitted as compilation.warnings are printed as warnings and do not fail the build.

• error: 'error': emit ESLint errors as compilation.errors.
• error: 'warning': emit ESLint errors as compilation.warnings.
• error: 'off': do not emit ESLint errors.
• warning: 'warning': emit ESLint warnings as compilation.warnings.
• warning: 'error': emit ESLint warnings as compilation.errors.
• warning: 'off': do not emit ESLint warnings.

Examples:

Use the default behavior:

new ESLintPlugin({
  severity: {
    error: 'error',
    warning: 'warning',
  },
});

Downgrade ESLint errors so they are still shown but do not fail the build:

new ESLintPlugin({
  severity: {
    error: 'warning',
  },
});

Treat ESLint warnings as build errors:

new ESLintPlugin({
  severity: {
    warning: 'error',
  },
});

Ignore ESLint warnings:

new ESLintPlugin({
  severity: {
    warning: 'off',
  },
});

Ignore ESLint errors:

new ESLintPlugin({
  severity: {
    error: 'off',
  },
});

outputReport

• Type:

type outputReport =
  | boolean
  | {
      filePath?: string | undefined;
      formatter?:
        | (
            | string
            | ((
                results: Array<import('eslint').ESLint.LintResult>,
                data?: import('eslint').ESLint.LintResultData | undefined,
              ) => string)
          )
        | undefined;
    };

• 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 Rspack 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.

Credits

This plugin was forked from the excellent eslint-webpack-plugin. Many thanks to the original authors for their great work.

License

MIT