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


How do you format code in Visual Studio Code (VSCode)

在Visual Studio中，Windows上的Ctrl + K + F和Ctrl + K + D等效于Visual Studio代码编辑器中的格式化或"美化"代码是什么？

相关讨论

Visual Studio Code中的代码格式通过以下快捷方式提供：

  • 在Windows上Shift + Alt + F
  • 在Mac上Shift + Option + F
  • 在Ubuntu Ctrl + Shift + I

或者，您可以通过编辑器中提供的搜索功能找到快捷方式以及其他快捷方式，使用Ctrl + Shift + P(或Mac上的Command + Shift + P)，然后搜索格式文档。

相关讨论

代码格式快捷方式：

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

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

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

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

保存文件时的代码格式：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    // 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文件。检查我的更新。

相关讨论

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

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

或Visual Studio如：

1
{"key":"ctrl+k ctrl+d","command":"editor.action.formatDocument" }
相关讨论

  • 右键单击该文件
  • 从菜单框中选择格式文档(Alt + Shift + F)。

    • Enter image description here

    相关讨论

    右键组合是Shift + Alt + F。

    相关讨论

    对于Fedora

  • 单击File - > Preferences - > Keyboard shortcuts。
  • 在Default Keyboard Shortcuts下，搜索(Ctrl + F)editor.action.format。

    • 我读了"key":"ctrl+shift+i"

    你也可以改变它。请参阅这个答案，了解如何......或者如果您感觉有点懒，可以向上滚动：

    You can add a keybinding in"Preferences->Keyboard shortcuts"

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

    Or Visual Studio like:

    {"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键。
    • 相关讨论

    在Linux上，它是Ctrl + Shift + I。

    在Windows上它是Alt + Shift + F

    。使用HTML / CSS / JavaScript和Visual Studio Code 1.18.0进行测试。

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

    相关讨论

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

    通过设置启用"保存格式"

    1
    "editor.formatOnSave": true

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

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

    仅限格式选择：Ctrl + K，Ctrl + F

    相关讨论

    在Ubuntu上它是Ctrl + Shift + I。

    相关讨论

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

    Visual Studio Code在内部使用js-beautify，但它无法修改您希望使用的样式。扩展名"美化"可让您添加设置。

    相关讨论

    出于某种原因，Alt + Shift + F在Mac Visual Studio Code 1.3.1上对我不起作用，实际上命令"Format Document"根本不起作用。但命令Formatter工作得很好。

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

    看一个例子：

    Enter image description here

    相关讨论

    Shift + Alt + F在1.17.2及更高版本中完成了这项工作。

    相关讨论

    在Visual Studio中格式化代码。

    我试过在Windows 8中格式化。

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

  • 单击顶部菜单栏上的"视图"，然后单击"命令选项板"。

    Enter image description here

  • 然后会出现一个文本框，我们需要输入Format格式

    Shift + Alt + F

    Enter image description here

    • 相关讨论

    在Visual Studio代码中，Shift + Alt + F正在执行Ctrl + K + D在Visual Studio中执行的操作。

    在我为MacOSX，DNVM和DNX安装Mono之前，C＃中的格式快捷方式不起作用。

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

    相关讨论

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

    您始终可以在菜单中检查键绑定：

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

    菜单文件首选项设置

    1
    "editor.formatOnType": true

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

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

    相关讨论

    更改Visual Studio代码的默认行为需要扩展名时，您可以覆盖工作区或用户级别的默认行为。它适用于大多数支持的语言(我可以保证HTML，JavaScript和C＃)。

    工作区级别

    优点

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

    成果

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

    如何？

  • 转至：菜单文件首选项工作区设置

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

    How it looks

    • 用户环境级别

    优点

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

    成果

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

    如何？

  • 转到：菜单文件首选项用户设置

  • 在用户settings.json中将"editor.formatOnType": false的值添加或更改为"editor.formatOnType": true

    • 您的Visual Studio代码用户的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文件夹下。

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

    默认此密钥在HTML，CSS和JavaScript文档中对我不起作用。

    搜索之后，我发现了流行的插件JS-CSS-HTML Formatter，安装量为133,796。

    安装后只需重新加载窗口并点击Ctrl +
    Shift + F，它有效！

    选择文本，右键单击选择，然后选择"命令选项板"选项：

    Enter image description here

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

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

    只需安装Microsoft的Visual Studio Keymap即可。问题解决了。 ：p

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

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

    右键单击并选择"格式选择"。

    如果要自定义格式文档的样式，则应使用Beautify扩展。

    请参阅此屏幕截图：

    img

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

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

    这样可以在为TypeScript保存时实现美化，并且可以将XML添加到HTML选项中。

    相关讨论

    您必须先安装相应的插件(即XML，C＃等)。

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

    相关讨论

    不是这个。用这个：

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

    相关讨论

    Linux上的Visual Studio代码：

    Ctrl + [到unindent代码块和

    Ctrl + ] 进行大规模缩进

    使用扩展...

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

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

    ext install format-on-save

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

    相关讨论