Stylelint
RubyMine 与 Stylelint 集成,因此您可以在 IDE 中检查您的 CSS 代码。 Stylelint 在您编辑 CSS 文件时会自动唤醒并突出显示检测到的问题,请参阅下文中的 检查您的代码。
除了 CSS,您还可以通过应用 customSyntax 来验证其他样式表,如下所述在 Lint 样式表不同于 CSS。
开始之前
下载并安装 Node.js。
确保在项目中配置了本地 Node.js 解释器:打开 设置 对话框(Ctrl+Alt+S ),然后转到 。 Node 解释器(I) 字段显示默认项目 Node.js 解释器。 了解更多,见 配置本地 Node.js 解释器。
安装 Stylelint
打开嵌入式 终端 (Alt+F12 )并输入:
npm install --save-dev stylelint stylelint-config-standard
这将安装 Stylelint 及其 标准配置。 请从 Stylelint 官方网站了解更多信息。
激活并配置 Stylelint
要激活 Stylelint,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | 样式表 | Stylelint ,并选中 Enable 复选框。 之后,对话框中的控件变得可用。
在 Stylelint Package 字段中,指定全局或当前项目中安装的 stylelint 包的位置。 如果您按照标准安装程序进行操作,RubyMine 会自动检测该包。
在 运行 文件 字段中,指定定义待检查文件集合的模式。 默认情况下,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>/**/*。假设,您的项目结构如下:

若只在 样式 文件夹中检测 CSS 和 SCSS 文件,请按如下模式更新:
styles/*.{css,scss}因此,文件 styles.css 和 lint_scss.scss 将被 lint,而 no_lint_scss.scss 将不会。
可选:
在 配置文件 字段中,指定您的配置文件位置。
默认情况下,此字段为空,RubyMine 使用 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 可以在您手动保存、更改 Ctrl+S 或自动保存时修复检测到的问题,当您启动运行/调试配置、关闭 RubyMine 或执行版本控制操作时也会自动修复。更多信息,请参阅 自动保存。
打开 设置 对话框 (Ctrl+Alt+S ),进入 ,并选择 保存时运行 stylelint --fix 复选框。
检查您的代码
当您编辑样式表文件时,Stylelint 会自动启动并突出显示检测到的问题。
要在弹出窗口中查看问题描述,请将鼠标悬停在高亮代码上。

Stylelint 可以使用 Stylelint Auto Fix 功能在明确的情况下自动修复当前文件中检测到的问题。 要应用自动修复,请在弹出窗口中点击 Stylelint:修复当前文件。
或者,按 Alt+Enter 并从列表中选择 Stylelint:修复当前文件。

Lint 样式表不同于 CSS
要对不同于 CSS 的样式表进行 lint,您需要直接使用 customSyntax 或使用社区共享的配置。 请访问 Stylelint 官方网站 了解更多信息。
请与相应的共享配置一起安装 stylelint,具体取决于您要 lint 的样式表,例如 SCSS:
npm install --save-dev stylelint stylelint-config-standard-scss了解更多有关共享配置的信息,您可以访问 Stylelint 官方网站。
打开您的 Stylelint 配置文件,并添加一个
extends字段,内容如下:{ "extends": "<shared config>" }例如:
{ "extends": "stylelint-config-standard-scss" }