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

Question

在Windows的Visual Studio中，有没有类似于 Ctrl + K + F 和 Ctrl + K + D这样的快捷键用于格式化或“美化”代码？同样的问题也适用于Visual Studio Code编辑器。

- Brandon Clapp

---

对于那些拼命想要格式化XML（似乎当前无法直接完成），你可以通过安装扩展来实现。我发现 XML Tools 能够很好地完成这项工作。免责声明：我不是该项目的作者也与之无关。 - informatik01

虽然 VSCode 的菜单选项比 VS 少得多（新趋势？），但它在“帮助”菜单下有广泛的信息和教程，可能已经回答了这个问题。 - Roland

对于那些在尝试使用 Visual Studio Code 中的有效组合后仍然无法使格式化工作的人，请不要忘记选择适当的编程语言类型，它位于视觉工作室代码窗口右下角旁边的笑脸旁边。一旦你这样做了，我发现它可以直接使用，你不需要任何额外的插件来格式化代码。 - Mr.Hunt

Answer 1

在Visual Studio Code中，代码格式化可以通过以下快捷键实现：

• Windows：Shift + Alt + F
• Mac：Shift + Option + F
• Linux：Ctrl + Shift + I

另外，您也可以通过子菜单View / Command Palette (Win: Ctrl + Shift + P) 或 (Mac： Command + Shift + P) 找到这些快捷键及其他快捷键，并搜索format document进行格式化。

对于未保存的片段

1. 打开命令面板 (Win: F1 或 Ctrl+Shift+P)

2. 找到“更改语言模式”

3. 选择要使用的语言，例如json。此时语法应该会被突出显示。

4. 格式化文档（例如：打开命令面板->“Format Document”）

取消格式化

1. 选择文本
2. 命令面板 -> 加入行

'查看图片'

- Brandon Clapp

---

请注意编程语言必须正确。例如，如果选择了纯文本，则格式化代码不可用，但切换到JSON等其他格式后将可以轻松地格式化所选文本。（无论如何，就像文本编辑器能够做到的那样高兴） - Stephen Price

在Ubuntu上，我打开了“文件”>“首选项”>“键盘快捷方式”菜单。其中有一个项目为{"key": "ctrl+shift+i", "command": "editor.action.format", "when": "editorTextFocus" }。使用“Ctrl + Shift + i”命令对我有效。 - Asheesh

显然，该文件需要先保存到磁盘上。我有一段HTML+Javascript代码，其中JS无法格式化，所以我将它粘贴到一个临时窗口并设置了语言，但这也没有帮助，直到它被保存。 - Jonas

对于那些认为在 Mac 上无法正常工作的人来说，这似乎是快捷键和 OS X 文本输入系统之间的冲突，用于输入重音字符，这取决于您配置的语言环境和键盘设置：https://github.com/Microsoft/vscode/issues/8914#issuecomment-245947844 - Chris Adams

最新版本的VS Code和Win 10中，这对我不起作用，这是否假定已安装某个特定的扩展程序？ - Jay

Answer 2

代码格式化快捷键：

Windows下的Visual Studio Code - Shift + Alt + F

MacOS下的Visual Studio Code - Shift + Option + F

Ubuntu下的Visual Studio Code - 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文件。请查看我的更新。

- Bharathi Devarasu

---

不确定为什么在CentOS中会有所不同，但快捷键是Shift + Alt + I。 - a11smiles

在安装了ESLint扩展程序的情况下，beautify.onSave无效。 - Ben Petersen

@ClintEeastwood，尝试在你的VS Code设置中使用prettier.singleQuote: true。 - Enn

找不到“工作区设置”，只有“文件”>“首选项”>“设置”。 - Tola Odejayi

@shaijut 它位于 文件 --> 首选项 --> 设置，然后在搜索栏下面你会看到 用户，右边写着 工作区。 - Mark van der Dam

Answer 3

1. 在文件内容区域（文本）的某个位置右键单击
2. 从菜单中选择格式化文档：
   • Windows：Alt+Shift+F
   • Linux：Alt+Shift+I
   • macOS：⌥+⇧+F

