The Stylelint shareable config designed for my personal projects.
Use it as is or as a foundation for your own configuration file.
Install the package and stylelint
in your project:
npm i -D stylelint @koshikishi/stylelint-config
This config:
- extends the stylelint-config-standard-scss shared config
- bundles the @stylistic/stylelint-plugin to replace removed stylistic rules
These are direct dependencies that will be installed automatically.
Set your stylelint
config to:
{
"extends": "@koshikishi/stylelint-config"
}
Add a "rules"
key to your config, then add your overrides and additions there.
For example, to add the color-function-notation
rule and turn off the selector-class-pattern
rule:
{
"extends": "@koshikishi/stylelint-config",
"rules": {
"color-function-notation": "modern",
"selector-class-pattern": null
}
}
You can also override the stylistic rules from @stylistic/stylelint-plugin
and SCSS-specific rules:
{
"extends": "@koshikishi/stylelint-config",
"rules": {
"@stylistic/indentation": 4,
"scss/declaration-nested-properties": null
}
}
- Install the Stylelint extension for VS Code.
- Install
stylelint
and this config in your project following the Installation section. - Add a Stylelint configuration file (
stylelint.config.js
or.stylelintrc.*
) and extend it with this shareable config following the Usage section.