PhpStorm 2021.3 Help

更漂亮

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

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

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

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

在你开始前

  1. 下载并安装Node.js。

  2. 确保在您的项目中配置了本地 Node.js 解释器：打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Languages and Frameworks | 节点.js。Node Interpreter字段显示默认项目 Node.js 解释器。

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

  3. 在Settings/Preferences |安装并启用Prettier插件 插件页面，选项卡Marketplace，如从 JetBrains 存储库安装插件中所述。

在 PhpStorm 中安装和配置 Prettier

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

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

    • npm install --global prettier

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

  2. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Languages and Frameworks | JavaScript | 更漂亮。

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

  4. 要针对特定​​文件自动运行 Prettier，请打开Settings/Preferences对话框 ( Ctrl+Alt+S)，转到Languages and Frameworks | JavaScript | Prettier，并使用On code reformatting和On save复选框指定将触发 Prettier 的操作。

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

使用 Prettier 重新格式化代码

  1. 在编辑器中，选择要重新格式化的代码片段。要重新格式化文件或文件夹，请在“ 项目”工具窗口中选择它。

  2. 然后从上下文菜单中选择Reformat with 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 重新格式化的文件集的模式。接受默认模式或按照保存时自动运行 Prettier中的说明对其进行自定义。

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

  1. 从主菜单中，选择文件 | 新项目设置 | 新项目的设置/首选项。在打开的对话框中，转到Languages and Frameworks | JavaScript | 更漂亮。

  2. 使用On code reformatting和On save复选框来指定将触发 Prettier 的操作。

  3. 如有必要，请更新Run for files字段中的默认模式，如保存时自动运行 Prettier中所述。

应用更漂亮的代码样式规则

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

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

    package.json 上方的窗格：应用 Prettier 代码样式

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

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

最后修改：2021 年 6 月 21 日
PhoneGap 和 Cordova React