RubyMine 2025.2 Help

Prettier

Prettier 是一个用于格式化各种语言(如 TypeScript、JavaScript、CSS、HTML、JSON 等)的文件的工具。 通过 RubyMine,您可以使用 使用 Prettier 重新格式化 操作格式化选定的代码片段以及整个文件或目录。 RubyMine 在您将 Prettier 作为依赖项安装到项目中或全局安装到计算机上时,即会立即添加此操作。

您可以配置 Prettier 以在每次更改特定文件并自动或手动保存更改时重新格式化这些文件。请参阅 Run Prettier automatically on save

此外,Prettier 可以为特定文件 设置为默认格式化程序。 每次您用 Ctrl+Alt+L 重新格式化代码时,它都会运行这些文件。

欲了解更多信息,请参阅 使用 Prettier 格式化代码

开始之前

  1. 下载并安装 Node.js

  2. 确保在项目中配置了本地 Node.js 解释器:打开 设置 对话框(Ctrl+Alt+S ),然后转到 语言和框架 | Node.jsNode 解释器(I) 字段显示默认项目 Node.js 解释器。 了解更多,见 配置本地 Node.js 解释器

  3. 确保在 JavaScript and TypeScriptPrettier必需插件在 设置 | 插件 页面的 已安装 选项卡上启用。 如需了解更多信息,请参阅 管理插件

安装 Prettier

  1. 打开嵌入式 终端Alt+F12)。

  2. 请键入以下命令之一:

    • npm install --save-dev --save-exact prettier

    • npm install --global prettier

请访问 Prettier 官方网站 了解更多关于安装模式的信息。

在 RubyMine 中配置 Prettier

RubyMine 启用 Prettier,并在安装后立即添加 使用 Prettier 重新格式化 操作 如上所述。 要关闭 Prettier,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier ,并选择 禁用 Prettier

支持的配置文件格式

RubyMine 可识别以下类型的 Prettier 配置文件:

  • .prettierrc.json .prettierrc.yml .prettierrc.yaml .prettierrc.json5

  • .prettierrc.js prettier.config.js .prettierrc.mjs prettier.config.mjs .prettierrc.cjs prettier.config.cjs .prettierrc.toml

  • .prettierrc.ts prettier.config.ts .prettierrc.mts prettier.config.mts .prettierrc.cts prettier.config.cts

请参阅 Prettier 官方网站 了解更多信息。

自动 Prettier 配置

在此模式下,对于每个匹配 运行文件模式的文件:

  • RubyMine 使用最接近的 node_modules 文件夹中的 Prettier 包,该文件夹位于要重新格式化的文件所在的同一文件夹或其父文件夹之一中。

  • RubyMine 会自动检测最近的 配置文件 并应用其中的设置。

  • RubyMine 会在文件夹树中向上搜索 .prettierignore 文件,并使用找到的第一个文件中的设置(如果有)。

使用 自动 Prettier 配置 时,Prettier 仅应用于在相应 package.json 中列出的 Prettier 依赖范围内的文件。 要更改此行为,请选择 手动 Prettier 配置 并选中 将 Prettier 应用于 prettier 依赖范围之外的文件 复选框,详情请参阅 手动 Prettier 配置

假设,您的项目结构如下:

项目结构:Prettier 应用于 Prettier 依赖范围内的文件

项目根目录中有一个 .prettierrc 配置文件。 还有四个 package.json 文件,其中一个在项目根目录,其他在子项目中。 如您所见,Prettier 仅在 package.json 中列为 packages/package_c_with_prettier_dependency 子项目的依赖项。 因此,只有来自 packages/package_c_with_prettier_dependency/src 的文件会被 Prettier 格式化。

如果 Prettier 在任何 package.json 中列为依赖项,并且项目至少有一个 Prettier 配置文件,则 自动 Prettier 配置 默认在任何没有 .idea 文件夹的新项目中启用。

因此,如果您的项目包含多个具有不同 Prettier 配置的模块,每个模块将使用其自己的 Prettier 配置文件中的规则(如果找到了这样的配置)。

如果由于某种原因 自动 Prettier 配置 未默认启用,您可以自行启用。

启用自动 Prettier 配置

  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier ,然后选择 自动 Prettier 配置

    自动配置 Prettier
  2. 要将 Prettier 自动应用于已保存的文件,请选择 保存时运行 复选框。

  3. 运行 文件 字段中,指定 Prettier 将自动应用于此类文件的文件模式,当这些文件保存或调用 重新格式化代码 操作时将执行。

    使用默认模式,Prettier 将应用于任何 JavaScript、TypeScript、JSX、TSX、HTML、Vue 或 Astro 文件。 要重新格式化其他类型的文件或存储在特定文件夹中的文件,请使用 glob patterns更新默认模式。

    • 例如,若想自动重新格式化 CoffeeScript 文件,请将 coffee 添加至默认模式,如下所示:

      **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}
    • 要重新格式化特定文件夹中的文件,包括子文件夹,请将 **/* 替换为 <path to the folder>/**/*

      假设,您的项目结构如下:

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

      若只对 coffee 文件夹中的文件重新格式化,请按如下方式更新模式:

      coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}

      因此,文件 reformat.coffee 被重新格式化,而 no_reformatting.coffee 则没有。

    如需更多信息,请参阅 Run Prettier automatically on saveSet Prettier as default formatter

