@rsbuild/plugin-eslint

An Rsbuild plugin to run ESLint checks during the compilation.

The plugin has integrated eslint-rspack-plugin internally.

We do not recommend using the @rsbuild/plugin-eslint plugin, as running ESLint during the build process will significantly increase the build time. Instead, we recommend using a separate lint command to run ESLint checks.

Usage

Install:

npm add @rsbuild/plugin-eslint -D

Add plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginEslint } from "@rsbuild/plugin-eslint";

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

Example Projects

• React + ESLint project
• Vue 3 + ESLint project

Options

enable

Whether to enable ESLint checking.

• Type: boolean
• Default: true
• Example:

Disable ESLint checking:

pluginEslint({
  enable: false,
});

Enable ESLint checking only during production builds:

pluginEslint({
  enable: process.env.NODE_ENV === "production",
});

Enable ESLint checking only during development builds:

pluginEslint({
  enable: process.env.NODE_ENV === "development",
});

environments

Control which environments to run ESLint on when using Rsbuild's multi-environment builds.

• Type: 'all' | boolean | string[]
• Default: false
• Example:

By default, ESLint only runs on the first environment to avoid running multiple times:

pluginEslint({
  environments: false // (default)
});

Run ESLint on all environments:

pluginEslint({
  environments: 'all',
  // or
  environments: true,
});

Run ESLint on specific environments by name:

pluginEslint({
  environments: ['web', 'node'],
});

This is useful when different environments have different entry points and you want to ensure all files are linted. Note that when set to 'all' or true, ESLint will run separately for each environment, which may increase build time.

eslintPluginOptions

To modify the options of eslint-rspack-plugin, please refer to eslint-rspack-plugin - README to learn about available options.

• Type: Options
• Default:

const defaultOptions = {
  extensions: ["js", "jsx", "mjs", "cjs", "ts", "tsx", "mts", "cts"],
  exclude: [
    "node_modules",
    "dist", // -> rsbuildConfig.output.distPath.root
  ],
};

The eslintPluginOptions object will be shallowly merged with the default configuration object.

• For example, enable ESLint v9's flat config:

pluginEslint({
  eslintPluginOptions: {
    cwd: __dirname,
    configType: "flat",
  },
});

• For example, exclude some files using exclude:

pluginEslint({
  eslintPluginOptions: {
    exclude: ["node_modules", "dist", "./src/foo.js"],
  },
});

• Extend extensions to validate .vue or .svelte files:

pluginEslint({
  eslintPluginOptions: {
    extensions: ["js", "jsx", "mjs", "cjs", "ts", "tsx", "mts", "cts", "vue"],
  },
});

License

MIT.