ESLint Plugin

The ESLint plugin is used to run ESLint checks during the compilation. The plugin has integrated eslint-webpack-plugin internally.

TIP

Due to the high overhead of ESLint, running ESLint checks may significantly increase the build time.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-eslint -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

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

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

Example Projects

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',
});

eslintPluginOptions

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

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'],
  },
});