Prettier
Prettier 是一款用于格式化多种语言文件的工具,例如 TypeScript、JavaScript、CSS、HTML、JSON 等。 使用 PyCharm,您可以通过 使用 Prettier 重新设置代码格式 操作格式化所选代码片段以及整个文件或目录。 一旦您在项目中或在计算机上全局安装 Prettier 作为依赖项,PyCharm 就会添加此操作。
您可以配置 Prettier 在每次此类文件发生更改且自动或手动保存更改时对特定文件进行重排,参阅 Run Prettier automatically on save。
此外,您还可以将 Prettier 设为默认格式化程序 ,适用于特定文件。 每次您使用 Ctrl+Alt+L 重排代码时,它都会在这些文件上运行。
有关更多信息,请参见 使用 Prettier 重新格式化代码。
在开始之前
安装 Prettier
打开内置的 终端 (Alt+F12)。
输入以下命令之一:
npm install --save-dev --save-exact prettiernpm install --global prettier
了解有关安装模式的更多信息,请参阅 Prettier 官方网站。
在 PyCharm 中配置 Prettier
一旦您按照 如上所述 完成安装,PyCharm 就会启用 Prettier,并添加 使用 Prettier 重新设置代码格式 操作。 要关闭 Prettier,请打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier ,然后选择 禁用 Prettier。
支持的配置文件格式
PyCharm 可在以下文件类型中识别 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 的自动配置
在此模式下,对于每个与 run-for-files 模式匹配的文件:
PyCharm 使用与要重新格式化的文件位于同一文件夹或其任一父文件夹中的最近的 node_modules 文件夹里的 Prettier 包。
PyCharm 会自动检测最近的 配置文件 并应用其中的设置。
PyCharm 会在文件夹树中向上查找 .prettierignore 文件,并使用找到的第一个文件中的设置(如果存在)。
启用 Prettier 的自动配置 时,Prettier 仅应用于相应 package.json 中列出的 Prettier 依赖范围内的文件。 要更改此行为,请选择 Prettier 的手动配置 并选中 将 Prettier 应用于 prettier 依赖范围之外的文件 复选框,了解详情,请参阅 Prettier 的手动配置。
假设您的项目结构如下:

项目根目录中有一个 .prettierrc 配置文件。 还有四个 package.json 文件,其中一个在项目根目录,其他在子项目中。 如您所见,仅在 packages/package_c_with_prettier_dependency 子项目的 package.json 中将 Prettier 列为依赖项。 因此,仅 packages/package_c_with_prettier_dependency/src 中的文件会使用 Prettier 进行格式化。
在任何没有 .idea 文件夹的新项目中,如果在任一 package.json 中将 Prettier 列为依赖项,且项目至少包含一个 Prettier 配置文件,则默认启用 Prettier 的自动配置。
因此,如果您的项目由多个具有不同 Prettier 配置的模块组成,则每个模块都会使用其自身 Prettier 配置文件中的规则(如果存在)。
如果由于某些原因 Prettier 的自动配置 默认未启用,您可以自行启用。
启用 Prettier 自动配置
打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier ,然后选择 Prettier 的自动配置。

要将 Prettier 自动应用于已保存的文件,请选中 在保存时运行 复选框。
在 针对以下文件运行 字段中,指定文件模式,以便在保存此类文件或调用 重新格式化代码 操作时自动应用 Prettier。
使用默认模式,Prettier 将应用于任何 JavaScript、TypeScript、JSX、TSX、HTML、Vue 或 Astro 文件。 要重新格式化其他类型的文件或存储在特定文件夹中的文件,请使用 glob 模式 更新默认模式。
例如,要自动重新格式化 CoffeeScript 文件,还请将
coffee添加到默认模式,如下所示:**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}要重新格式化特定文件夹(包括子文件夹)中的文件,请将
**/*替换为<path to the folder>/**/*。假设您的项目具有如下结构:

要仅重新格式化 coffee 文件夹中的文件,请按如下方式更新模式:
coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}因此,文件 reformat.coffee 被重新格式化,而 no_reformatting.coffee 未被重新格式化。
有关更多信息,请参阅 Run Prettier automatically on save 和 将 Prettier 设为默认格式化程序。
Prettier 的手动配置
打开 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier ,然后选择 Prettier 的手动配置。
在 Prettier 包 列表中,选择要使用的
prettier安装。 如果您遵循标准安装过程,PyCharm 会自动定位prettier包,并自动填充该字段。
要 将 Prettier 设为默认格式化程序 ,请选中 在 '重新格式化代码' 操作时运行 复选框。
要将 Prettier 自动应用于已保存的文件,请选中 在保存时运行 复选框。
配置 Prettier 的作用域
您可以指定文件名模式,用于定义要由 Prettier 自动处理的文件。 您也可以将某些文件添加到 .prettierignore 文件中,从而将其排除在处理之外。
默认情况下, Prettier 不仅应用于存储 prettier 包的模块,还会应用于其他模块,这对于单体存储库很有帮助。
在 设置 对话框(Ctrl+Alt+S ),转到 语言与框架 | JavaScript | Prettier。
在 针对以下文件运行 字段中,指定文件模式,以便在保存此类文件或调用 重新格式化代码 操作时自动应用 Prettier。
使用默认模式,Prettier 将应用于任何 JavaScript、TypeScript、JSX、TSX、HTML、Vue 或 Astro 文件。 要重新格式化其他类型的文件或存储在特定文件夹中的文件,请使用 glob 模式 更新默认模式。
例如,要自动重新格式化 CoffeeScript 文件,还请将
coffee添加到默认模式,如下所示:**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}要重新格式化特定文件夹(包括子文件夹)中的文件,请将
**/*替换为<path to the folder>/**/*。假设您的项目具有如下结构:

