【问题标题】：How do you format code in Visual Studio Code (VSCode)?如何在 Visual Studio Code (VSCode) 中格式化代码？
【发布时间】：2021-03-02 01:58:02
【问题描述】：

Ctrl + K + F和Ctrl + K的等价物是什么kbd> + D 在 Visual Studio 中的 Windows 上用于格式化，或在 Visual Studio 代码编辑器中“美化”代码？

【问题讨论】：

对于那些拼命尝试格式化 XML 的人（目前这似乎不可能开箱即用），您可以通过安装扩展来实现这一点。我发现XML Tools 可以很好地完成工作。 免责声明：我不是作者，也与该项目无关......
虽然 VSCode 的菜单选项比 VS 少得多（新趋势？），但它的 HELP 菜单下有大量信息和教程，可能已经回答了这个问题。
对于那些即使在 Visual Studio Code 中尝试了有效组合后仍难以获得格式化工作的人，不要忘记选择适当的编程语言类型，它位于 Visual Studio Code 的右下角那个笑脸旁边的窗户。一旦你这样做了，我发现它开箱即用，你不需要任何额外的插件来格式化代码。

标签： code-formatting visual-studio-code

【解决方案1】：

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

在 Windows 上 Shift + Alt + F
在 Mac 上 Shift + 选项 + F
在 Linux 上 Ctrl + Shift + I

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

对于未保存的sn-ps

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

取消格式化

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

'显示图片'

【讨论】：

另请注意，代码语言必须正确。即，如果选择纯文本，则格式代码将不可用，但切换到 JSON（例如）将愉快地格式化所选文本。（就像文本编辑器一样快乐）
@JoSmo：在 Ubuntu 上，我打开了文件 > 首选项 > 键盘快捷键。 { "key": "ctrl+shift+i", "command": "editor.action.format", "when": "editorTextFocus" } 有一个项目。命令“ctrl+shift+i”对我有用。
另外，显然文件必须先保存到磁盘。我有一大段 HTML+Javascript 无法格式化 JS，所以我将它粘贴到一个临时窗口并设置语言，但这在保存之前也无济于事。
对于那些说它在 Mac 上不起作用的人来说，这看起来像是快捷方式和 OS X 文本输入系统之间的重音字符冲突，这取决于您配置的区域设置和键盘设置：@ 987654323@
这在 VS Code 最新版本和 win 10 上对我不起作用，这是否假设安装了某个扩展？

【解决方案2】：

代码格式化快捷键：

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

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

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

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

保存文件时的代码格式：

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

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

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

