ESLint Plugin#

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

Quick Start#

Install Plugin#

You can install the plugin using the following command:

npm add @rsbuild/plugin-eslint -D

Register Plugin#

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

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

eslintPluginOptions#

To modify the options of eslint-webpack-plugin, please refer to eslint-webpack-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'],
  },
});