This is a shareable config for Stylelint. All the rules and configurations are already set. Rules can be overridden if needed.
Include the config into your project:
npm install @bitfactory/stylelint-config --save-dev --save-exact
Then install the dependencies that the config needs:
npx install-peerdeps --dev --extra-args="-E" @bitfactory/stylelint-config
In your project, create a .stylelintrc.js
file with the following contents:
// NOTE: for now this does not work with ESM style modules, somehow `export default` gives errors.
// NOTE: it looks like this file is not checked by eslint with .cjs extension. For now keep it at .js.
/* eslint-disable-next-line unicorn/prefer-module */
module.exports = {
extends: ['@bitfactory/stylelint-config'],
};
To use this config with a PostCSS project, also install the following package:
npm install postcss-html --save-dev --save-exact
And set extends
to the following config:
module.exports = {
extends: ['@bitfactory/stylelint-config/postcss'],
};
The project does not have to use the
customSyntax
andoverrides
for postcss anymore. This is included in the config.
To use this config with a PostCSS with SCSS/SASS project, also install the following packages:
npm install postcss-html postcss-scss --save-dev --save-exact
And set extends
to the following config:
module.exports = {
extends: ['@bitfactory/stylelint-config/scss'],
};
To use this config with a SASS project, also install the following package:
npm install stylelint-scss --save-dev --save-exact
And set extends
to the following config:
module.exports = {
extends: ['@bitfactory/stylelint-config/sass'],
};
To turn off a rule, you can set the value of the rule to null
in your .stylelintrc.js
file:
module.exports = {
extends: ['@bitfactory/stylelint-config'],
rules: {
'declaration-no-important': null,
},
};
Or when you only need to turn off a rule for a specific line, use the /* stylelint-disable-line */
comment, followed by the rule:
.selector {
color: #fff !important; /* stylelint-disable-line declaration-no-important */
}
More about disabling Stylelint rules can be found here.
To use Stylelint in the command-line, add the following scripts to your projects package.json
:
{
"scripts": {
"stylelint": "stylelint '**/*.css'",
"stylelint:fix": "npm run stylelint -- --fix"
}
}
You can run the commands with:
$ npm run stylelint
$ npm run stylelint:fix
{
"scripts": {
"stylelint": "stylelint '**/*.scss'",
"stylelint:fix": "npm run stylelint -- --fix"
}
}
{
"scripts": {
"stylelint:vue": "stylelint '**/*.vue'",
"stylelint:vue:fix": "npm run stylelint:vue -- --fix"
}
}
You can run the commands with:
$ npm run stylelint:vue
$ npm run stylelint:vue:fix
For Stylelint to work, you need to set up your editor / IDE.
- Install the Stylelint extension
- Get linting 🚀
- Error Lens to get inline error messages
⚠️ If you have the Prettier extension enabled, make sure to disable the extension for your project's workspace. This is because Prettier's rules will conflict with ours.
Todo…
Stylelint is fixed on version 15.x.x
because in version 16.x.x
all the deprecated rules are removed and can not be used at all.
See the issue Stylelint v16 + Prettier config needed on this repository in GitHub.