1. Use npm to install stylelint and its standard configuration
:
npm install --save-dev stylelint stylelint-config-standard
2. Create a .stylelintrc.json
configuration file in the root of your project:
{
"extends": "stylelint-config-standard"
}
3. Run stylelint on, for example, all the CSS files in your project:
npx stylelint "**/*.css"
This will lint your CSS for possible errors and stylistic issues.
Now that you’re up and running, you’ll likely want to customize stylelint to meet your needs.
You’ll want to customize your configuration.
For example, you may want to use the popular:
stylelint-config-sass-guidelines
config if you write SCSSstylelint-order
plugin if you want to order things like propertiesYou’ll find more configs and plugins listed in awesome stylelint.
To further customize your stylelint configuration, you can adapt your:
We recommend you add rules that limit language features to your configuration, e.g. unit-allowed-list
, selector-class-pattern
and selector-max-id
. These are powerful rules that you can use to enforce non-stylistic consistency in your code.
You don’t have to use the Command Line Interface; you can also use the:
There are also integrations for editors, task-runners and others too. Our extension for Visual Studio Code is a popular choice that lets you see violations inline in your editor.