get-started.md

Getting started

You can lint:

• CSS files by using our standard config
• everything else by using extensions written by the community

Linting CSS files

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 with the following content:

{
  "extends": "stylelint-config-standard"
}

3. Run Stylelint on all the CSS files in your project:

npx stylelint "**/*.css"

If you use a pretty printer alongside Stylelint, you should turn off any conflicting rules. For example, you can use Prettier's shared config to do that:

npm install --save-dev stylelint-config-prettier

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

Linting everything else

You'll need to use a custom syntax written by the community.

Using a community shared config

We recommend extending a shared config that includes the appropriate syntax for your preferred language or library. For example, you can extend the stylelint-config-standard-scss shared config to lint SCSS.

1. Use npm to install Stylelint and the shared config:

npm install --save-dev stylelint stylelint-config-standard-scss

2. Create a .stylelintrc.json configuration file in the root of your project with the following content:

{
  "extends": "stylelint-config-standard-scss"
}

3. Run Stylelint on all the SCSS files in your project:

npx stylelint "**/*.scss"

This config includes the postcss-scss syntax, configures the built-in rules for SCSS, and includes the stylelint-scss plugin (a collection of rules specific to SCSS).

If you use Prettier alongside Stylelint, you should use their shared config for SCSS:

{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-prettier-scss"
  ]
}

Other shared configs include:

• stylelint-config-html
• stylelint-config-recommended-vue

Using a custom syntax directly

If a shared config isn't available for your preferred language or library, then you can install the appropriate custom syntax yourself and use the customSyntax option to configure it.

For example, to lint the CSS inside of Lit elements.

1. Use npm to install Stylelint, its standard configuration and the postcss-lit:

npm install --save-dev stylelint stylelint-config-standard postcss-lit

2. Create a .stylelintrc.json configuration file in the root of your project with the following content:

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-lit"
}

Other PostCSS syntaxes known to be compatible with Stylelint include:

• postcss-markdown
• postcss-less
• postcss-sass
• sugarss

Using more than one custom syntax

You can use the overrides property. For example, to lint CSS files and the CSS within Lit Elements you can update your configuration object to include:

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["**/*.{js}"],
      "customSyntax": "postcss-lit"
    }
  ]
}

You can then use Stylelint to lint both CSS and JavaScript files:

npx stylelint "**/*.{css,js}"

More configs are listed in awesome stylelint.

Customize

You can further customize Stylelint to your specific needs.

Your configuration

You can adapt your:

• rules
• plugins

We recommend you add more of the rules that enforce conventions to your configuration, e.g. unit-allowed-list and selector-max-id. These are powerful rules that you can use to enforce non-stylistic consistency in your code.

You can add plugins written by the community to lint more things. For example, you may want to use the stylelint-csstree-validator plugin to validate property and value pairs.

You'll find more plugins listed in awesome stylelint.

Your usage

You don't have to use the Command Line Interface; you can also use the:

• Node API
• PostCSS plugin

There are also integrations for editors, task-runners and others too. Our official extension for Visual Studio Code is a popular choice that lets you see problems inline in your editor.