如何在 Visual Studio Code (VSCode) 中格式化代码？

代码格式可通过以下快捷方式在 Visual Studio Code 中使用：

在 Windows 上 Shift + Alt + F

在 Mac 上 Shift + Option + F

在 Linux 上 Ctrl + Shift + I

或者，您可以使用 Ctrl +Shift+ P（或 Mac 上的 Command + Shift + P）通过编辑器中提供的“命令面板”找到快捷方式以及其他快捷方式，然后搜索格式文档。

对于未保存的片段

打开命令面板（Win：F1 或 Ctrl+Shift+P） 找到“更改语言模式”选择语言，例如 json。现在应该突出显示语法。格式化文档（例如打开命令面板->“格式化文档”）

取消格式化

选择文本命令面板 -> 连接线

'显示图片'

https://i.stack.imgur.com/wPRmb.png

---

代码格式化快捷键：

Windows 上的 Visual Studio 代码 - Shift + Alt + F

MacOS 上的 Visual Studio 代码 - Shift + Option + F

Ubuntu 上的 Visual Studio 代码 - Ctrl + Shift + I

如果需要，您还可以使用首选项设置自定义此快捷方式。

保存文件时的代码格式：

Visual Studio Code 允许用户自定义默认设置。

如果您想在保存时自动格式化您的内容，请在 Visual Studio Code 的工作空间设置中添加以下代码片段。

菜单文件 → 首选项 → 工作区设置

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

注意：现在您可以自动格式化 TypeScript 文件。检查我的更新。

---

您可以在菜单文件 → 首选项 → 键盘快捷键中添加键绑定。

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

或 Visual Studio，如：

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

---

右键单击文件内容区域（文本）的某处 从菜单中选择格式化文档： Windows：Alt+Shift+F Linux：Alt+Shift+I macOS：⌥+⇧+F

https://i.stack.imgur.com/kTc8U.png

---

右键组合是 Shift + Alt + F。

---

Visual Studio Code 1.6.1 支持“保存时格式化”，它将自动选择相关的已安装格式化程序扩展并在每次保存时格式化整个文档。

通过设置启用“保存时格式化”

"editor.formatOnSave": true

并且有可用的键盘快捷键（Visual Studio Code 1.7 及更高版本）：

格式化整个文档：Shift + Alt + F

仅格式选择：Ctrl + K、Ctrl + F

---

在 Linux 上是 Ctrl + Shift + I。

在 Windows 上是 Alt + Shift + F。使用 HTML/CSS/JavaScript 和 Visual Studio Code 1.18.0 测试。

对于其他语言，您可能需要安装特定的语言包。

---

对于 Fedora

单击文件 -> 首选项 -> 键盘快捷键。在默认键盘快捷键下，搜索 (Ctrl + F) 以查找 editor.action.format。

我的阅读"key": "ctrl+shift+i"

你也可以改变它。请参阅 this answer，了解如何...或者如果您有点懒得向上滚动：

您可以在 "Preferences->Keyboard shortcuts" { "key": "cmd+k cmd+d", "command": "editor.action.format" } 或 Visual Studio 中添加键绑定，例如：{ "key":" ctrl+k ctrl+d", "command": "editor.action.format" }

请注意：cmd 键仅适用于 Mac。对于 Windows 和 Fedora（Windows 键盘），使用 Ctrl

编辑：

根据 Visual Code 版本 1.28.2，这是我发现的。

editor.action.format 不再存在。它现在已被 editor.action.formatDocument 和 editor.action.formatSelection 取代。

在搜索框中键入 editor.action.format 以查看现有快捷方式。

要更改组合键，请执行以下步骤：

单击 editor.action.formatDocument 或 editor.action.formatSelection 左侧出现一个笔状图标 - 单击它。出现一个弹出窗口。按所需的组合键并按 Enter。

---

在 Ubuntu 上是 Ctrl + Shift + I。

---

菜单文件→首选项→设置

"editor.formatOnType": true

当您输入分号时，它将被格式化。

或者，您也可以使用 "editor.formatOnSave": true。

---

只需右键单击文本并选择“格式代码”。

Visual Studio Code 在内部使用 js-beautify，但它无法修改您希望使用的样式。扩展“美化”允许您添加设置。

---

Shift + Alt + F 在 1.17.2 及更高版本中可以很好地完成这项工作。

---

出于某种原因，Alt + Shift + F 在 Mac Visual Studio Code 1.3.1 上对我不起作用，实际上“格式化文档”命令根本不起作用。但是命令格式化程序工作得很好。

