Stylelint

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

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

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

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

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

要对其他类型的文件或特定文件夹中的文件进行 Lint 检查，请使用 glob patterns 更新默认模式。 要对其他类型的文件进行 Lint 检查，还可使用自定义配置，详见下文的 对不同于 CSS 的样式表进行 Lint 检查。

• 例如，为同时对 HTML、Vue、SCSS、Styled Components、JavaScript、TypeScript、JSX 和 TSX 进行 Lint 检查，请按如下方式更新默认模式：

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

• 要对特定文件夹及其子文件夹中的文件进行 Lint 检查，请将 **/* 替换为 <path to the folder>/**/*。

  假设您的项目结构如下：

  

  要仅对 styles 文件夹中的 CSS 和 SCSS 文件进行 Lint 检查，请按如下方式更新模式：

  styles/*.{css,scss}

  结果将对 styles.css 和 lint_scss.scss 文件进行 Lint 检查，而不会对 no_lint_scss.scss 进行检查。

可选：

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

默认情况下，该字段为空，WebStorm 使用 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 官方网站。

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

根据您要检查的样式表类型，安装 stylelint 及相应的共享配置，例如 SCSS：

请通过 Stylelint 官方网站了解更多可用的共享配置。

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

例如：