要仅重新格式化 coffee 文件夹中的文件,请按如下方式更新模式:
coffee/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,coffee}因此,文件 reformat.coffee 被重新格式化,而 no_reformatting.coffee 未被重新格式化。
有关更多信息,请参阅 Run Prettier automatically on save 和 将 Prettier 设为默认格式化程序。
指定要使用的 .prettierignore 文件。
对于每个与 上述指定的模式 匹配的文件,PyCharm 默认会在文件夹树中向上查找 .prettierignore ,并使用找到的第一个。 当您选择 Prettier 的自动配置 时,始终应用此默认方法。
使用 Prettier 的手动配置 时, 指向 .prettierignore 的路径 字段默认也会显示
Detect the .prettierignore file automatically。 接受此建议,或点击并选择要使用的 .prettierignore 。
默认情况下, Prettier 会自动应用于每个与 上述指定的模式 匹配的文件,无论项目树上层的 node_modules 文件夹是否包含
prettier包。 这样,您无需在每个子项目中安装prettier包,就可以在所有子项目中使用 Prettier。要禁止处理没有
prettier包的子项目中的文件,请选择 Prettier 的手动配置 ,并清除 将 Prettier 应用于 prettier 依赖范围之外的文件 复选框。
Prettier 语言状态小部件
当您打开一个应根据 配置的作用域 由 Prettier 处理的文件时,状态栏会显示 Prettier 小部件图标
。

通过此小部件,您可以重启 Prettier 语言服务、打开 Prettier 配置文件进行编辑,或打开 Prettier 设置以更新 Prettier 配置。

要重新启动 Prettier 语言服务,请点击
。
要打开并编辑 Prettier 配置文件,请点击
。
要更新 在 PyCharm 中的 Prettier 配置 ,请点击
。
如果检测到任何错误,例如 Node.js 版本不正确、Prettier 包无效、插件错误或 语言服务超时 ,将显示
。
将鼠标悬停在
上可查看包含问题描述的工具提示。

点击
以打开 Prettier 配置设置。
为避免浪费系统资源,Prettier 语言服务在一段时间无活动后会因超时而自动停止。 当 Prettier 被调用来重新格式化您的代码或解析配置(例如,当代码样式被修改时)时,即被视为处于活动状态。
设置自定义超时时间
默认超时时间为 5 分钟。
在主菜单中,转到 ,或使用 Ctrl+Shift+A 打开 注册表。
找到
prettier.service.expiration.timeout.ms键,并在 值 字段中更改默认超时时间。
使用 Prettier 重新格式化代码
在编辑器中,选择要重排的代码片段。 要重新格式化文件或文件夹,请在 项目 工具窗口(Alt+1 )中选择它。
然后从上下文菜单中选择 使用 Prettier 重新设置代码格式。
您可以配置 Prettier 在每次此类文件发生更改且自动或手动保存更改时对特定文件进行重排,参阅 Run Prettier automatically on save。
此外,您还可以将 Prettier 设为默认格式化程序 ,适用于特定文件。 每次您使用 Ctrl+Alt+L 重排代码时,它都会在这些文件上运行。
在保存时自动运行 Prettier
打开 设置 对话框(Ctrl+Alt+S ),转到 ,然后选中 在保存时运行 复选框。
在 针对以下文件运行 字段中,指定要在每次保存此类文件时重新格式化的文件集所使用的模式。 您可以接受默认模式,或输入自定义模式。
使用默认模式,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 自动应用于 src 文件夹中的文件,请按如下方式更新模式:
src/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,ml,css}因此,文件 dog.ts 在保存时将被重新格式化,而 animal.ts 将保持不变。
粘贴时重新格式化代码片段
默认情况下,新粘贴的代码片段会自动使用 Prettier 重新格式化。 要禁用此行为:
打开 设置 对话框(Ctrl+Alt+S ),转到 ,然后清除 在粘贴时运行 复选框。
将 Prettier 设为默认格式化程序
打开 设置 对话框(Ctrl+Alt+S ),转到 。
选择 Prettier 的手动配置 并选择 在 '重新格式化代码' 操作时运行 复选框。 了解更多关于 Prettier 配置的信息,请参阅 选择如何检测 Prettier 包和配置文件。
在 针对以下文件运行 字段中,指定要始终使用 Prettier 重新格式化的文件集所使用的模式。 接受默认模式,或按 配置 Prettier 的作用域 中的说明进行自定义。
在新项目中配置 Prettier 在保存或重新格式化时运行
转到 。 在打开的对话框中,转到 。
使用 在 '重新格式化代码' 操作时运行 和
在保存时复选框来指定将触发 Prettier 的操作。如有需要,请按照 在保存时自动运行 Prettier 中的说明,在 针对以下文件运行 字段中更新默认模式。