介绍

一致地格式化代码可能是一个挑战，尤其是在团队中工作时。现代 Web 开发的美妙之处在于工具变得更好了！本文将指导您设置Prettier以自动在 Visual Studio Code 中格式化您的代码。

示例代码

出于演示目的，这里是我们将格式化的示例代码。如果您对代码格式很挑剔，您可能会立即发现一些明显的错误。

• 单引号和双引号的混合
• person 对象的第一个属性应该在它自己的行上
• 函数内部的控制台语句应该缩进
• 您可能喜欢也可能不喜欢围绕箭头函数参数的可选括号

安装 Prettier 扩展

要在 Visual Studio Code 中使用 Prettier，您需要安装扩展。搜索更漂亮的代码格式化程序。您可以在下面看到扩展名。如果你是第一次安装它，你会看到一个“安装”按钮，而不是你在我的上看到的“卸载”按钮。

格式化文档命令

安装 Prettier 扩展后，我们现在可以利用它来格式化我们的代码。我们稍后会对此进行更多工作，但我们可以使用“格式化文档”命令来开始。

要打开命令面板，您可以Command + Shift + P在 Mac 或Control + Shift + PWindows 上使用。在命令面板中，搜索格式，然后选择Format Document。

然后可能会提示您选择要使用的格式。为此，请单击配置按钮。

然后选择Prettier-Code Formatter。

然后瞧！您的代码很好且格式正确。注意所有花哨的改进！

• 间距
• 换行
• 一致的报价

这也适用于 CSS 文件。由此：

对此！

保存时自动格式化

到目前为止，我们不得不运行一个命令来手动格式化我们的代码。相反，您可以在 VS Code 中选择一个设置，以便在保存文件时自动格式化文件。这有一些很大的好处。

您永远不必再次手动格式化您的代码！

• 确保代码格式化而无需考虑
• 未格式化的代码未检入

要更改此设置，请Command + ,在 Mac 或Control + ,Windows 上使用以打开设置菜单。然后搜索Editor: Format on Save并确保选中它。

有了这个设置，您就可以像我们所有人一样编写草率格式的代码，知道这一切都会自动为您处理。

VS Code 设置中更漂亮的配置

Prettier 默认为你做了很多事情，但你也可以自定义设置。以下是一些最常见的设置。

• 单引号 – 在单引号和双引号之间进行选择
• Semi – 选择是否在行尾包含分号
• 制表符宽度 – 您希望制表符包含多少个空格

打开上面的设置菜单。然后，搜索Prettier。这将显示您可以在编辑器中更改的所有设置。

例如，如果我将选项卡宽度更改为 10。

然后保存我的文件。

这可能不是您想要保留的标签宽度大小，但这完全取决于您！

创建更漂亮的配置文件

在 VS Code 中使用内置设置菜单的缺点是它不能确保团队中开发人员之间的一致性。如果您更改 VS Code 中的设置，其他人的设置可能会完全不同。

通过创建配置文件在您的团队中建立一致的格式！

为了解决这个问题，您可以创建一个 Prettier 配置文件。它必须被命名为.prettierrc。( ext ) 具有以下扩展名之一。

• yml、yaml 或 json
• js
• 汤姆
• 包含在 package.json 文件中（替代选项）

我通常更喜欢 JSON 配置文件，您可以在其中为您的设置定义键->值对。VS Code 甚至会在您键入时为您提供一些智能感知。

这是一个简单配置文件的示例。

有关配置文件的更多细节，请查看Prettier Docs。创建其中之一并将其签入您的项目后，您可以确保每个团队成员都遵循相同的格式规则。

结论

Prettier is a helpful tool for manually formatting your code. It takes time that can be better spent writing more code. Take advantage of the amazing modern tools out there and set up Prettier.