跳到主要内容

入门

You can quickly get started by extending a shared config.

检查 CSS​

You can extend our standard config to lint CSS.

1. 使用 npm 和 我们的 init 工具 安装 Stylelint 并创建配置：

npm init stylelint

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

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:

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"

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. 使用 npm 安装 Stylelint 及其 标准配置 和 Lit 自定义语法：

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

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

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

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

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