Visual Studio Code，俗称 VS Code，是最常用的代码编辑器之一。 VS Code 内置了对 Node.js、JavaScript 和 TypeScript 的支持。 但是，您可以使用各种扩展来使其可供大多数其他语言和运行时访问。
Microsoft 是开发此免费开源代码编辑器的公司。
由于这些功能，VS Code 很受欢迎；
- Intellisense：VS Code 提供代码自动完成和语法高亮显示。
- 跨平台：您可以在 Linux、Windows 和 macOS 操作系统上使用此代码编辑器。
- 各种扩展的可用性：各种扩展的可用性也可以将 VS Code 转变为集成开发环境 (IDE)。
- 多语言支持：您可以通过 VS Code 扩展将此工具与几乎所有编程语言一起使用。
- 集成终端：VS Code 中的内置终端允许开发人员直接从代码编辑器执行 Git 命令。 因此，您可以从此编辑器提交、推送和拉取更改。
VS Code 中的自动格式化
先决条件
- VS Code：此代码编辑器可免费下载。 如果您的机器上没有安装它，请根据您的操作系统从官方网站下载它。
- 选择要使用的语言：您必须决定要使用的语言，因为不同的语言有不同的格式化程序。
- 格式化程序：VS Code 使用扩展来格式化代码。 我们将在本文中使用 Prettier。 但是，您可以自由使用适合您所用语言的任何格式化程序。
自动格式化是一种功能，可根据特定规则和准则自动格式化代码块/代码行或代码编辑器上的文件。 此功能基于指定缩进、换行和间距格式规则的配置文件。
启用自动格式功能后，所有这些规则将在您编写代码时应用于代码库中的所有文件。
但是，如果您希望特定代码块从其他代码块中脱颖而出，您也可以禁用自动格式化。 为此，您可以将这段代码包装在一个注释块中，该注释块指定要应用的规则。
在 VS 代码中自动格式化代码的好处
- 节省时间：编写代码和格式化可能非常耗时。 自动格式化可以节省您的时间，因此您可以更专注于写作过程和语法。
- 一致性：即使源代码没有出现在客户端，也应该有一定的一致性。 自动格式化很有用，特别是对于有多个贡献者的大型项目。
- 遵循最佳实践：自动格式化功能在强制执行一致的缩进、间距和命名约定方面非常有用。
- 为了便于代码阅读：格式良好的代码在代码审查期间很容易遵循。 加入您组织的新开发人员将很容易理解格式良好的代码。
如何在 VS 代码中启用自动格式并自定义它
请按照以下步骤启用自动格式化：
在 VS Code 上安装 Prettier 后，您可以启用自动格式化功能。
我们使用登录页面的简单 HTML 文件来演示如何启用自动格式化。
我们将使用这段代码：
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
尽管上面的代码是有效的，但由于它没有按预期缩进，因此很难阅读和跟进。 我们将使用 Prettier 自动格式化代码。
按着这些次序。
3. 在搜索栏中输入 Formatter，然后在 Editor:Default Formatter 选项卡上选择 Prettier。
4. 找到 Editor: Format on Save 并勾选方框。
5. 保存您的 HTML 文件，在您的 HTML 文档中选择输入，右击并选择格式文档。
6. 检查您的文档是否已格式化。 此扩展将自动格式化您在 VS Code 上编写的所有其他代码。
6. 调整 Prettier 配置设置：Prettier 默认设置为执行许多操作。 但是，您仍然可以自定义它以满足您的需要。 转到 VS Code 上的设置，搜索 Prettier，然后根据自己的喜好调整设置。
7. 创建一个更漂亮的配置文件：如果你作为一个团队工作，你在你的机器上配置的设置可能与其他人不同。 Prettier 配置文件将确保您的项目具有一致的代码风格。 创建一个扩展名为 .json 的 .prettierrc 文件来配置项目设置。 我们可以将此代码添加到 JSON 文件中以进行演示；
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
上面的代码块指定了四件事，尾随逗号、制表符宽度、分号的使用以及是否使用单引号或双引号。 在这种情况下;
- 仅当代码被转译为 es5 时才会添加尾随逗号。
- 制表符宽度，即每个制表符的空格数，设置为 4。
- Semi 表示是否应该在语句末尾添加分号。 我们设置为false，即不添加分号。
- 您可以在代码中使用单引号或双引号。 我们已经指定我们应该为这个项目使用单引号。
您可以查看 Prettier 文档以了解如何创建一致的配置设置。
VS Code 中自动格式化的最佳实践
使用正确的格式
尽管我们在本文中出于演示目的使用了 Prettier，但这并不意味着它适用于所有语言。 VS Code 有数百种格式扩展，您可以自行决定适合您的需求。 例如，Prettier 和 Beautify 等格式化程序适合 HTML 和 CSS。 另一方面，您可以使用 Black 或 Python 扩展来格式化您的 Python 代码。
使用一致的代码风格
如您所见，您可以自定义格式化程序的设置。 如果您作为一个团队工作，请确保您具有相同的配置以创建一致的代码风格。 最好的方法是创建一个 .prettierrc.extension 文件以包含项目的所有配置。
使用 linters
您可以使用 linters 检查代码中的样式违规、语法错误和编程错误。 将 linters 与自动格式化相结合将为您节省大量时间和精力，使您的代码可读和调试。
使用键盘快捷键
VS Code 有数百个快捷方式来节省你格式化的时间。 您甚至可以将这些命令自定义成令人难忘的东西。
在提交之前检查你的代码
尽管 linting 和自动格式化可能会解决您代码中的一些问题； 在输入提交命令之前，您仍然需要检查您的代码。
代码格式化快捷方式
VS Code 是一个多平台代码编辑器，可以在 Windows、Mac 和基于 Linux 的系统（例如 Ubuntu）上使用。 您可以使用以下快捷方式来格式化整个文档或代码的特定突出显示区域；
视窗
- Shift + Alt + F 组合格式化整个文档。
- Ctrl + K、Ctrl + F 组合格式化您选择的代码部分。 例如，一个分区。
苹果系统
- Shift + Option + F 组合格式化整个文档。
- Ctrl + K、Ctrl + F 组合格式化您选择的代码部分。 例如，一个分区。
Ubuntu
- Ctrl + Shift + I 组合格式化整个文档。
- Ctrl + K、Ctrl + F 组合格式化您选择的代码部分。 例如，一个分区。
但是，请注意，如果您使用各种快捷方式自定义 VS Code，其中一些快捷方式可能会失败。
您可以使用这些步骤检查您的 VS Code 快捷方式；
- 打开 VS Code，然后单击左上角的文件项。
- 滚动到首选项
- 单击键盘快捷键以查看您可以使用的所有快捷键。
结论
启用自动格式化可以为您节省大量时间。 扩展的选择将根据您使用的语言而有所不同。 您可以安装多个代码格式化程序，具体取决于您在项目中使用的编程语言。
始终检查您为代码选择的格式化程序的文档。 这将确保您了解它支持的语言以及如何充分利用它。
查看我们关于开发人员应使用的最佳 VS Code 扩展的文章。
