如何在 VS Code 中格式化代码

作者
Tweet
Share
Share
Pin
0 Shares

在 Visual Studio Code (VS Code) 中编写代码时，代码的整洁度有时会被忽略。 虽然代码的格式不会影响程序的运行，但在调试和定位错误时，清晰的格式却能提供很大帮助。

本文将介绍如何在 VS Code 中格式化代码，并分享其他有助于保持代码组织有序的实用技巧。

代码格式化方法

VS Code 内置了代码格式化功能，可以将当前编写的代码按照标准格式进行排列。 这些快捷方式无需额外安装任何扩展，随时可以使用。 以下是常用的快捷键：

电脑端操作

格式化整个文档：

  • 首先，在 VS Code 中打开需要格式化的代码文件。
  • 按下 “Shift + Alt + F” 组合键，即可自动格式化整个文档。
  • 通过点击左上角的“文件”，然后选择“保存”，或者直接按 “Ctrl + S” 保存更改。

    • 仅格式化选中的代码：

  • 在代码文件中，用鼠标选中需要格式化的代码行。
  • 先按 “Ctrl + K” 组合键。
  • 接着按 “Ctrl + F” 组合键，即可格式化选中的代码。
  • 最后，通过点击左上角的“文件”，然后选择“保存”，或者直接按 “Ctrl + S” 保存更改。

    • 注意：如果直接按 “Ctrl + F”，会打开“查找”菜单，此时只需点击“x”按钮或者按 Esc 键即可关闭。

    上下移动代码行：

  • 将光标移动到需要移动的代码行开头。
  • 按住 Alt 键。
  • 按向上箭头键可以将代码行向上移动，按向下箭头键可以将代码行向下移动。
  • 通过选择左上角“文件”菜单中的“保存”，或按“Ctrl + S”键保存更改。

    • 调整单行代码的缩进：

  • 将光标移动到需要调整缩进的代码行开头。
  • 按 “Ctrl + ]” 组合键增加缩进。
  • 按 “Ctrl + [” 组合键减少缩进。
  • 通过选择“文件”菜单中的“保存”或按“Ctrl + S”来保存更改。

    • Mac 端操作

    格式化整个文档：

  • 打开需要格式化的代码文件。
  • 按下 “⇧ + ⌥ + F” 组合键。
  • 点击左上角的“文件”，然后选择“保存”，或者直接按 “⌘ + S” 保存更改。

    • 仅格式化选中的代码：

  • 选中需要格式化的代码部分。
  • 先按 “⌘ + K” 组合键。
  • 接着按 “⌘ + F” 组合键。
  • 通过按 “⌘ + S” 或从窗口左上角的“文件”菜单中选择“保存”来保存文件。

    • 注意：直接使用“⌘ + F”而没有事先按“⌘ + K”只会打开“查找”菜单。 要关闭“查找”菜单，只需按右侧的“x”或按 Esc 键。

    上下移动代码行：

  • 将光标放在要编辑的行的开头。
  • 按住 “⌥” 键。
  • 要向上移动一行，请按向上箭头。要向下移动它，请按向下箭头。
  • 通过从“文件”菜单中选择“保存”或按 “⌘ + S”来保存您的更改。

    • 调整单行代码的缩进：

  • 将光标移动到要更改缩进的行的开头。
  • 按 “⌘ + ]” 增加缩进。
  • 按 “⌘ + [” 减少缩进。
  • 按 “⌘ + S” 或从窗口左上角的“文件”菜单中选择“保存”来保存文件。

    • 在 VS Code 中保存时格式化代码

    VS Code 本身没有在保存时自动格式化文档的功能。不过，可以通过安装格式化扩展来实现此功能。最受欢迎的格式化扩展之一是 Prettier，它为 VS Code 提供了强大的格式化能力。 安装 Prettier 的步骤如下：

  • 打开 VS Code。
  • 点击左侧菜单栏的扩展按钮（图标看起来像四个方块）。或者，在 Windows 上按 “Ctrl + Shift + x”，在 Mac 上按 “⌘ + ⇧ + x” 打开扩展面板。
  • 在顶部的搜索栏中，输入 Prettier。
  • 点击 Prettier 图标右下角的安装按钮。
  • 等待扩展完成安装。

    • 安装 Prettier 后，还需要进行一些设置，才能使其在保存时自动格式化代码。具体步骤如下：

  • 在 Windows 上按 “Ctrl +,”，在 Mac 上按 “⌘ +,” 打开设置窗口。
  • 在搜索栏中输入 “formatter”，应该会显示几个相关的设置。
  • 在 “Editor: Default Formatter” 设置中，确保选择的扩展是 “Prettier”。 如果没有默认格式化程序，或者 VS Code 默认使用其他格式化程序，请按下拉箭头。从列表中选择 “Prettier – Code Formatter”。或者，Prettier 可能以 “esbenp.prettier-vscode” 的形式出现在列表中。
  • 确保选中 “Editor: Format On Save” 选项。 如果未选中，请勾选该复选框。
  • 在设置搜索栏中输入 “prettier”。
  • 向下滚动，直到找到 “Prettier: Require Config” 行。 确保该复选框已被勾选。 此设置可防止 Prettier 在没有配置文件的情况下格式化文档。 当您查看可能具有自己的格式规则的下载代码时，这很方便。 这可以防止您意外覆盖格式化选项。 请注意，即使选中此设置，无标题文件仍将自动格式化。
  • 您可以根据自己的喜好编辑特定的 Prettier 设置。 完成后，可以退出此菜单。

    • 由于您已将 Prettier 配置为仅在有配置文件时自动格式化，因此您必须为每个项目创建一个。 这是通过以下步骤完成的：

  • 在左侧菜单中选择项目的根目录。
  • 点击新建文件按钮，以创建配置文件。
  • 将此文件命名为 “.prettierrc”。
  • 在文件中，只需输入 `{}`。
  • Prettier 现在会在您保存文档时自动格式化您的文档。

    • 保持代码整洁的技巧

  • 虽然程序运行不需要缩进，但它可以帮助调试，通过将代码划分为可管理的模块。例如，If-Then 语句或嵌套案例可以通过使每个备选选项在视觉上彼此区分开来从中受益。 当你处理逻辑错误而不是语法错误时，这会很有帮助。
  • 如果你要命名模块或简短的代码行，请养成使用描述性名称的习惯，而不是简单地将其命名为模块 1、模块 2 等。这样可以更容易地理解代码的哪个部分执行特定的功能。
  • 使用注释总是一个好主意。 无论你是包含快速描述，还是只是为自己添加注释，注释在调试过程中都有很大的帮助。

    • 组织代码

    保持项目的格式正确不仅可以使其更容易阅读，还可以帮助识别错误并保持代码的组织性。 虽然这不是程序运行所必需的，但了解如何在 VS Code 中格式化文件是一个明显的优势。

    您知道在 VS Code 中格式化文件的其他方法吗？欢迎在下面的评论部分分享您的想法。