Vite ESLint plugin. Runs ESLint in transform
hook by default.
Supports Vite v2 ~ v5. Requires node>=18
.
You may want Vite Stylelint plugin.
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
// vite.config.ts
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint2';
export default defineConfig({
plugins: [eslint(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.
- Type:
boolean
- Default:
false
Run ESLint under test
mode. See Command Line Interface and Configuring Vitest for more.
- Type:
boolean
- Default:
true
Run ESLint under serve
command. See Command Line Interface for more.
- Type:
boolean
- Default:
false
Run ESLint under build
command. See Command Line Interface for more.
- Type:
boolean
- Default:
true
Store the results of processed files when enabled. This is enabled by default to improve speed.
- Type:
string
- Default:
.eslintcache
Path to a file or directory for the cache location. .eslintcache
is the default cache location of ESLint.
- Type:
string | string[]
- Default:
['src/**/*.{js,jsx,ts,tsx,vue,svelte}']
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
.
- 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.
- 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).
- 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.
- 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.
- 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
.
- 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.
- 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.
- Type:
boolean
- Default:
true
Emit found errors. This is enabled by default.
- Type:
boolean
- Default:
false
Emit found errors as warnings. This is disabled by default but you may want it enabled when prototyping.
- Type:
boolean
- Default:
true
Emit found warnings. This is enabled by default.
- Type:
boolean
- Default:
false
Emit found warnings as errors when enabled. This is disabled by default.
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.
See examples.
See CHANGELOG.md.
Initially forked from gxmari007/vite-plugin-eslint.
MIT