🚨 Stylelint plugin for Vite.
MIT License
Vite Stylelint plugin. Runs Stylelint in transform
hook by default.
Supports Vite v2 ~ v5. Requires node>=18
.
You may want Vite ESLint plugin.
npm install vite-plugin-stylelint -D
vite-plugin-stylelint
does not install and config Stylelint for you. You should handle these yourself.
npm install stylelint@^15 -D
npm install stylelint@^15 -D
npm install stylelint@^14 -D
npm install stylelint@^13 @types/stylelint@^13 -D
// vite.config.ts
import { defineConfig } from 'vite';
import stylelint from 'vite-plugin-stylelint';
export default defineConfig({
plugins: [stylelint(options)],
});
You can pass Stylelint shared options and Node.js API options to the plugin.
// vite.config.ts
import { defineConfig } from 'vite';
import stylelint from 'vite-plugin-stylelint';
export default defineConfig({
plugins: [
stylelint({
// recommend to enable auto fix
fix: true,
...,
}),
],
});
Additional options and explanations are listed below.
test
boolean
false
Run Stylelint under test
mode. See Command Line Interface and Configuring Vitest for more.
dev
boolean
true
Run Stylelint under serve
command. See Command Line Interface for more.
build
boolean
false
Run Stylelint under build
command. See Command Line Interface for more.
cache
boolean
true
Store the results of processed files when enabled. This is enabled by default to improve speed.
cacheLocation
string
.stylelintcache
Path to a file or directory for the cache location. .stylelintcache
is the default cache location of Stylelint.
include
string | string[]
['src/**/*.{css,scss,sass,less,styl,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 stylelint.lint 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 [email protected].
If you enable the lintOnStart
option, the plugin will also call stylelint.lint
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 [email protected] requirement.
If you disable the lintDirtyOnly
option, the plugin will use the option value as the call parameter every time it calls stylelint.lint
, which means that the option value also needs to fulfill the requirements of [email protected]
.
exclude
string | string[]
['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 stylelint.lint 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 [email protected].
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.
stylelintPath
string
'stylelint'
Path to Stylelint that will be used for linting. Use dynamic import under the hood. Read Vite server.fs options first.
formatter
StylelintFormatterType | StylelintFormatter
'string'
The name, the path or the function implementation of a formatter.
This is used to set a formatter in order to convert lint results to a human- or machine-readable string.
lintInWorker
boolean
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
boolean
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
boolean
true
Lint changed files only when running Stylelint except from buildStart
hook. This is enabled by default.
This plugin will lint include
option specified files when disabled.
chokidar
boolean
false
Run Stylelint in Chokidar change
event instead of transform
hook. This is disabled by default.
This plugin can lint style files imported by @import
when enable this option.
Recommend to enable lintOnStart
if you enable this one.
emitError
boolean
true
Emit found errors. This is enabled by default.
emitErrorAsWarning
boolean
false
Emit found errors as warnings. This is disabled by default but you may want it enabled when prototyping.
emitWarning
boolean
true
Emit found warnings. This is enabled by default.
emitWarningAsError
boolean
false
Emit found warnings as errors when enabled. This is disabled by default.
See examples.
See CHANGELOG.md.
Initially forked from gxmari007/vite-plugin-eslint.
MIT