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

npx 命令与 npm 打包在一起，允许你运行本地安装的工具。本指南的其余部分将省略 npx，但如果你不想全局安装，可以使用它来运行 Stylelint。

¥[!NOTE] The npx command, which is bundled with npm, allows you to run locally installed tools. We'll omit npx in the rest of this guide, but you can use it to run Stylelint if you don't want to install it globally.

一旦启动并运行，你就可以 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
/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard-scss"]
};
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
/** @type {import('stylelint').Config} */
export default {
  extends: "stylelint-config-standard",
  customSyntax: "postcss-lit"
};
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:

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"],
  overrides: [
    {
      files: ["*.js"],
      customSyntax: "postcss-lit"
    }
  ]
};

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

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

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