vscode配置Prettier代码格式化工具

1. 安装 Prettier 扩展

1. 打开 VSCode。
2. 点击左侧活动栏中的扩展图标（或使用快捷键 Ctrl + Shift + X）。
3. 在搜索框中输入 Prettier - Code formatter，找到并安装该扩展。

2. 配置 Prettier 作为默认格式化工具

1. 打开设置：

   • 点击左下角的齿轮图标，选择“设置”。
   • 或者使用快捷键 Ctrl + ,（Windows/Linux）或 Cmd + ,（Mac）。

2. 在设置搜索框中输入 default formatter，找到 Editor: Default Formatter 选项。

3. 将其设置为 esbenp.prettier-vscode（即 Prettier 的标识）。

3. 启用自动格式化

1. 在设置中搜索 format on save。
2. 找到 Editor: Format On Save 选项，并勾选它。这样在每次保存文件时，Prettier 会自动格式化代码。

 通过以上三部，就可以完成保存代码自动格式化的效果。如果需要自定义格式化格式，可以进行第四步进行配置。

4. 配置 Prettier 选项

你可以通过创建一个配置文件来定制 Prettier 的行为。可以在项目根目录下创建 .prettierrc 文件，内容示例如下：

{
  "semi": true,                  // 是否在语句末尾添加分号
  "singleQuote": true,           // 使用单引号而不是双引号
  "tabWidth": 2,                 // 每个缩进级别的空格数
  "trailingComma": "es5",        // 在 ES5 中有效的对象和数组末尾添加逗号
  "bracketSpacing": true,        // 对象字面量中的括号之间加空格
  "jsxBracketSameLine": false    // 在 JSX 中将 `>` 放在最后一行的末尾
}

5. 使用 Prettier 格式化代码

• 你可以在编辑器中手动格式化代码，使用快捷键 Shift + Alt + F（Windows/Linux）或 Shift + Option + F（Mac）。
• 也可以通过命令面板（Ctrl + Shift + P 或 Cmd + Shift + P）输入 Format Document 来格式化当前文件。

6. 解决可能的冲突

如果你同时安装了其他格式化工具（如 ESLint），可能会出现冲突。确保在设置中将 Prettier 设置为默认格式化工具，并根据需要调整 ESLint 的配置。

总结

通过以上步骤，你可以在 VSCode 中成功配置 Prettier 来格式化 JavaScript 代码。根据项目需求调整配置文件，以保持代码风格的一致性和可读性。