Prettier

最后修改：2022 年 8 月 9 日

Prettier是一种格式化.js、.ts、.css、.less、 .scss、.vue和.json代码的工具。使用 WebStorm，您可以使用Reformat with Prettier 操作格式化选定的代码片段以及整个文件或目录。一旦您将 Prettier 作为依赖项安装在您的项目中或在您的计算机上全局安装，WebStorm 就会添加此操作。

您可以将 Prettier 配置为在每次更改此类文件时重新格式化特定文件，并自动或手动保存更改。

此外，Prettier 可以设置为特定文件的默认格式化程序。每次您使用Ctrl+Alt+L.

有关详细信息，请参阅使用 Prettier 重新格式化代码。

在你开始之前

1. 确保您的计算机上安装了Node.js。

2. 确保在您的项目中配置了本地 Node.js 解释器：打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到语言和框架 | 节点.js。Node 解释器字段显示默认项目 Node.js 解释器。

   从配置本地 Node.js 解释器了解更多信息。

3. 确保在设置中启用了Prettier插件。按Ctrl+Alt+S打开 IDE 设置并选择插件。单击已安装选项卡。在搜索字段中，输入Prettier。有关插件的更多详细信息，请参阅管理插件。

在 WebStorm 中安装和配置 Prettier

1. 在嵌入式终端( Alt+F12) 中，键入以下命令之一：

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

   从Prettier 官网了解更多关于安装模式的信息。

2. 在设置/首选项对话框 ( Ctrl+Alt+S) 中，转到语言和框架 | JavaScript | Prettier。

3. 从Prettier 包列表中，选择prettier要使用的安装。

   如果您遵循标准安装程序，WebStorm 会自行定位prettier包并自动填写该字段。

4. 要针对特定​​文件自动运行 Prettier，请打开设置/首选项对话框 ( Ctrl+Alt+S)，转到语言和框架 | JavaScript | Prettier，并使用On code reformatting和On save复选框来指定将触发 Prettier 的操作。

   有关详细信息，请参阅保存时自动运行 Prettier和将 Prettier 设置为默认格式化程序。

使用 Prettier 重新格式化代码

1. 在编辑器中，选择要重新格式化的代码片段。要重新格式化文件或文件夹，请在“ 项目”工具窗口中选择它。
2. 然后从上下文菜单中按Ctrl+Alt+Shift+P或选择使用 Prettier 重新格式化。

您可以将 Prettier 配置为在每次更改此类文件时重新格式化特定文件，并自动或手动保存更改。

此外，Prettier 可以设置为特定文件的默认格式化程序。每次您使用Ctrl+Alt+L.

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

保存时自动运行 Prettier

1. 打开设置/首选项对话框 ( Ctrl+Alt+S)，转到语言和框架 | JavaScript | Prettier，然后选中On save复选框。

2. 在Run for files字段中，指定用于定义每次保存此类文件时要重新格式化的文件集的模式。您可以接受默认模式或键入自定义模式。

   使用默认模式，{**/*,*}.{js,ts,jsx,tsx}Prettier 将唤醒并处理任何更新和保存的 JavaScript、TypeScript、JSX 或 TSX 文件。要重新格式化其他类型的文件或存储在特定文件夹中的文件，请使用glob 模式来更新默认模式。

   • 例如，要自动重新格式化样式表文件，css,sass,scss请按如下方式添加到默认模式：

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

   • 要重新格式化特定文件夹中的文件，请替换{**/*,*}为<path to the folder>*.

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

     

     要仅将 Prettier 自动应用于src文件夹中的文件，请按如下方式更新模式：

     src/*.{js,ts,jsx,tsx}
     

     因此，文件dog.ts将在保存时重新格式化，而animal.ts将保持不变。

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

1. 打开设置/首选项对话框 ( Ctrl+Alt+S)，转到语言和框架 | JavaScript | Prettier，然后选中On code reformat复选框。
2. 在Run for files字段中，指定用于定义始终使用 Prettier 重新格式化的文件集的模式。接受默认模式或按照Run Prettier automatically on save中的描述对其进行自定义。

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

1. 从主菜单中，选择文件 | 新项目设置 | 新项目的设置/首选项。在打开的对话框中，转到Languages & Frameworks | JavaScript | 更漂亮。
2. 使用On code reformatting和On save复选框来指定将触发 Prettier 的操作。
3. 如有必要，更新Run for files字段中的默认模式，如Run Prettier automatically on save中所述。

应用更漂亮的代码风格规则

WebStorm 可以将 Prettier 配置中的关键代码样式规则应用于 WebStorm 代码样式设置，以便生成的代码（例如，在重构或快速修复之后）和已经使用 Prettier 处理的代码具有一致的格式。

• 在启用 Prettier 的项目中，打开package.json并单击选项卡顶部窗格中的是。

  

• 要重新应用 Prettier 代码样式（在您单击窗格中的No或修改代码样式之后），请按并从Find Action列表中Ctrl+Shift+A选择Apply Prettier Code Style Rules 。

从Prettier 官网了解更多关于配置 Prettier 代码风格规则的信息。