Stylelint
Stylelint is a widely adopted linter, mainly for style files.
Installation
You have to install Stylelint first. Currently Stylelint v16 is supported.
npm install stylelint -D
yarn add stylelint -D
pnpm install stylelint -D
bun install stylelint -d
Configuration
ESM
// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { stylelint } from '@modyqyw/fabric';
// or
// import { stylelint } from '@modyqyw/fabric/stylelint';
export default stylelint();
CJS
// stylelint.config.cjs
// or stylelint.config.js without "type": "module" in package.json
const { stylelint } = require('@modyqyw/fabric');
// or
// const { stylelint } = require('@modyqyw/fabric/stylelint');
module.exports = stylelint();
CLI
Update your package.json
and add lint:stylelint
script.
{
"scripts": {
"lint:stylelint": "stylelint \"./**/*.{css,scss,vue}\" --fix --cache --aei --ignore-path=.gitignore"
}
}
Customization
Parameters
Passing parameters to the exported stylelint
method can customize, and the stylelint
method takes two parameters.
The first parameter is used for basic customization, you can pass either undefined
or an object. To explicitly enable or disable a plugin, you need to explicitly set the boolean value in the passed object.
The following plugins are currently supported:
- order - Based on stylelint-config-recess-order. Sort CSS properties. Enabled by default.
- scss - Based on stylelint-scss. Support SCSS. Enabled by default if you have sass installed.
- style - What style of configuration to use. By default
'recommended'
and can be'standard'
.
// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { hasScss, stylelint } from '@modyqyw/fabric';
export default stylelint({
// based on stylelint-config-recess-order
// enabled by default
order: true,
// based on stylelint-scss
// enabled by default if you have sass installed
scss: hasScss,
// what style of configuration to use
// by default `'recommended'`
// can be `'standard'`
style: 'recommended',
});
Potential conflicts
- stylelint-config-recess-order may conflict with prettier-plugin-css-order and prettier-plugin-css-order is disabled by default. If you want to enable prettier-plugin-css-order, see Prettier chapter Customization section and disabled stylelint-config-recess-order.
The second parameter is used for further customization, you can pass an object to override the generated configuration.
// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { stylelint } from '@modyqyw/fabric';
export default stylelint(undefined, {
rules: {
// rules that require customization
},
});
If you wish to add customization to the default configuration (e.g., support for LESS), you can do so as follows (you will need to install the dependencies yourself):
// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { stylelint } from '@modyqyw/fabric';
const defaultConfig = stylelint();
export default {
...defaultConfig,
rules: {
...defaultConfig.rules,
// rules that require customization
},
};
Potential conflicts
The configuration supports Vue, TailwindCSS and Module CSS by default. When customizing the rules, please adjust them carefully to avoid overriding them and causing errors.
Integration
VSC
Install the corresponding Stylelint plugin first.
Update user settings or workspace settings as appropriate.
{
// Disable the built-in CSS linter.
"css.validate": false,
// Disable the built-in LESS linter.
"less.validate": false,
// Disable the built-in SCSS linter.
"scss.validate": false,
// Languages that enable Stylelint snippets.
"stylelint.snippet": ["css", "scss", "vue"],
// Languages that ESLint validates.
"stylelint.validate": ["css", "scss", "vue"],
// Stylelint auto-fix after CSS, SCSS manual save.
"[css][scss]": {
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit",
},
},
// Stylelint auto-fix after Vue manual save.
"[vue]": {
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": "explicit",
},
},
}
WebStorm
WebStorm comes with Prettier, see VSC to tweak it yourself.
lint-staged
If you are using the lint-staged configuration provided by the package, see the lint-staged chapter.
If you are not, you can refer to the following configuration.
// lint-staged.config.mjs
// or lint-staged.config.js with "type": "module" in package.json
export default {
'*.{css,scss,vue}': 'stylelint --fix --cache --aei --ignore-path=.gitignore',
};