Skip to content

从 vite-plugin-eslint 迁移

vite-plugin-eslint2gxmari007/vite-plugin-eslint 分叉而来,持续维护中,增加了新功能、更广泛的兼容性和错误修复。本指南帮助你完成迁移。

安装

sh
npm uninstall vite-plugin-eslint
npm install vite-plugin-eslint2 -D

更新导入

diff
- import eslint from 'vite-plugin-eslint'
+ import eslint from 'vite-plugin-eslint2'

选项变更

默认值变更

选项vite-plugin-eslintvite-plugin-eslint2
cachefalsetrue
include['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.vue', '**/*.svelte']['src/**/*.{js,jsx,ts,tsx,vue,svelte}']
exclude['**/node_modules/**']['node_modules', 'virtual:']

cache 默认值变更意味着缓存默认启用。include 默认值现在限定在 src/ 目录下——如果你的源文件在 src/ 之外,需要手动设置 include

移除的选项

选项替代方案
failOnError使用 emitErrorAsWarning(设为 true 将错误降级为警告,避免构建失败)
failOnWarning使用 emitWarningAsError(设为 true 将警告升级为错误,导致构建失败)

新增选项

选项默认值说明
testfalse是否在 test 模式(Vitest)下运行 ESLint
devtrue是否在 vite dev 下运行 ESLint
buildfalse是否在 vite build 下运行 ESLint
cacheLocation'.eslintcache'缓存文件路径
eslintPath'eslint'ESLint 自定义路径
lintInWorkerfalse在 worker 线程中校验以提升性能
lintOnStartfalse项目启动时校验所有匹配文件
lintDirtyOnlytruebuildStart 之外只校验修改过的文件
emitErrorAsWarningfalse将发现的错误作为警告输出
emitWarningAsErrorfalse将发现的警告作为错误输出

类型变更

选项vite-plugin-eslintvite-plugin-eslint2
formatterstring | (results) => stringstring

formatter 选项不再接受函数,只接受格式化器的名称或路径。

cacheLocation 行为

vite-plugin-eslintcacheLocation 默认为 Vite 的 cacheDir + '/.eslintcache'vite-plugin-eslint2 默认为项目根目录的 .eslintcache(遵循 ESLint 自身的默认值)。

行为变更

apply 钩子

vite-plugin-eslint 在所有模式下无条件运行。vite-plugin-eslint2 使用 apply 钩子控制插件的生效时机:

场景vite-plugin-eslintvite-plugin-eslint2
vite dev运行运行(dev: true
vite build运行不运行build: false
Vitest运行不运行test: false

如果需要在构建时校验,设置 build: true

ts
eslint({ build: true })

虚拟模块处理

vite-plugin-eslint2 强制忽略虚拟模块(virtual:\0 前缀、以及不包含 / 的模块 ID)。你不再需要手动排除它们。

版本兼容性

vite-plugin-eslintvite-plugin-eslint2
Vitev2 ~ v3v2 ~ v8
ESLintv7v7 ~ v10
Node>= 18

迁移后示例

ts
// vite.config.ts
import { defineConfig } from "vite";
import eslint from "vite-plugin-eslint2";

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

如果需要在构建时校验(匹配旧行为):

ts
export default defineConfig({
  plugins: [eslint({ build: true })],
});

推荐配置以获得最佳开发体验:

ts
export default defineConfig({
  plugins: [eslint({
    fix: true,
    lintInWorker: true,
    lintOnStart: true,
  })],
});