Stylelint

下载并安装 Node.js。

请确保在您的项目中配置了本地 Node.js 解释器：打开 设置 对话框（Ctrl+Alt+S ），然后转到 语言和框架 ｜ Node.js。 Node 解释器(I) 字段显示默认项目的 Node.js 解释器。 了解更多，见 配置本地 Node.js 解释器。

要激活 Stylelint，请打开 设置 对话框（Ctrl+Alt+S ），转到 语言与框架 | 样式表 | Stylelint ，并选中 Enable 复选框。 之后，对话框中的控件变得可用。

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

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

要对其他类型的文件或存储在特定文件夹中的文件进行 lint，请使用 glob 模式更新默认模式。 要对其他类型的文件进行 lint，请根据下文 Lint 样式表不同于 CSS 中描述的那样使用自定义配置。

• 例如，要对 HTML、Vue、SCSS、Styled Components、JavaScript、TypeScript、JSX 和 TSX 进行 lint，请按如下方式更新默认模式：

  **/*.{html,vue,css,scss,js,ts,jsx,tsx}

• 要从特定文件夹中（包括子文件夹）清理文件，请将 **/* 替换为 <path to the folder>/**/*。

  假设您有一个具有以下结构的项目：

  

  若只在 styles 文件夹中检测 CSS 和 SCSS 文件，请按如下模式更新：

  styles/*.{css,scss}

  因此，文件 styles.css 和 lint_scss.scss 将被 lint，而 no_lint_scss.scss 将不会。

可选：

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

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

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

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

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

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

了解详细信息，请访问 Stylelint 官方网站。

要使用自定义配置文件，请点击 ，在 配置文件 字段中选择所需配置文件的路径，并在打开的对话框中选择。

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

了解更多有关共享配置的信息，您可以访问 Stylelint 官方网站。

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

例如：