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

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

3615980 次浏览

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

  • 在Windows上Shift+Alt+F
  • 在Mac上Shift+选项+F
  • LinuxCtrl+Shift+

或者,您可以通过子菜单View / Command Palette找到快捷方式以及其他快捷方式,该子菜单也在编辑器中提供Ctrl+Shift+P(或Mac上的命令+Shift+P),然后搜索格式化文档

对于未保存的片段

  1. 打开命令面板(Win:F1 orCtrl+Shift+P

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

  3. 选择语言,例如json。现在应该突出显示语法。

  4. 格式化文档(例如打开命令面板->“格式文档”)

取消格式

  1. 选择文本
  2. 命令面板->连线

'给我看照片'

输入图片描述输入图片描述

您可以在菜单文件偏好键盘快捷方式中添加键绑定。

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

Visual Studio喜欢:

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

在Visual Studio Code中,Shift+Alt+F正在做Ctrl+K+D在Visual Studio中正在做的事情。

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

Linux是Ctrl+Shift+

在Windows上,它是Alt+Shift+F。使用超文本标记语言/CSS/JavaScript和Visual Studio Code 1.18.0进行测试。

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

C#中的格式快捷键对我不起作用,直到我安装了Mono for Mac OS X、DNVMDNX

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

在Ubuntu上,它是Ctrl+Shift+

代码格式快捷方式:

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

MacOS上的Visual Studio代码-Shift+选项+F

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

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

保存文件时的代码格式:

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

不是这个。用这个:

菜单文件偏好工作区设置editor.formatOnType真正

为了Fedora

  1. 点击File->Preferences->Keyboard shortcuts
  2. Default Keyboard Shortcuts下,搜索(Ctrl+Feditor.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.formatDocumenteditor.action.formatSelection替换。

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

要更改组合键,请按照以下步骤操作:

  1. 点击editor.action.formatDocumenteditor.action.formatSelection
  2. 一个类似钢笔的图标出现在左边-单击它。
  3. 出现一个弹出窗口。按所需的组合键并按回车键。

使用扩展…

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

启动Visual Studio Code和快速打开Ctrl+P),粘贴以下命令,然后按输入

保存时删除安装格式

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

对于那些想要自定义要格式化的JavaScript文件的人,您可以在JSfiles属性上使用任何扩展名。这同样适用于超文本标记语言。

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

这将启用保存为TypeScript的美化,并且您可以将XML添加到超文本标记语言选项中。

虽然更改Visual Studio Code的默认行为需要扩展,但您可以在工作区或用户级别覆盖默认行为。它适用于大多数受支持的语言(我可以保证超文本标记语言、JavaScript和C#)。

工作区级别

好处

  • 不需要延期
  • 可以在团队之间共享

成果

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

怎么做?

  1. 转到:菜单文件首选项工作区设置

  2. 添加"editor.formatOnType": true并保存到settings.json(这将通过创建. vscode/settings.json文件覆盖您处理的项目的默认行为)。

    看起来如何

用户环境级别

好处

  • 不需要扩展
  • 个人开发环境tweeking来统治他们所有(设置:))

成果

  • 用户的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文件夹下。

更多细节可以查看这里

您必须首先安装适当的插件(即XML、C#等)。

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

Linux上的Visual Studio代码:

Ctrl+[到unindent代码块和

Ctrl+]进行大规模缩进

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

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

Visual Studio Code1.6.1支持“保存格式”,它将自动获取相关的已安装格式化程序扩展并在每次保存时格式化整个文档。

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

"editor.formatOnSave": true

还有可用的键盘快捷键(Visual Studio Code1.7及更高版本):

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

仅限格式选择Ctrl+KCtrl+F

默认情况下,此键不适用于超文本标记语言,CSS和JavaScript文档。

搜索后,我找到了流行的插件JS-CSS-超文本标记语言133,796次安装

安装后,只需重新加载窗口并点击Ctrl+Shift+F,它起作用了!

只需安装Visual Studio Keymap(Visual Studio代码的Visual Studio Keymap)。问题解决了。:p

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

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

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

在Mac中,使用+K,然后使用+F

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

因此,您可以使用命令+Shift+P并键入福马或在菜单文件偏好键盘快捷键命令+K命令+Shift0中创建自己的快捷方式,然后键入福马并添加您的快捷方式。

看一个例子:

在此输入图片描述

Shift+Alt+F在1.17.2及更高版本中做得很好。

如果您想自定义format-documents的样式,您应该使用美化扩展。

参考这个截图:

img

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

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

菜单文件偏好键盘快捷键并通过关键字“格式”进行过滤。

选择文本,右键单击所选内容,然后选择选项“命令调色板”:

在此输入图片描述

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

菜单文件偏好设置

"editor.formatOnType": true

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

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

在Visual Studio中格式化代码。

我尝试在Windows 8中格式化。

只要按照下面的截图。

  1. 单击顶部菜单栏上的视图,然后单击命令面板。

    在此处输入图像描述

  2. 然后会出现一个文本框,我们需要输入格式

    Shift+Alt+F

    在此处输入图像描述

  1. 右键单击文件的内容区域(文本)中的某个地方
  2. 从菜单中选择格式文档
    • Windows:Alt+Shift+F
    • Linux:Alt+Shift+
    • macOS:++F

在此处输入图片描述