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

Question

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

score 4836 · Accepted Answer

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

在 Windows Shift+ Alt+F
在 Mac Shift+ Option+F
在 Linux Ctrl+ Shift+I

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

对于未保存的片段

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

取消格式化

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

'显示图片'

score 524 · Accepted Answer

代码格式化快捷键：

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

MacOS 上的 Visual Studio Code - 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 文件。检查我的更新。

score 227 · Accepted Answer

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

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

或Visual Studio，如：

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

score 223 · Accepted Answer

右键单击文件内容区域（文本）中的某处
从菜单中选择格式化文档：
- 窗户：Alt+ Shift+F
- Linux: Alt+ Shift+I
- 苹果系统：⌥</kbd>+⇧</kbd>+F

score 119 · Accepted Answer

119

正确的组合键是Shift+ Alt+ F。

于 2015-07-09T10:57:04.540 回答

score 73 · Accepted Answer

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

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

"editor.formatOnSave": true

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

格式化整个文档：Shift++AltF

仅格式选择: Ctrl+ K, Ctrl+F

score 68 · Accepted Answer

在 Linux 上是Ctrl++ 。ShiftI

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

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

score 66 · Accepted Answer

对于 Fedora

单击File-> Preferences-> Keyboard shortcuts。
在下Default Keyboard Shortcuts，搜索 ( 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以查看现有的快捷方式。

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

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

score 46 · Accepted Answer

46

在 Ubuntu 上是Ctrl++ 。ShiftI

于 2015-12-13T06:57:43.597 回答

score 40 · Accepted Answer

菜单文件→首选项→设置

"editor.formatOnType": true

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

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

score 37 · Accepted Answer

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

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

score 27 · Accepted Answer

27

Shift++在Alt1.17.2F及更高版本中做得很好。

于 2017-10-19T10:40:03.440 回答

score 26 · Accepted Answer

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

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

看一个例子：

score 25 · Accepted Answer

在 Visual Studio 中格式化代码。

我尝试在 Windows 8 中格式化。

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

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

Shift+ Alt+F

score 23 · Accepted Answer

23

在 Visual Studio Code 中，Shift++正在做Alt++在 Visual Studio 中所做的事情。FCtrlKD

于 2015-06-28T16:42:12.840 回答

score 22 · Accepted Answer

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

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

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

score 20 · Accepted Answer

在 Mac 上，Shift++对我Alt有用F。

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

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

score 19 · Accepted Answer

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

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

score 15 · Accepted Answer

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

工作区级别

好处

不需要扩展
可以在团队之间共享

结果

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

如何？

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

用户环境级别

好处

不需要扩展
个人开发环境 tweeking 来统治他们（设置:)）

结果

用户的settings.json已修改（请参阅下面的操作系统位置）

如何？

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

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

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

视窗：%APPDATA%\Code\User\settings.json
苹果电脑：$HOME/Library/Application Support/Code/User/settings.json
Linux：$HOME/.config/Code/User/settings.json工作区设置文件位于项目中的 .vscode 文件夹下。

更多细节可以在这里找到。

score 10 · Accepted Answer

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

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

安装后，只需重新加载windows并点击Ctrl++ ，它就可以工作了Shift！F

score 9 · Accepted Answer

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

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

score 9 · Accepted Answer

只需安装Microsoft 的Visual Studio Keymap（Visual Studio Keymap for Visual Studio Code）。问题解决了。:p

score 7 · Accepted Answer

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

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

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

score 7 · Accepted Answer

7

在 Mac 中，使用⌘</kbd>+K and then ⌘</kbd>+F.

于 2017-06-14T11:54:46.203 回答

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

6

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

参考这个截图：

于 2017-11-01T09:35:24.897 回答

score 5 · Accepted Answer

不是这个。用这个：

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

score 4 · Accepted Answer

4

Linux 上的 Visual Studio 代码：

Ctrl+[取消缩进代码块和

Ctrl+]进行批量缩进

于 2016-09-20T14:43:26.427 回答

score 1 · Accepted Answer

使用扩展...

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

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

ext install format-on-save

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

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

29 回答 29

对于未保存的片段

取消格式化

'显示图片'

工作区级别

用户环境级别

Related

Reference