手动 Prettier 配置

  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier ,然后选择 手动 Prettier 配置

  2. Prettier 包 列表中,选择要使用的 prettier 安装。 如果您遵循了标准安装程序,RubyMine 会自行定位 prettier 包,并且该字段会自动填写。

    配置 Prettier:手动模式
  3. 将 Prettier 设置为默认格式化工具 ,请选择 运行“ Reformat Code”操作 复选框。

  4. 要将 Prettier 自动应用于已保存的文件,请选择 保存时运行 复选框。

  5. 配置 Prettier 的范围

为 Prettier 配置范围

您可以指定文件名模式,以定义要由 Prettier 自动处理的文件。 您还可以通过将文件添加到 .prettierignore 文件中来排除某些文件的处理。

默认情况下,Prettier 不仅应用于存储 prettier 包的模块,还应用于其他模块,这在 monorepos 中可能很有用。

  1. 设置 对话框 (Ctrl+Alt+S) 中,前往 语言与框架 | JavaScript | Prettier

  2. 运行 文件 字段中,指定 Prettier 将自动应用于此类文件的文件模式,当这些文件保存或调用 重新格式化代码 操作时将执行。

    使用默认模式,Prettier 将应用于任何 JavaScript、TypeScript、JSX、TSX、HTML、Vue 或 Astro 文件。 要重新格式化其他类型的文件或存储在特定文件夹中的文件,请使用 glob patterns更新默认模式。

    • 例如,若想自动重新格式化 CoffeeScript 文件,请将 coffee 添加至默认模式,如下所示:

      **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}
    • 要重新格式化特定文件夹中的文件,包括子文件夹,请将 **/* 替换为 <path to the folder>/**/*

      假设,您的项目结构如下:

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

      若只对 coffee 文件夹中的文件重新格式化,请按如下方式更新模式:

      coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}

      因此,文件 reformat.coffee 被重新格式化,而 no_reformatting.coffee 则没有。

    如需更多信息,请参阅 Run Prettier automatically on saveSet Prettier as default formatter

  3. 指定要使用的 .prettierignore 文件

    对于每个匹配 上述指定模式的文件,RubyMine 默认会在文件夹树中向上搜索 .prettierignore ,并使用找到的第一个文件。 当您选择 自动 Prettier 配置时,总是会应用此默认方法。

    使用 手动 Prettier 配置时, .prettierignore 的路径 字段默认也会显示 Detect the .prettierignore file automatically。 接受此建议或单击 “浏览”按钮 并选择要使用的 .prettierignore

  4. 默认情况下,无论项目树中更高的 node_modules 文件夹是否包含 prettier 包,Prettier 都会自动应用于每个匹配 上述指定模式的文件。 这使您可以在所有子项目中使用 Prettier,而无需在每个子项目中安装 prettier 包。

    要禁止处理没有 prettier 包的子项目中的文件,请选择 手动 Prettier 配置 并清除 将 Prettier 应用于 prettier 依赖范围之外的文件 复选框。

使用 Prettier 格式化代码

  1. 在编辑器中,选择要重新格式化的代码片段。 要重新格式化文件或文件夹,请在 Project 工具窗口 Alt+1 中选择它。

  2. 然后从上下文菜单中选择 使用 Prettier 重新格式化

您可以配置 Prettier 以在每次更改特定文件并自动或手动保存更改时重新格式化这些文件。请参阅 Run Prettier automatically on save

此外,Prettier 可以为特定文件 设置为默认格式化程序。 每次您用 Ctrl+Alt+L 重新格式化代码时,它都会运行这些文件。

此行为可以 在当前项目中启用 ,也可以 为所有新项目启用

保存时自动运行 Prettier

  1. 打开 设置 对话框 (Ctrl+Alt+S ),进入 语言与框架 | JavaScript | Prettier ,并选择 保存时运行 复选框。

  2. 运行 文件 字段中,指定模式,以定义每次保存此类文件时要重新格式化的一组文件。 您可以接受默认模式或输入自定义模式。

    使用默认模式,Prettier 将唤醒并处理任何已更新和保存的 JavaScript、TypeScript、JSX、TSX、HTML、Vue、Astro、 .ml 或 CSS 文件。 要重新格式化其他类型的文件或存储在特定文件夹中的文件,请使用 glob patterns更新默认模式。

    • 例如,要自动重新格式化 sass .scss 文件,请将 sass, scss 添加到默认模式,如下所示:

      **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css,scss,sass}
    • 要重新格式化特定文件夹中的文件,包括子文件夹,请将 **/* 替换为 <path to the folder>/**/*

      假设,您的项目结构如下:

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

      要自动将 Prettier 应用于 源代码 文件夹中的文件,请按以下方式更新模式:

      src/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css}

      保存时,文件 dog.ts 会被重新格式化,而 animal.ts 将保持不变。

将 Prettier 设置为默认格式化程序

  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier

  2. 选择 手动 Prettier 配置 然后选择 运行“ Reformat Code”操作 复选框。 了解更多有关 Prettier 配置的信息,请参阅 选择如何检测 Prettier 包和配置文件

  3. 运行 文件 字段中,指定定义要始终使用 Prettier 重新格式化的文件集的模式。 接受默认模式或按照 配置 Prettier 的范围中描述的方式自定义模式。

配置 Prettier 在新项目中保存时或重新格式化时运行

  1. 转到 文件 | 新建项目设置 | 新项目的 设置。 在打开的对话框中,前往 语言与框架 | JavaScript | Prettier

  2. 使用 运行“ Reformat Code”操作保存时 复选框来指定触发 Prettier 的操作。

  3. 如有必要,请按照 自动保存时运行 Prettier 中的说明更新 运行 文件 字段中的默认模式。

最后修改日期: 2025年 9月 26日