Skip to main content

入门

¥Getting started

你可以通过扩展共享配置来快速开始。

¥You can quickly get started by extending a shared config.

CSS 代码检查​

¥Linting CSS

你可以将我们的 标准配置 扩展为 lint CSS。

¥You can extend our standard config to lint CSS.

npm init stylelint
npx stylelint "**/*.css"

一旦启动并运行，你就可以 customize Stylelint。

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

Linting 类 CSS 语言和容器内的 CSS​

¥Linting CSS-like languages and CSS within containers

你可以将社区配置扩展到 lint：

¥You can extend a community config to lint:

  • 类似 CSS 的语言，例如 SCSS、Sass 及更少

    ¥CSS-like languages, e.g. SCSS, Sass and Less

  • 容器内的 CSS，例如 在 HTML、CSS-in-JS 和 Vue SFC 中

    ¥CSS within containers, e.g. in HTML, CSS-in-JS and Vue SFCs

例如，要检查 SCSS，你可以扩展 SCSS 社区配置。它包括：

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

npm install --save-dev stylelint stylelint-config-standard-scss
{
  "extends": "stylelint-config-standard-scss"
}
npx stylelint "**/*.scss"

你将在 很棒的 Stylelint 中找到更多社区配置。

¥You'll find more community configs in Awesome Stylelint.

直接使用自定义语法​

¥Using a custom syntax directly

如果共享配置不适用于你的首选语言或容器，你可以安装适当的自定义语法并自行使用 customSyntax 选项。

¥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.

例如，对 点亮元素 内部的 CSS 进行 lint 检查。

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

npm install --save-dev stylelint stylelint-config-standard postcss-lit
{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-lit"
}
npx stylelint "**/*.js"

你将在 很棒的 Stylelint 中找到更多自定义语法。

¥You'll find more custom syntaxes in Awesome Stylelint.

使用多种自定义语法​

¥Using more than one custom syntax

如果要对多种语言或容器进行 lint 检测，可以使用 overrides 属性。

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

例如，要检查 CSS 文件和 Lit Elements 中的 CSS，你可以将配置更新为：

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

然后在 CSS 和 JavaScript 文件上运行 Stylelint：

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

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