因此，您可以使用 Command + Shift + P 并键入 Formatter 或在菜单 File → Preferences → Keyboard Shortcuts → Command + K Command + S 中创建自己的快捷方式，然后键入 Formatter 并添加您的快捷方式。

看一个例子：

https://i.stack.imgur.com/qW5Ru.png

---

在 Visual Studio 中格式化代码。

我尝试在 Windows 8 中格式化。

只需按照下面的屏幕截图。

单击顶部菜单栏上的查看，然后单击命令调色板。然后会出现一个文本框，我们需要输入格式 Shift + Alt + F

---

在 Visual Studio Code 中，Shift+Alt+F 的作用与 Ctrl+K+D 在 Visual Studio 中的作用相同。

---

我在 Visual Studio Code (Ubuntu) 中使用的最简单方法是：

用鼠标选择要格式化的文本。

右键单击并选择“格式选择”。

---

在 Mac 上，Shift + Alt + F 适合我。

您可以随时检查菜单中的键绑定：

菜单文件→首选项→键盘快捷键并按关键字“格式”过滤。

---

在我为 Mac OS X、DNVM 和 DNX 安装 Mono 之前，C# 中的格式快捷方式对我不起作用。

在我安装 Mono 之前，自动格式化快捷键 (Shift + Alt + F) 仅适用于 .json 文件。

---

虽然更改 Visual Studio Code 的默认行为需要扩展，但您可以覆盖工作区或用户级别的默认行为。它适用于大多数受支持的语言（我可以保证 HTML、JavaScript 和 C#）。

工作区级别

好处

不需要扩展

可以在团队之间共享

结果

.vscode/settings.json 在项目根文件夹中创建

如何？

转到：菜单文件 → 首选项 → 工作区设置添加并保存 "editor.formatOnType": true 到 settings.json （通过创建 .vscode/settings.json 文件覆盖您工作的项目的默认行为）。

用户环境级别

好处

不需要扩展

个人开发环境 tweeking 来统治他们（设置:)）

结果

用户的 settings.json 被修改（参见下面的操作系统位置）

如何？

转到：菜单文件→首选项→用户设置在用户settings.json中添加或更改“editor.formatOnType”的值：false为“editor.formatOnType”：true

您的 Visual Studio Code 用户的 settings.json 位置是：

设置文件位置取决于您的平台，用户设置文件位于此处：

Windows：%APPDATA%\Code\User\settings.json

Mac：$HOME/Library/Application Support/Code/User/settings.json

Linux：$HOME/.config/Code/User/settings.json 工作区设置文件位于项目中的 .vscode 文件夹下。

here 可以找到更多详细信息。

---

选择文本，右键单击选择，然后选择选项“命令调色板”：

https://i.stack.imgur.com/sdXwt.png

将打开一个新窗口。搜索“格式”并根据要求选择具有格式的选项。

---

默认情况下，此键不适用于 HTML、CSS 和 JavaScript 文档。

搜索后，我找到了具有 133,796 次安装的流行插件 JS-CSS-HTML Formatter。

安装后，只需重新加载窗口并按 Ctrl + Shift + F，它就可以工作了！

---

只需安装 Microsoft 提供的 Visual Studio Keymap（Visual Studio 代码的 Visual Studio 键盘映射）。问题解决了。 :p

---

在 Mac 中，使用 ⌘+K，然后使用 ⌘+F。

---

您必须先安装适当的插件（即 XML、C# 等）。

在您安装相关插件并使用适当的扩展名保存文件之前，格式化将不可用。

---

对于那些想要自定义要格式化的 JavaScript 文件的用户，您可以使用 JSfiles 属性上的 any 扩展名。这同样适用于 HTML。

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

这将为 TypeScript 启用保存时美化，您可以将 XML 添加到 HTML 选项。

---

如果你想自定义格式文档的样式，你应该使用美化扩展。

参考这个截图：

https://www.evernote.com/l/Aaz3YH0uW7RGzI9lpfKbeihQqJ9Gazr7GDoB/image.png

---

Linux 上的 Visual Studio 代码：

Ctrl + [ 取消缩进代码块和

Ctrl + ] 进行批量缩进

---

不是这个。用这个：

菜单文件→首选项→工作区设置，“editor.formatOnType”：true

---

使用扩展...

保存文件时启用代码的自动格式化。

启动 Visual Studio Code 并快速打开 (Ctrl + P)，粘贴以下命令，然后按 Enter。

ext install format-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

---