vite-plugin-eslint

1.8.1 verified Sat Apr 25 auth: no javascript

Integrates ESLint into Vite's build and dev server, providing real-time linting feedback in the terminal and browser overlay. Current stable version is 1.8.1, with a monthly release cadence. It runs ESLint on specified file types (JS, TS, Vue, Svelte) and supports caching, auto-fix, and granular error/warning configuration. Differentiates from eslint-webpack-plugin by being Vite-native and simpler to configure.

Common errors

error Error: Cannot find module 'vite-plugin-eslint' ↓

cause Package not installed or missing in node_modules.

fix

Run npm install vite-plugin-eslint --save-dev or yarn add vite-plugin-eslint -D.

error TypeError: eslint is not a function ↓

cause Using named import `{ eslint }` instead of default import.

fix

Replace import { eslint } from 'vite-plugin-eslint' with import eslint from 'vite-plugin-eslint'.

error Failed to load ESLint config ... ↓

cause ESLint configuration file missing or invalid.

fix

Create a valid .eslintrc.* or eslint.config.js file in your project root.

Warnings

gotcha The `cache` option is still marked `Beta` and may not correctly detect file changes in all scenarios. ↓

fix Disable cache if you encounter stale lint results: set `cache: false`.

gotcha Setting `lintOnStart: true` can significantly slow down startup on large projects as it lints all included files. ↓

fix Avoid enabling `lintOnStart` unless necessary; consider running lint as a separate command.

deprecated Some ESLint options like `useEslintrc` and `overrideConfigFile` are passed directly but may be deprecated in ESLint >=9. ↓

fix Refer to ESLint's flat config migration; consider using `eslint.config.js` instead of `.eslintrc.*`.

gotcha The plugin uses the ESLint class which may change behavior between ESLint v7 and v8/v9. ↓

fix Ensure your ESLint version is compatible; test with your target ESLint version.

Install

npm install vite-plugin-eslint

yarn add vite-plugin-eslint

pnpm add vite-plugin-eslint

Imports

default
wrong
```
const eslint = require('vite-plugin-eslint')
```
correct
```
import eslint from 'vite-plugin-eslint'
```
Package exports a default function; CommonJS require is not available in ESM contexts.

eslint

wrong

import { eslint } from 'vite-plugin-eslint'

correct

import eslint from 'vite-plugin-eslint'

Do not use named import; the package only has a default export.

EsLintOptions
```
import type { EsLintOptions } from 'vite-plugin-eslint'
```
TypeScript users can import the options type for type safety.

Quickstart

Configures vite-plugin-eslint with common options; linting runs during dev and build.

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

export default defineConfig({
  plugins: [
    eslint({
      cache: false,
      fix: true,
      include: ['src/**/*.ts', 'src/**/*.vue'],
      exclude: ['node_modules'],
      formatter: 'stylish',
      emitWarning: true,
      emitError: true,
      failOnWarning: false,
      failOnError: true,
      lintOnStart: false,
    }),
  ],
});