PyCharm 2025.3 Help

Stylelint

PyCharm 与 Stylelint 集成,您可以在 IDE 内检查您的 CSS 代码。 当您编辑 CSS 文件时,Stylelint 会自动启动并高亮显示检测到的问题,参见下文的 检查您的代码

除了 CSS,您还可以按下文 检查非 CSS 样式表 中所述,通过应用 customSyntax 来检查其他样式表。

开始之前

  1. 请确保您的计算机上已安装 Node.js

  2. 请确保在您的项目中配置了本地 Node.js 运行时:打开 设置 对话框(Ctrl+Alt+S ),转到 语言和框架 | JavaScript 运行时Node.js 运行时 字段显示项目的默认 Node.js 运行时。 请参阅 配置本地 Node.js 解释器 以了解更多信息。

安装 Stylelint

  • 打开内置的 终端Alt+F12 ),然后键入:

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

这将安装 Stylelint 及其 标准配置。 在 Stylelint 官方网站 了解详细信息。

启用并配置 Stylelint

  1. 要启用 Stylelint,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | 样式表 | Stylelint ,并选中 启用 复选框。 之后,对话框中的控件将可用。

  2. Stylelint 包 字段中,指定全局或当前项目中已安装的 stylelint 包的位置。 如果您遵循了标准安装步骤,PyCharm 会自动检测到该包。

  3. 针对以下文件运行 字段中,指定用于定义要检查的文件集的模式。 默认情况下,StyleLint 仅处理纯 CSS 文件,因此默认模式为 **/*.{css}

    要检查其他类型的文件或存储在特定文件夹中的文件,请使用 glob 模式 更新默认模式。 要检查其他类型的文件,还请按照下文 检查非 CSS 样式表 中的说明使用自定义配置。

    • 例如,要同时检查 HTML、Vue、SCSS、Styled Components、JavaScript、TypeScript、JSX 和 TSX,请按如下方式更新默认模式:

      **/*.{html,vue,css,scss,js,ts,jsx,tsx}
    • 要检查来自特定文件夹(包含子文件夹)的文件,请将 **/* 替换为 <path to the folder>/**/*

      假设您的项目具有如下结构:

      Stylelint:自定义模式。 示例项目结构

      若仅检查 styles 文件夹中的 CSS 和 SCSS 文件,请按如下方式更新模式:

      styles/*.{css,scss}

      结果,将检查 styles.css lint_scss.scss 文件,而不会检查 no_lint_scss.scss

  4. 可选:

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

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

    • 通过 stylelint 属性(位于 package.json 文件中)。

    • .stylelintrc.json .stylelintrc.yaml .stylelintrc.yml .stylelintrc.js 文件中。

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

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

    Stylelint 官方网站 了解详细信息。

    要使用自定义配置文件,请在 配置文件 字段中点击 Browse 按钮 ,然后在打开的对话框中选择所需配置文件的路径。

在保存时自动修复问题

Stylelint 可以在每次保存您的更改时修复检测到的问题,无论是通过 Ctrl+S 手动保存,还是在您启动运行/调试配置、关闭 PyCharm 或执行版本控制操作时自动保存。有关详细信息,请参阅 自动保存

  • 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | 样式表 | Stylelint ,并选中 保存时运行 stylelint --fix 复选框。

检查您的代码

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

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

    Stylelint 弹出窗口
  • 在不含歧义的情况下,Stylelint 可以使用 Stylelint 自动修复 功能自动修复当前文件中检测到的问题。 要应用自动修复,请在弹出窗口中点击 Stylelint:修复当前文件

    或者,按 Alt+Enter ,并在列表中选择 Stylelint:修复当前文件

    Stylelint 快速修复

检查非 CSS 样式表

要检查不同于 CSS 的样式表,您需要直接使用 customSyntax ,或使用社区共享的配置。 在 Stylelint 官方网站 了解详细信息。

  1. 根据您要检查的样式表,安装 stylelint 及相应的共享配置,例如,SCSS:

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

    Stylelint 官方网站 了解可用的共享配置。

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

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

    例如:

    { "extends": "stylelint-config-standard-scss" }
最后修改日期: 2025年 12月 2日