# Stylelint

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 必需插件  :
>
>
>
> `CSS` ：该插件与 IntelliJ IDEA 一起捆绑，并默认启用。

IntelliJ IDEA 与 [Stylelint](http://stylelint.io/) 集成，因此您可以在 IDE 中检查您的 CSS 代码。 Stylelint 在编辑 CSS 文件时会自动启动并高亮显示检测到的问题，请参阅下面的 [检查代码](#ws_stylelint_lint_your_code)。

除了 CSS，您还可以通过应用 [customSyntax](https://stylelint.io/user-guide/usage/options/#customsyntax) 来验证其他样式表，如下所述在 [Lint 样式表不同于 CSS](#ws_stylelint_custom_syntax)。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 请确保已在您的项目中配置本地 Node.js 运行时：打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `语言与框架 | JavaScript 运行时` 。   Node.js 运行时   字段显示项目默认的 Node.js 运行时。 详细信息请参阅 [配置本地 Node.js 解释器](developing-node-js-applications.html#ws_node_configure_local_node_interpreter)。

3. 请确保在设置中已启用捆绑的  CSS  插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择  `插件` 。 在搜索字段中，输入  CSS 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。

## 安装 Stylelint

Procedure:

* 打开你的命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入：

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

这将安装 Stylelint 及其 [标准配置](https://github.com/stylelint/stylelint-config-standard)。 请从 [Stylelint 官方网站](https://stylelint.io/user-guide/get-started)了解更多信息。

## 激活并配置 Stylelint

Procedure:

1. 要激活 Stylelint，请打开   设置  对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到   语言与框架 | 样式表 | Stylelint  ，并选中   启用  复选框。 之后，对话框中的控件变得可用。

2. 在   Stylelint Package  字段中，指定全局或当前项目中安装的  stylelint 包的位置。 如果您按照标准安装程序进行操作，IntelliJ IDEA 会自动检测该包。

3. 在   运行 文件   字段中，指定定义要检查的文件集合的模式。 默认情况下，StyleLint 只处理普通 CSS 文件，因此默认模式是  `**/*.{css}` 。

要对其他类型的文件或存储在特定文件夹中的文件进行 lint，请使用 [glob 模式](https://github.com/isaacs/node-glob#glob)更新默认模式。 要对其他类型的文件进行 lint，请根据下文 [Lint 样式表不同于 CSS](#ws_stylelint_custom_syntax) 中描述的那样使用自定义配置。

> **Note:**
> 页面上不再有   处理 JS 文件   复选框。 但是，如果您在以前版本的 IntelliJ IDEA 中选择了它，则此设置会在默认模式中如下反映：
>
>
>
>
> ```
> **/*.{css,js}
>
> ```

* 例如，要对 HTML、Vue、SCSS、Styled Components、JavaScript、TypeScript、JSX 和 TSX 进行 lint，请按如下方式更新默认模式： ``` **/*.{html,vue,css,scss,js,ts,jsx,tsx} ```

* 若要检查特定文件夹（包括其子文件夹）中的文件，请将 `**/*` 替换为 `<path to the folder>/**/*` 。 假设您的项目具有以下结构： ![Stylelint：自定义模式。 示例项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_stylelint_configure_scope.png) 若只在 `styles` 文件夹中检测 CSS 和 SCSS 文件，请按如下模式更新： ``` styles/*.{css,scss} ``` 因此，文件 `styles.css` 和 `lint_scss.scss` 将被 lint，而 `no_lint_scss.scss` 将不会。

4. 可选：

在   配置文件  字段中，指定您的配置文件位置。

默认情况下，此字段为空，IntelliJ IDEA 使用 Stylelint 原生机制自动检测配置。 在此自动检测模式下，Stylelint 会向上遍历文件夹结构，并查找以下方式定义的配置：

* 通过 `stylelint` 属性在 `package.json` 文件中。

* 在 `.stylelintrc.json` 、 `.stylelintrc.yaml` 、 `.stylelintrc.yml` 或 `.stylelintrc.js` 文件中。

* 在导出 JavaScript 对象的 `stylelint.config.js` 文件中。

* 在导出 JavaScript 对象的 `stylelint.config.cjs` 文件中。 在 JavaScript 中运行 Stylelint 时，带有 `"type":"module"` 属性的包在其 `package.json` 。

了解详细信息，请访问 [Stylelint 官方网站](https://stylelint.io/user-guide/configure)。

要使用自定义配置文件，请点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.menu-open.svg)，在   配置文件   字段中选择所需配置文件的路径，并在打开的对话框中选择。

### 保存时自动修复问题

Stylelint 可以在您手动保存、更改 `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (NetBeans), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS)) 或自动保存时修复检测到的问题，当您启动运行/调试配置、关闭 IntelliJ IDEA 或执行版本控制操作时也会自动修复。更多信息，请参阅 [自动保存](saving-and-reverting-changes.html)。

Procedure:

* 打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `语言与框架 | 样式表 | Stylelint` ，并选中   保存时运行 stylelint --fix   复选框。

> **Tip:**
> 启用此选项还会启用 [Run stylelint --fix](saving-and-reverting-changes.html#actions-on-save)在  `设置 | 工具 | 保存时的操作` 。

## 检查您的代码

当您编辑样式表文件时，Stylelint 会自动唤醒并高亮显示检测到的问题。

Procedure:

* 要在弹出窗口中查看问题描述，请将鼠标悬停在高亮代码上。

![Stylelint 弹窗](https://resources.jetbrains.com/help/img/idea/2026.3/ws_stylesheets_stylelint_popup.png)

Stylelint 可以使用 [Stylelint Auto Fix](https://stylelint.io/user-guide/usage/options#fix) 功能在明确的情况下自动修复当前文件中检测到的问题。 要应用自动修复，请在弹出窗口中点击   Stylelint：修复当前文件  。

* 或者，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) 并从列表中选择   Stylelint：修复当前文件  。

![Stylelint 快速修复](https://resources.jetbrains.com/help/img/idea/2026.3/ws_stylesheets_stylelint_quick_fix.png)

* 对于额外安装的插件规则，也可以使用   修复当前文件   操作。

![为额外插件的规则修复当前文件。 ](https://resources.jetbrains.com/help/img/idea/2026.3/ws_stylesheets_stylelint_fix_current_file_for_extra_plugin.png)

## Lint 样式表不同于 CSS

要对不同于 CSS 的样式表进行 lint，您需要直接使用 [customSyntax](https://stylelint.io/user-guide/usage/options/#customsyntax) 或使用社区共享的配置。 请访问 [Stylelint 官方网站](https://stylelint.io/user-guide/get-started/#linting-everything-else) 了解更多信息。

Procedure:

1. 请与相应的共享配置一起安装 stylelint，具体取决于您要 lint 的样式表，例如 SCSS：

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

了解更多有关共享配置的信息，您可以访问 [Stylelint 官方网站](https://stylelint.io/developer-guide/syntaxes/)。

2. 打开您的 Stylelint 配置文件，并添加一个  `extends`  字段，内容如下：

```SHELL
{
    "extends": "<shared config>"
}
                    
```

例如：

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

## See also

### 过程

[代码检查](code-inspection.html)

### 参考

[检查](inspections-settings.html)