跳至主要内容

入门

您可以通过扩展共享配置快速入门。

代码风格检查 CSS​

您可以扩展我们的 标准配置 来代码风格检查 CSS。

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

npm init stylelint

2. 对项目中的所有 CSS 文件运行 Stylelint

npx stylelint "**/*.css"

一旦您开始运行，就可以 自定义 Stylelint。

代码风格检查类 CSS 语言和容器内的 CSS​

您可以扩展社区配置来代码风格检查

  • 类 CSS 语言，例如 SCSS、Sass 和 Less
  • 容器内的 CSS，例如 HTML、CSS-in-JS 和 Vue SFC 中的 CSS

例如，要代码风格检查 SCSS，您可以扩展 SCSS 社区配置。它包括

1. 使用 npm 安装 Stylelint 和配置

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

2. 在项目的根目录中创建一个 .stylelintrc.json 配置文件，内容如下

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

3. 对项目中的所有 SCSS 文件运行 Stylelint

npx stylelint "**/*.scss"

您可以在 精选 Stylelint 中找到更多社区配置。

直接使用自定义语法​

如果您的首选语言或容器没有可用的共享配置，您可以安装相应的自定义语法并使用 customSyntax 选项。

例如，要代码风格检查 Lit 元素 中的 CSS。

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. 对项目中的所有 JavaScript 文件运行 Stylelint

npx stylelint "**/*.js"

您可以在 精选 Stylelint 中找到更多自定义语法。

使用多个自定义语法​

如果您想代码风格检查多种语言或容器，可以使用 overrides 属性。

例如，要代码风格检查 CSS 文件和 Lit 元素中的 CSS，您可以将配置更新为

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

然后对您的 CSS 和 JavaScript 文件都运行 Stylelint

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