vite-plugin-eslint2

Vite ESLint plugin. Runs ESLint in transform hook by default.

Supports Vite v2 ~ v5. Requires node>=18.

You may want Vite Stylelint plugin.

Install

npm install vite-plugin-eslint2 -D

vite-plugin-eslint2 does not install and config ESLint for you. You should handle these yourself.

ESLint@8

npm install eslint@^8 @types/eslint@^8 -D

ESLint@7

npm install eslint@^7 @types/eslint@^7 -D

Usage

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

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

Options

You can pass ESLint Node.js API constructor options to the plugin.

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

export default defineConfig({
  plugins: [
    eslint({
      // recommend to enable auto fix
      fix: true,
      ...,
    }),
  ],
});

Additional options and explanations are listed below.

test

• Type: boolean
• Default: false

Run ESLint under test mode. See Command Line Interface and Configuring Vitest for more.

dev

• Type: boolean
• Default: true

Run ESLint under serve command. See Command Line Interface for more.

build

• Type: boolean
• Default: false

Run ESLint under build command. See Command Line Interface for more.

cache

• Type: boolean
• Default: true

Store the results of processed files when enabled. This is enabled by default to improve speed.

cacheLocation

• Type: string
• Default: .eslintcache

Path to a file or directory for the cache location. .eslintcache is the default cache location of ESLint.

include

• Type: string | string[]
• Default: ['src/**/*.{js,jsx,ts,tsx,vue,svelte,astro}']

This option specifies the files you want to lint. You don't need to change it in most cases, unless you're using a framework like Nuxt, or if the include and exclude ranges overlap.

If you're using the plugin defaults, the plugin will only call eslint.lintFiles in the transform hook. The option value will be used to create a filter to determine if the call should be made and the parameter of the call, which means that the option value needs to fulfill the requirements of picomatch@2.3.1.

If you enable the lintOnStart option, the plugin will also call eslint.lintFiles in the buildStart hook. The option value will not be used to create a filter, but will be used directly as the call parameter, which means that the option value also needs to fulfill the minimatch@3.1.2 requirement.

If you disable the lintDirtyOnly option, the plugin will use the option value as the call parameter every time it calls eslint.lintFiles, which means that the option value also needs to fulfill the requirements of minimatch@3.1.2.

exclude

• Type: string | string[]
• Default: ['node_modules', 'virtual:']

This option specifies the files you don't want to lint. You don't need to change it in most cases, unless you're using a framework such as Nuxt, or if the include and exclude ranges overlap.

If you're using the plugin defaults, the plugin will only call eslint.lintFiles in the transform hook. The option value will be used to create a filter to determine if the call should be made and the parameter of the call, which means that the option value needs to fulfill the requirements of picomatch@2.3.1.

If you enable the lintOnStart option or disable the lintDirtyOnly option, the option value will not take effect. You need to change include value to include this option value.

eslintPath

• Type: string
• Default: 'eslint'

Path to ESLint that will be used for linting. Use dynamic import under the hood. Read vite server.fs options first.

Set 'eslint/use-at-your-own-risk' if you want to use the flat config system in ESLint v8. Place an eslint.config.js file in the root of your project or set the ESLINT_USE_FLAT_CONFIG environment variable to true and pass the option overrideConfigFile to the plugin if you are using other config files. You can learn more from Flat config rollout plans and Configuration Files (New).

formatter

• Type: string
• Default: 'stylish'

The name or the path of a formatter.

This is used to load a formatter in order to convert lint results to a human- or machine-readable string.

lintInWorker

• Type: boolean
• Default: false

Lint in worker. This is disabled by default.

When lint in worker, Vite build process will be faster. Vite build process will not be stopped, even with errors shown in terminal.

It is similar with vite-plugin-checker, but vite-plugin-checker can show you errors and warnings in browsers.

lintOnStart

• Type: boolean
• Default: false

Lint include option specified files once in buildStart hook to find potential errors. This is disabled by default.

This will significantly slow down Vite first starting if you have no caches and don't enable lintInWorker.

lintDirtyOnly

• Type: boolean
• Default: true

Lint changed files only when running ESLint except from buildStart hook. This is enabled by default.

This plugin will lint include option specified files when disabled.

chokidar

• Type: boolean
• Default: false

Run ESLint in Chokidar change event instead of transform hook. This is disabled by default.

Recommend to enable lintOnStart if you enable this one.

emitError

• Type: boolean
• Default: true

Emit found errors. This is enabled by default.

emitErrorAsWarning

• Type: boolean
• Default: false

Emit found errors as warnings. This is disabled by default but you may want it enabled when prototyping.

emitWarning

• Type: boolean
• Default: true

Emit found warnings. This is enabled by default.

emitWarningAsError

• Type: boolean
• Default: false

Emit found warnings as errors when enabled. This is disabled by default.

FAQ

Do I need this plugin?

You don't need this in most cases.

It is usual to use eslint-webpack-plugin in Webpack. And this plugin does almost the same in Vite.

However, our IDE is already probably giving all the info we need. We only need to add ESLint plugin in VSCode. WebStorm already includes the functionality. We can also run ESLint in CI or CLI.

Since we have these ways to run ESLint, it is unnecessary to run ESLint in Vite, which means we don't need this plugin in most cases.

If you really want to check errors and warnings, try enable lintInWorker option, which keeps Vite speed and prints in console. Or try vite-plugin-checker, which prints in browser.

What's the difference between gxmari007/vite-plugin-eslint and this project?

This project is initially forked from gxmari007/vite-plugin-eslint and named @modyqyw/vite-plugin-eslint. Because the project looked like dead at that time, leaving issues and PRs. I sent an email to the author but I got no response.

I add some functions to meet my needs, like eslint@8 support, eslintPath option, lintInWorker option, lintOnStart option, lintDirtyOnly option, ignore virtual modules by default, .etc

I think vite-plugin-eslint is dead. So I rename this project to vite-plugin-eslint2 in early 2023, hoping I can provide a better DX. Feel free to choose one.

Cache is broken

• Disable cache option.
• Or delete the cache file (default .eslintcache), fix errors manully and restart Vite.

This problem should only happens when starting Vite with ESLint errors. Have a better solution? PR welcome. :)

Vite is slow when using this plugin

• Try enable lintInWorker option.
• Or try vite-plugin-checker.
• Or run ESLint directly besides Vite.

Examples

See examples.

CHANGELOG

See CHANGELOG.md.

Acknowledge

Initially forked from gxmari007/vite-plugin-eslint.

License

MIT

Sponsors