简体中文

ESLint 插件

Source

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 了解可用选项。

类型： Options
默认值：

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

ESLint 插件#

快速开始#

安装插件#

注册插件#

示例项目#

选项#

enable#

eslintPluginOptions#