get-started.md

Getting started

You can quickly get started by extending a shared config.

Linting CSS

You can extend our standard config to lint CSS.

1. Use npm and our init tool to install Stylelint and the config:

npm init stylelint

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

npx stylelint "**/*.css"

Once you're up and running, you can customize Stylelint.

Linting CSS-like languages and CSS within containers

You can extend a community config to lint:

• CSS-like languages, e.g. SCSS, Sass and Less
• CSS within containers, e.g. in HTML, CSS-in-JS and Vue SFCs

For example, to lint SCSS you can extend the SCSS community config. It includes the:

• SCSS syntax - a custom syntax to parse SCSS
• SCSS plugin - a set of custom rules for SCSS

1. Use npm to install Stylelint and the 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"

You'll find more community configs in Awesome Stylelint.

Using a custom syntax directly

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

For example, to lint CSS inside of Lit elements.

1. Use npm to install Stylelint, our standard config and the Lit custom syntax:

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"
}

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

npx stylelint "**/*.js"

You'll find more custom syntaxes in Awesome Stylelint.

Using more than one custom syntax

If you want to lint more than one language or container, you can use the overrides property.

For example, to lint CSS files and the CSS within Lit Elements you can update your configuration to:

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

And then run Stylelint on both your CSS and JavaScript files:

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