- Siddarth Kanted

---

对于 Linux 系统，键盘快捷键是 Ctrl + Shift + I。 - Lucas

谢谢，当我的默认格式化程序链接到错误的程序时，这很有帮助。您将看到一个额外的选项“使用...格式化文档”。 - BMW

Answer 4

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

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

或者类似于 Visual Studio：

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

- hardkoded

---

在Windows中，把“cmd”替换成“ctrl”——不要像我一样盲目地复制粘贴！ - Jens Ehrich

"editor.action.format"功能已恢复。现在，如果未选择任何内容，则会格式化整个文档；否则，它会格式化所选内容。 - Red Riding Hood

Answer 5

正确的快捷键组合为Shift+Alt+F。

- César

---

当你只是从剪贴板复制代码到一个新的标签页时，什么也不会发生。 解决方案：将代码保存到一个带有相关文件扩展名的文件中（例如*.json）。然后它就可以工作了。 我想原因是美化程序根据扩展名知道语言，而不是基于代码进行自动检测。 - Beauty

这个快捷键适用于MAC。在Windows中，它会格式化代码。 - C. Damoc

快捷键在不同的操作系统中是不同的，对于Linux来说是 Ctrl + Shift + I。 - Hamza Khanzada

Answer 6

Visual Studio Code 1.6.1支持“保存时格式化”，它将自动获取相关安装的格式化扩展，并在每次保存时对整个文档进行格式化。

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

"editor.formatOnSave": true

还有可用的快捷键（Visual Studio Code 1.7及以上版本）：

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

仅格式化所选内容：Ctrl + K，Ctrl + F

- Dariusz

---

我建议在VS Code中使用EsLint扩展 https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint - Dariusz

如何与自动保存配合使用？如果我进行编辑，则必须进行自动保存和自动格式化。我无法弄清楚如何在VS Code上实现这一点。 - Vandan Revanur

Answer 7

在Linux上，使用Ctrl+Shift+I。在Windows上则是Alt+Shift+F。已在HTML/CSS/JavaScript和Visual Studio Code 1.18.0中进行测试。对于其他语言，可能需要安装特定的语言包。

- Niklas Rosencrantz

Answer 8

针对 Fedora 的设置：

1. 点击 文件 -> 首选项 -> 键盘快捷键.
2. 在 默认键盘快捷键 中，使用 (Ctrl + F) 搜索 editor.action.format。

我的设置是 "key": "ctrl+shift+i"

您也可以更改它。请参考这个答案来了解如何更改...或者如果您感到有些懒得向上滚动：

---

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

{ "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 以查看现有的快捷键。

按照以下步骤更改键组合：

1. 单击 editor.action.formatDocument 或 editor.action.formatSelection
2. 左侧出现类似钢笔的图标-点击它。
3. 弹出一个窗口。按下所需的键组合并按 Enter。

- abyshukla

---

使用这个命令，在我的 TypeScript 文件中，单引号会变成双引号。如何解决这个问题？ - DioBrando

似乎无法在新的设置垃圾 UI 中找到此项。 - Oliver Dixon

@DioBrando，你可能想要检查一下你使用的TypeScript格式化扩展。 - abyshukla

Answer 9

在Ubuntu中，快捷键为Ctrl + Shift + I。

- ranbuch

---

我想这取决于使用的编程语言。例如，CTRL + SHIFT + I 在 JavaScript 中可行，但在 PHP 中不可行。 - Jamie Carl

Answer 10

菜单 文件 → 偏好设置 → 设置

"editor.formatOnType": true

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

另外，您也可以使用"editor.formatOnSave": true。

- M Fatih Koca

---

奇怪的是，在某些情况下，我发现这个设置的行为可能与 shift+alt+f 不同。不知道为什么！ - default_noob_network

当我启用此功能并在C#中创建一个函数时，我可以完成整个过程并继续进行，但是直到我使用“格式化文档”功能之后，该函数才会被格式化。我不知道为什么上述设置在输入函数后不能自动格式化。 - Daniel Jackson