入门

¥Getting started

你可以通过扩展适当的共享配置快速入门。

¥You can quickly get started by extending an appropriate shared config.

CSS 代码检查

¥Linting CSS

使用 npm 和我们的 create 工具自动设置 Stylelint 并扩展我们的标准配置：

¥Use npm and our create tool to automatically setup Stylelint and extend our standard config:

npm create stylelint@latest

[!NOTE] Stylelint 也兼容 Bun、pnpm 和 Yarn 包管理器。你可以使用你首选的包管理器来设置 Stylelint，例如 bun create stylelint 或 pnpm create stylelint。

¥[!NOTE] Stylelint is also compatible with the Bun, pnpm, and Yarn package managers. You can use your preferred one to set up Stylelint, e.g. bun create stylelint or pnpm create stylelint.

手动设置

¥Manual setup

或者，你可以手动设置 Stylelint 来检查 CSS 代码。

¥Alternatively, you can manually setup Stylelint to lint CSS.

在项目根目录中创建一个 stylelint.config.mjs 配置文件，其中包含以下内容：

¥Create a stylelint.config.mjs configuration file in the root of your project with the following content:
```
/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"]
};
```
使用 npm（或你首选的包管理器）添加相关依赖：

¥Use npm (or your preferred package manager) to add the related dependencies:
```
npm add -D stylelint stylelint-config-standard
```
在项目中的所有 CSS 文件上运行 Stylelint：

¥Run Stylelint on all the CSS files in your project:
```
npx stylelint "**/*.css"
```

note

npx 命令允许你运行本地安装的工具。你也可以使用你首选的包管理器的等效项，例如 bunx stylelint "**/*.css" 或 pnpm dlx stylelint "**/*.css"。本指南的其余部分将省略 npx。

¥[!NOTE] The npx command allows you to run locally installed tools. You can also use your preferred package manager's equivalent, e.g. bunx stylelint "**/*.css" or pnpm dlx stylelint "**/*.css". We'll omit npx in the rest of this guide.

一旦启动并运行，你就可以 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:

在项目根目录中创建一个 stylelint.config.mjs 配置文件，其中包含以下内容：

¥Create a stylelint.config.mjs configuration file in the root of your project with the following content:
```
/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard-scss"]
};
```
使用 npm（或你首选的包管理器）添加相关依赖：

¥Use npm (or your preferred package manager) to add the related dependencies:
```
npm add -D stylelint stylelint-config-standard-scss
```
在项目中的所有 SCSS 文件上运行 Stylelint：

¥Run Stylelint on all the SCSS files in your project:
```
stylelint "**/*.scss"
```

该配置包含以下内容：

¥The config includes the:

SCSS 语法 - 解析 SCSS 的自定义语法

¥SCSS syntax - a custom syntax to parse SCSS
SCSS 插件 - 一组 SCSS 自定义规则

¥SCSS plugin - a set of custom rules for 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 代码：

¥For example, to lint CSS inside of Lit elements using the Lit custom syntax:

在项目根目录中创建一个 stylelint.config.mjs 配置文件，其中包含以下内容：

¥Create a stylelint.config.mjs configuration file in the root of your project with the following content:
```
/** @type {import('stylelint').Config} */
export default {
  extends: "stylelint-config-standard",
  customSyntax: "postcss-lit"
};
```
使用 npm（或你首选的包管理器）添加相关依赖：

¥Use npm (or your preferred package manager) to add the related dependencies:
```
npm add -D stylelint stylelint-config-standard postcss-lit
```
在项目中的所有 JavaScript 文件上运行 Stylelint：

¥Run Stylelint on all the JavaScript files in your project:
```
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}"

CSS 代码检查​

手动设置​

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

直接使用自定义语法​

使用多种自定义语法​

CSS 代码检查

手动设置

Linting 类 CSS 语言和容器内的 CSS

直接使用自定义语法

使用多种自定义语法