How to use Prettier in VS Code?

在 Visual Studio Code (VS Code) 中使用 Prettier 来格式化代码是一个非常流行且有效的方法，能够保持代码具有一致的风格。下面我将详细介绍如何在 VS Code 中安装和配置 Prettier。

步骤 1: 安装 Prettier 插件

1. 打开 VS Code。
2. 转到左侧的扩展视图，可以通过点击侧边栏的方块图标或使用快捷键 Ctrl+Shift+X 打开。
3. 在扩展市场中搜索 “Prettier - Code formatter”。
4. 找到由 Prettier 官方提供的扩展，然后点击安装。

步骤 2: 配置 Prettier

安装完成后，你可以通过编辑 VS Code 的设置来配置 Prettier。这可以通过两种方式进行：

方法 A: 使用设置 UI

1. 打开设置，使用快捷键 Ctrl+, 或通过点击左下角的齿轮图标，然后选择 “Settings”。
2. 在搜索栏输入 "Prettier"，找到相关的配置选项。
3. 你可以设置默认的格式化器为 Prettier，勾选 “Prettier: Require Config”，这样 Prettier 只会在项目中存在配置文件时才运行。

方法 B: 直接修改 settings.json

1. 打开命令面板 (Ctrl+Shift+P)，搜索并选择 “Open Settings (JSON)”。

2. 在打开的 settings.json 文件中，你可以添加或修改以下设置：

   json
   {
       "editor.defaultFormatter": "esbenp.prettier-vscode",
       "editor.formatOnSave": true,
       "[javascript]": {
           "editor.formatOnSave": true
       },
       "prettier.requireConfig": true
   }

   这些设置会将 Prettier 设为默认格式化器，并在每次文件保存时自动格式化 JavaScript 文件（你也可以添加其他语言）。

步骤 3: 创建和使用 Prettier 配置文件

为了使 Prettier 按照特定的规则格式化代码，你可以在项目根目录中创建一个 .prettierrc 文件，文件中可以定义诸如缩进大小、使用单引号还是双引号等规则：

json
{
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2
}

步骤 4: 使用 Prettier 格式化代码

安装并配置好 Prettier 后，你可以通过以下任一方法格式化代码：

• 保存文件时自动格式化：如果你已经启用了 “Format On Save”，每当你保存文件时，Prettier 将自动格式化代码。
• 手动格式化：你可以打开命令面板 (Ctrl+Shift+P)，搜索并选择 “Format Document”，或使用快捷键 Alt+Shift+F。

通过这些步骤，你可以有效地在 VS Code 中利用 Prettier 来保持你的代码风格一致性。这不仅可以提高代码的可读性，还可以在团队项目中促进协作。