logo标签列表

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

code-formattingvisual-studio-code
988

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

47
对于那些拼命想要格式化XML（似乎当前无法直接完成），你可以通过安装扩展来实现。我发现 XML Tools 能够很好地完成这项工作。免责声明：我不是该项目的作者也与之无关。 - informatik01
虽然 VSCode 的菜单选项比 VS 少得多（新趋势？），但它在“帮助”菜单下有广泛的信息和教程，可能已经回答了这个问题。 - Roland
对于那些在尝试使用 Visual Studio Code 中的有效组合后仍然无法使格式化工作的人，请不要忘记选择适当的编程语言类型，它位于视觉工作室代码窗口右下角旁边的笑脸旁边。一旦你这样做了，我发现它可以直接使用，你不需要任何额外的插件来格式化代码。 - Mr.Hunt
29个回答
37

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

Visual Studio Code 在内部使用js-beautify，但缺乏修改所需使用的样式的能力。扩展程序“beautify”允许您添加设置。

1
当然，我正在使用Windows，它的工作方式就像描述的那样 - 这可能取决于VScode版本（请更新！）和文件扩展名。请尝试使用HTML进行测试。 - ESP32
1
这是扩展程序链接：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify - Highmastdon
28

Shift + Alt + F 可以在1.17.2及以上版本中很好地完成任务。

26

在 Visual Studio 中格式化代码。

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

只需按照下面的截图操作：

  1. 点击顶部菜单栏上的 “View”，然后点击 “Command Palette”。

    Enter image description here

  2. 然后会出现一个文本框，我们需要在其中输入 Format

    Shift + Alt + F

    Enter image description here

1
有时候我会将 XML 复制粘贴到一个新文件中，想要格式化它，但不想保存该文件。这种情况下非常适合使用！ - user3885927
26
因某些原因，在 Mac 上的 Visual Studio Code 1.3.1 中，组合键 Alt + Shift + F 对我无效，而且命令“格式化文档”根本无法使用。但是命令 Formatter 却非常有效。
因此，您可以使用 Command + Shift + P，然后输入 Formatter 或在菜单 文件 → 首选项 → 键盘快捷方式 → Command + K Command + S 中配置自己的快捷键，然后输入 Formatter 并添加您的快捷键。
以下是一个示例：

输入图片说明

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

我在Visual Studio Code（Ubuntu）中最简单的方法是：

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

右键单击并选择"格式化所选内容"。

“格式选择”不作为选项存在。 - Martijn Hiemstra
@MartijnHiemstra 我正在使用MAC，这个选项也在那里。你用的是哪个操作系统？ - Ashutosh Jha
20

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

您总是可以在菜单中检查键绑定：

菜单 文件 → 首选项 → 键盘快捷方式 并通过关键词 'format' 进行过滤。

在我的 M1 Mac 上，我没有看到 alt 键。 - staticvoid17
19

在我安装了Mac OS X的Mono、DNVM 和 DNX之前，C#中的快捷格式化无法使用。

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

为了格式化C＃，需要安装扩展程序。通常情况下，Omnisharp应该可以正常工作。然而，Omnisharp中存在一个错误。在此错误修复之前，我们必须使用Leopotam.csharpfixformat扩展程序。它会覆盖Omnisharp。安装C# FixFormat扩展程序后，我可以再次对文档进行格式化。 - Oncel Umut TURER
16

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

工作区级别

优点

  • 不需要扩展程序
  • 可以在团队间共享

结果

  • .vscode/settings.json 将会在项目根文件夹中被创建

如何操作？

  1. 打开菜单栏 文件 → 首选项 → 工作区设置

  2. 将 "editor.formatOnType": true 添加并保存到 settings.json 文件中（这将通过创建 .vscode/settings.json 文件来覆盖您所使用的项目的默认行为）。

    操作界面

用户环境级别

优点

  • 不需要扩展程序
  • 针对个人开发环境进行调整（设置：））

结果

  • 修改了用户的 settings.json 文件（请参见下面的操作系统中的位置）

如何操作？

  1. 打开菜单栏 文件 → 首选项 → 用户设置

  2. 在用户 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 文件夹下。

更多详情可以在这里找到。

但是这会有什么后果呢？在更改后它将如何实际运作？它会立即/自动更改格式，就像输入时一样吗？还是只有在粘贴时才会更改？ - Peter Mortensen
@PeterMortensen 只需尝试并评论答案。 - Roi Shabtai
10

默认情况下，在 HTML、CSS 和 JavaScript 文档中该键不起作用。

经过搜索，我找到了受欢迎的插件JS-CSS-HTML格式化工具，已有133,796 次安装。

安装后，只需重新加载窗口并按下 Ctrl + Shift + F 即可使用！

1
是啊，但只有2颗星中的5颗星？认真的吗？ - kmoser
提醒一下：这个答案最初是在2017年写的，那时候VS Code的功能基本上是通过插件或其他黑科技实现的，当时没有其他解决方案适用于我，所以我自己发现了一个方法，它在当时确实有效，而且我并不关心它有多少星 :-) 现在已经是2020年了，格式支持已经非常出色了。 - mumair
1
我认为VS Code还不支持开箱即用的CSS格式化。我安装了Prettier插件（https://prettier.io/），它可以处理JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown和YAML等文件格式。该插件已经有560万次安装和4颗星的评价。 - kmoser
我很高兴你找到了 prettier :P。虽然格式化方面有支持，但和 prettier 一样好用的还没有。我在所有项目中都使用 .prettierrc 配置文件和插件，将 prettier 作为开发依赖。我担心有一天 prettier 会被合并到 vs-code 中 :) - mumair
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接