入门

You can lint:

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

##检查 CSS 文件

1. 使用 npm 安装 Stylelint 及其标准配置：

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

2. 在项目的根目录中创建 .stylelintrc.json 配置文件，并写入以下内容：

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

3. 让 Stylelint 处理项目中的所有 CSS 文件：

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. 使用 npm 安装 Stylelint 和共享配置：

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

2. 在项目的根目录中创建 .stylelintrc.json 配置文件并写入以下内容：

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

3. 让 Stylelint 处理项目中的所有 SCSS 文件：

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:

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. 使用 npm 安装 Stylelint 及其标准配置和 postcss-lit：

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

2. 在项目的根目录下创建 .stylelintrc.json 配置文件并写入以下内容：

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

已知与 Stylelint 相兼容的 PostCSS 语法包括：

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

然后你就可以使用 Stylelint 来同时处理 CSS 和 JavaScript 文件了：

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

More configs are listed in awesome stylelint.

自定义

你可以根据自己的具体需要进一步自定义 Stylelint。

你自己的配置

You can adapt your:

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:

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.

入门

Linting everything else​

Using a community shared config​

Using a custom syntax directly​

Using more than one custom syntax​

自定义​

你自己的配置​

Your usage​