{
    // 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 文件。检查我的更新。

【讨论】：

不知道为什么它在 CentOS 中有所不同，但它是 Shift + Alt + I
beautify.onSave 在安装了 eslint 扩展后无效
@ClintEeastwood 尝试在你的 vs 代码设置中使用prettier.singleQuote: true。
找不到“工作场所设置”，只有“文件”>“首选项”>“设置”。
@shaijut 它位于File --> Preference --> Settings，然后在搜索栏下您会看到User，然后在右侧显示Workspace

【解决方案3】：

您可以在菜单 File → Preferences → Keyboard 快捷方式中添加键绑定。

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

或 Visual Studio 之类的：

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

【讨论】：

在 Windows 中，将 cmd 替换为 ctrl - 不要像我一样盲目地复制和粘贴！
"editor.action.format" 又开始工作了。如果未选择任何内容，它现在会格式化整个文档，否则会格式化所选内容。

【解决方案4】：

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

【讨论】：

对于 Linux，键盘快捷键是 Ctlr + Shift + I
谢谢，当我的默认格式化程序链接到错误的格式化程序时，这很有帮助。您将看到一个额外的选项“使用...格式化文档”

【解决方案5】：

右键组合是Shift + Alt + F。

【讨论】：

当您只是将代码从剪贴板复制和粘贴到新标签，则什么也不会发生。解决方案：将代码保存到具有相关文件扩展名的文件（例如*.json）。然后它工作。我想原因是美化器知道扩展中的语言并且没有根据代码进行自动检测。
此快捷方式适用于 MAC。在 Windows 中，它会格式化代码。
不同操作系统的快捷键是不同的，对于Linux它的Ctrl + Shift + I

【解决方案6】：

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

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

"editor.formatOnSave": true

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

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

仅格式化选择：Ctrl + K, Ctrl + F

【讨论】：

我建议 VS Code 的 EsLint 扩展 marketplace.visualstudio.com/…

【解决方案7】：

在 Linux 上是 Ctrl + Shift + I。

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

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

【讨论】：

【解决方案8】：

对于 Fedora

点击File -> Preferences -> Keyboard shortcuts。
在Default Keyboard Shortcuts 下，搜索（Ctrl + F）editor.action.format。

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

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

您可以在“首选项->键盘快捷键”中添加键绑定

{ "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。

【讨论】：

使用这个命令，在我的 TypeScript 文件中，单引号变成了双引号。如何解决？
似乎无法在新的设置垃圾 UI 中找到它。
@DioBrando，您可能需要检查您使用的 TypeScript 格式化扩展。

【解决方案9】：

在 Ubuntu 上是 Ctrl + Shift + I。

【讨论】：

我猜这取决于语言。例如，CTRL + SHIFT + I 适用于 JavaScript，但不适用于 PHP。

【解决方案10】：

菜单文件 → 首选项 → 设置

"editor.formatOnType": true

当你输入分号时，它会被格式化。

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

【讨论】：

奇怪的是，我发现此设置的行为在某些情况下可能与 shift+alt+f 不同。不知道为什么！
当我启用此功能并在 C# 中创建一个函数时，我可以完成整个事情并继续前进，但直到我执行“格式化文档”功能后该函数才被格式化。不知道为什么上面的设置在输入函数后没有格式化。

【解决方案11】：

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

Visual Studio Code 在内部使用js-beautify，但它缺乏修改您希望使用的样式的能力。扩展“美化”让您可以添加设置。

【讨论】：

当然，我使用的是 Windows，它的工作方式与描述的一样——它可能取决于 VScode 版本（请更新！）和文件扩展名。请使用 HTML 进行测试。
这是扩展名：marketplace.visualstudio.com/items?itemName=HookyQR.beautify

【解决方案12】：

Shift + Alt + F 在 1.17.2 及更高版本中可以正常工作。

【讨论】：

【解决方案13】：

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

所以您可以使用 Command + Shift + P 并键入 Formatter 或在菜单中创建自己的快捷方式文件 → 首选项 → 键盘快捷键 → 命令 + K 命令 + S 然后输入 Formatter 并添加您的快捷方式。

看一个例子：

【讨论】：

【解决方案14】：

在 Visual Studio 中格式化代码。

我已尝试在 Windows 8 中格式化。

只需按照下面的屏幕截图进行操作即可。

点击顶部菜单栏上的查看，然后点击命令面板。
然后会出现一个文本框，我们需要输入 Format

Shift + Alt + F

【讨论】：

有时我将粘贴的 xml 复制到一个新文件中，并希望在不保存文件的情况下对其进行格式化。这非常适合这种情况！

【解决方案15】：

在 Visual Studio Code 中，Shift+Alt+F 正在执行 Ctrl+K +D 在 Visual Studio 中做。

【讨论】：

【解决方案16】：

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

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

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

【讨论】：

【解决方案17】：

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

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

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

【讨论】：

在我的 M1 Mac 上，我没有看到 alt 键

【解决方案18】：

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

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

【讨论】：

为了格式化 C# 需要安装扩展。通常omnisharp应该可以工作。但是，omnisharp 中存在一个错误。在修复错误之前，我们必须使用 Leopotam.csharpfixformat 扩展名。它覆盖了omnisharp。安装 C# FixFormat 扩展后，我可以再次格式化文档。

【解决方案19】：

虽然更改 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。

【讨论】：

但是后果是什么？更改后它将如何实际工作？它会在输入内容时立即/自动更改格式吗？还在粘贴？
@PeterMortensen 试试看并评论答案

【解决方案20】：

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

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

安装后，只需重新加载窗口并点击 Ctrl + Shift + F，就可以了！

【讨论】：

是的，但只有 2 颗星（满分 5 星）？认真的吗？
提醒一下：这个答案最初是在 2017 年编写的，当时 VS Code 功能通过插件或其他黑客几乎可以发挥作用，当时没有其他解决方案对我有用，所以我自己发现了那个时候确实有效，并不关心它有多少颗星 :-) 现在 2020 年和开箱即用的格式支持非常棒。
我认为 VS Code 还不支持开箱即用的 CSS 格式。我安装了 Prettier 插件 (prettier.io)，它处理 JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML。 560 万次安装和 4 颗星。
我很高兴你发现 prettier :P 格式支持，但不如 prettier 好，我在所有带有 .prettierrc 和插件的项目中都使用 prettier 作为开发依赖项。恐怕有一天 prettier 会合并到 vs-code 中 :)

【解决方案21】：

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

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

【讨论】：

【解决方案22】：

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

【讨论】：

太棒了！谢谢

【解决方案23】：

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

【讨论】：

有效！但在此之前，我使用右下角的状态栏将语言从 Plain Text 更改为 JSON。

【解决方案24】：

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

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

【讨论】：

Beautify 会询问您是否不知道使用哪种格式化程序，允许您设置 cshtml 样式。
由于这是解决许多在 Visual Studio Code 中寻找格式化 C#、PHP、CSS 和其他语言的人所面临的问题的唯一答案，因此它值得拥有更全面的内容。（他们的问题是：“为什么这不起作用？？？？这里的所有答案都声称它起作用！”）
我认为内容应该在这个答案中（作为对（锁定的）规范问题的答案），但 C# 的可能解决方案在 Visual Studio Code doesn't format C# code跨度>

【解决方案25】：

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

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

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

【讨论】：

我把这个放在哪里？它还有助于添加美化是一个扩展......
您可以提到将这段代码放在哪里。
@gromit190 你应该把它放在settings.json。打开命令面板（Windows：Ctrl+Shift+P。Mac：Cmd+Shift+P），然后输入'Open Settings (JSON)'。

【解决方案26】：

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

参考这个截图：

【讨论】：

【解决方案27】：

不是这个。使用这个：

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

【讨论】：

不是这个是什么？你指的是另一个答案吗？如果是，是哪一个？

【解决方案28】：

Linux 上的 Visual Studio 代码：

Ctrl + [ 取消缩进代码块和

Ctrl + ] 进行批量缩进

【讨论】：

【解决方案29】：

使用扩展...

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

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

ext install format-on-save

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

【讨论】：

链接是死扩展 404？