ESLint 插件

ESLint 插件用于在编译过程中运行 ESLint 检查,插件内部集成了 eslint-webpack-plugin

TIP

由于 ESLint 的开销较大,运行 ESLint 检查可能会使构建时间显著增加。

快速开始

安装插件

你可以通过如下的命令安装插件:

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

注册插件

你可以在 rsbuild.config.ts 文件中注册插件:

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

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

示例项目

选项

enable

是否开启 ESLint 检查。

  • 类型: boolean
  • 默认值: true
  • 示例:

禁用 ESLint 检查:

pluginEslint({
  enable: false,
});

仅在生产环境构建时开启检查:

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

仅在开发环境构建时开启检查:

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

eslintPluginOptions

修改 eslint-webpack-plugin 的选项,请参考 eslint-webpack-plugin - README 了解可用选项。

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

eslintPluginOptions 对象会与默认配置对象进行浅合并。

  • 比如开启 ESLint v9 的 flat config:
pluginEslint({
  eslintPluginOptions: {
    cwd: __dirname,
    configType: 'flat',
  },
});
  • 比如通过 exclude 排除一些文件:
pluginEslint({
  eslintPluginOptions: {
    exclude: ['node_modules', 'dist', './src/foo.js'],
  },
});
  • 比如扩展 extensions 来校验 .vue.svelte 文件:
pluginEslint({
  eslintPluginOptions: {
    extensions: ['js', 'jsx', 'mjs', 'cjs', 'ts', 'tsx', 'mts', 'cts', 'vue'],
  },
});