如何在VisualStudioCode中使用Prettier格式化代码
介绍
一致地格式化代码可能是一个挑战，尤其是在团队合作时。 现代 Web 开发的美妙之处在于工具变得更好了！ 本文将指导您设置 Prettier 以在 Visual Studio Code 中自动格式化您的代码。
示例代码
出于演示目的，这是我们将格式化的示例代码。 如果您对代码格式很挑剔，您可能会立即发现一些明显的错误。
- 单人与单人的混合 双引号
- person 对象的第一个属性应该在它自己的行上
- 函数内部的控制台语句应该缩进
- 您可能喜欢也可能不喜欢箭头函数参数周围的可选括号
安装 Prettier 扩展
要在 Visual Studio Code 中使用 Prettier，您需要安装扩展。 搜索 Prettier - 代码格式化程序 。 你可以看到下面的扩展。 如果您是第一次安装它，您会看到一个“安装”按钮，而不是您在我的设备上看到的“卸载”按钮。
格式化文档命令
安装 Prettier 扩展后，我们现在可以利用它来格式化我们的代码。 稍后我们将对此进行更多工作，但我们可以使用 Format Document 命令开始。
要打开命令面板，您可以在 Mac 上使用 Command + Shift + P 或在 Windows 上使用 Control + Shift + P。 在命令面板中，搜索 format, 然后选择 Format Document。
然后可能会提示您选择要使用的格式。 为此，请单击 配置 按钮。
然后选择 Prettier - Code Formatter。
然后瞧！ 您的代码很好并且格式化。 注意所有花哨的改进！
- 间距
- 换行
- 一致的报价
这也适用于 CSS 文件。 由此：
至此！
保存时自动格式化
到目前为止，我们不得不运行一个命令来手动格式化我们的代码。 相反，您可以在 VS Code 中选择一个设置，让您的文件在保存时自动格式化。 这有一些很大的好处。
您永远不必再次手动格式化您的代码！
- 确保代码已格式化，无需考虑
- 未检查未格式化的代码
要更改此设置，请在 Mac 上使用 Command + , 或在 Windows 上使用 Control + , 打开设置菜单。 然后搜索 Editor: Format on Save 并确保它被选中。
有了这个设置，你就可以像我们一样编写格式草率的代码，因为你知道这一切都会自动为你处理好。
VS Code 设置中的更漂亮的配置
Prettier 默认为你做了很多事情，但你也可以自定义设置。 以下是一些最常见的设置。
- 单引号 - 在单引号和双引号之间选择
- Semi - 选择是否在行尾包含分号
- 选项卡宽度 - 您希望选项卡包含多少个空格
如上所述打开设置菜单。 然后，搜索 Prettier。 这将显示您可以在编辑器中更改的所有设置。
例如，如果我将标签宽度更改为 10。
然后保存我的文件。
这可能不是您想要保留的标签宽度大小，但这完全取决于您！
创建更漂亮的配置文件
在 VS Code 中使用内置设置菜单的缺点是它不能确保团队中开发人员的一致性。 如果您更改 VS Code 中的设置，其他人的设置可能会完全不同。
通过创建配置文件在您的团队中建立一致的格式！
为了解决这个问题，您可以创建一个 Prettier 配置文件。 它的标题必须为 .prettierrc.(ext) 并具有以下扩展名之一。
- yml、yaml 或 json
- js
- 通俗易懂
- 包含在 package.json 文件中（替代选项）
我通常更喜欢 JSON 配置文件，您可以在其中为您的设置定义 key -> value 对。 VS Code 甚至会在您键入时为您提供一些智能感知。
这是一个简单配置文件的示例。
有关配置文件的更多详细信息，请查看 Prettier Docs。 创建其中一个并将其签入您的项目后，您可以确保每个团队成员都遵循相同的格式规则 .
结论
Prettier 是手动格式化代码的有用工具。 花费时间可以更好地编写更多代码。 利用那里令人惊叹的现代工具并设置 Prettier。
