Awesome

@rsbuild/plugin-eslint

An Rsbuild plugin to run ESLint checks during the compilation.

The plugin has integrated eslint-rspack-plugin internally.

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

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.