Visual Studio Code 编辑器代码功能使用和设置说明

阅读 28:28·字数 8543·发布 2024-10-27

本节所讲述的是与代码相关的 Visual Studio Code 编辑器功能，如果你想了解编辑器的基本功能，可以参考Visual Studio Code 编辑器使用和设置说明一节。

在 Visual Studio Code 编辑器中格式化代码

对于一些语言，比如 JavsScript，Visual Studio Code 拥有默认的格式化程序，而不同的格式化程序拥有不同的选项和设置。当然，你可以在应用商店中搜索某种语言的其他格式化程序，但无论如何，Visual Studio Code 需要拥有有效的格式化程序，才能对特定语言的代码进行格式化。

在编辑器中书写代码后，可以使用键盘快捷方式Shift+Alt+F，或选择编辑器上下文菜单项格式化文档，或在命令面板中执行命令Format Document，来格式化编辑器中的所有代码。

如果编辑器中存在被修改的代码，那么在命令面板中执行命令Format Modified Lines，来格式化编辑器中已经修改的代码。

如果编辑器中存在被选中的代码，那么可以使用键盘快捷方式Ctrl+K Ctrl+F，或选择编辑器上下文菜单项格式化选定内容，或在命令面板中执行命令Format Selection，来格式化选中的代码。

编辑器可以格式化非代码内容

由于格式化功能由扩展（格式化程序）提供，因此，编辑器可以格式化任何形式的文本内容，比如txt文本文件，只要拥有对应的格式化程序。

设置 Visual Studio Code 编辑器的自动格式化代码功能

如何在 VSCode 中正确设置“保存时格式化文件”功能
视频演示 YouTube
如何在 VSCode 中正确设置“保存时格式化文件”功能
视频演示 Bilibili

除了通过键盘快捷方式，编辑器的上下文菜单项或命令面板命令，编辑器可以自动在合适的时机对代码进行格式化，当你正确设置以下设置项的时候。

如果设置项editor.formatOnType的值被设置为true（默认值为false），那么在完成一行代码的书写之后编辑器将自动格式化该行代码（不会格式化其他行）。当然，不同的语言可能会以不同的方式来判断一行代码是否书写完毕，比如 JavaScript 可能会将输入回车符或;视为书写完毕。

如果设置项editor.formatOnPaste的值被设置为true（默认值为false），那么编辑器将自动格式化粘贴至编辑器的代码。

如果设置项editor.formatOnSave的值被设置为true（默认值为false），那么在编辑器保存文件时，将自动对文件中的代码进行格式化。保存文件的行为可由用户触发或由编辑器的自动保存功能触发，即便文件不需要真正的保存（比如，文件内容并未被更改），格式化代码的任务也会进行。

当设置项editor.formatOnSave为true时（即编辑器会在保存文件时格式化代码），使用设置项editor.formatOnSaveMode可以设置对被保存文件中的哪些代码进行格式化，该设置项是一个字符串，拥有以下有效取值。

file: file是默认值，表示编辑器将格式化文件中的所有代码。
modifications: modifications表示编辑器仅格式化文件中被修改的代码，这需要文件包含在源代码管理中，以判断哪些代码被修改了。
modificationsIfAvailable: modificationsIfAvailable与modifications类似，同样表示编辑器仅格式化文件中被修改的代码，只不过编辑器可能会格式化所有代码，如果文件未包含在源代码管理中。

如果文件延时保存或关闭时自动保存，那么编辑器可能无法格式化其中的代码

将设置项editor.formatOnSave设置为true，并不意味着编辑器一定会格式化被保存文件中的代码。

如果设置项files.autoSave为afterDelay，即在等待指定的时间之后自动保存已更改的文件，那么编辑器在文件保存时不会格式化文件中的代码。

如果设置项files.autoSave为onFocusChange或onWindowChange，即在编辑器或 Visual Studio Code 窗口失去焦点时自动保存已更改的文件，那么直接关闭 Visual Studio Code 可以自动保存已经更改的文件，但无法格式化文件中的代码。

编辑器

关于编辑器的自动保存功能，你可以查看设置 Visual Studio Code 编辑器的自动保存功能一段。

settings.json

{
	// 一行代码输入完毕之后，进行格式化
	"editor.formatOnType": true,
	// 对粘贴的内容进行格式化
	"editor.formatOnPaste": true,
	// 在保存文件时，进行格式化
	"editor.formatOnSave": true,
	// 在保存文件时，仅格式化被修改的代码
	"editor.formatOnSaveMode": "modifications",
}

折叠或展开 Visual Studio Code 编辑器中的代码

当代码文件中包含大量代码时，编辑器所提供的折叠代码功能可让代码更容易阅读。将鼠标移动至编辑器左边的装订线，会显示当前可折叠或已折叠代码区域，点击装订线上的折叠或展开按钮，可以折叠或展开对应的代码区域。

如果在点击编辑器的装订线中的折叠或展开按钮时，同时按住Shift键，那么可以依次折叠文件中的代码（比如先折叠类中的方法，再折叠类），或展开被折叠区域以及该区域中包含的已折叠区域。

如何设置折叠和展开按钮在编辑器的装订线中的显示方式？

设置项editor.showFoldingControls可用于设置如何显示装订线中的折叠和展开按钮，该设置项是一个字符串，并拥有以下有效取值。

mouseover是默认值，表示当鼠标悬停在编辑器的装订线时，显示折叠和展开按钮。always表示折叠和展开按钮始终显示在编辑器的装订线中。never表示始终不显示折叠和展开按钮。

这里需要指出，即便编辑器的装订线中没有显示折叠和展开按钮，你依然可以通过鼠标点击来折叠或展开对应的代码区域。

settings.json

{
	// 总是显示折叠和展开按钮
	"editor.showFoldingControls": "always",
}

此外，编辑器提供了以下的键盘快捷方式和命令面板命令，用于快速折叠和展开编辑器中的代码。

使用键盘快捷方式Ctrl+Shift+[，或在命令面板中执行命令Fold，可以在编辑器中折叠光标处或更外层的可折叠代码区域。

使用键盘快捷方式Ctrl+K Ctrl+0，或在命令面板中执行命令Fold All，可以折叠编辑器中所有可折叠的代码区域。

使用键盘快捷方式Ctrl+K Ctrl+[，或在命令面板中执行命令Fold Recursively，可以在编辑器中递归折叠光标处可折叠的代码区域，即折叠任何该区域中的可折叠区域。

使用键盘快捷方式Ctrl+Shift+]，或在命令面板中执行命令Unfold，可以在编辑器中展开光标处已折叠的代码区域。

使用键盘快捷方式Ctrl+K Ctrl+J，或在命令面板中执行命令Unfold All，可以展开编辑器中所有已经折叠的代码区域。

使用键盘快捷方式Ctrl+K Ctrl+]，或在命令面板中执行命令Unfold Recursively，可以在编辑器中递归展开光标处已折叠的代码区域，即展开任何该区域中的已折叠区域。

使用键盘快捷方式Ctrl+K Ctrl+L，或在命令面板中执行命令Toggle Fold，可以在编辑器中折叠光标处可折叠的代码区域，或者展开光标处已折叠的代码区域。

使用键盘快捷方式Ctrl+K Ctrl+Shift+L，或在命令面板中执行命令Toggle Fold Recursively，可以在编辑器中递归折叠或展开光标处可折叠或已折叠的代码区域。

如何在编辑器中折叠或展开导入语句？

在命令面板中执行命令Toggle Import Fold，可以折叠或展开编辑器中连续的导入语句（允许出现空行）。连续的导入语句可能位于文件的开头，但也可能位于代码文件的其他位置，比如，Python 的方法中。

如果设置项editor.foldingImportsByDefault为true（默认值为false），那么在代码文件被第一次打开时，编辑器将自动折叠代码中的导入语句。当然，你也许会看到编辑器并未自动折叠代码中的导入语言，其原因可能在于文件并非第一次打开，并且在上次关闭时导入语句为非折叠状态。

settings.json

{
	// 自动折叠导入语句，在文件第一次被打开时
	"editor.foldingImportsByDefault": true,
}

如何在编辑器中折叠或展开代码注释？

使用键盘快捷方式Ctrl+K Ctrl+/，或在命令面板中执行命令Fold All Block Comments，可以折叠编辑器中所有的代码块注释，这不包括单行的代码注释。

如何在编辑器中折叠或展开非光标处的代码区域？

如果你希望仅关注编辑器中光标处的代码（光标所在的折叠区域中的代码），那么可以使用键盘快捷方式Ctrl+K Ctrl+-，或在命令面板中执行命令Fold All Except Selected，来折叠其他非光标处的可折叠区域，该操作不会影响光标所在的折叠区域，即不会改变其折叠状态。

而通过键盘快捷方式Ctrl+K Ctrl+=，或在命令面板中执行命令Unfold All Except Selected，可以展开其他非光标处的已折叠区域，该操作不会影响光标所在的折叠区域，即不会改变其折叠状态。

使用键盘快捷方式Ctrl+K Ctrl+<N>，或在命令面板中执行命令Fold Level <N>，可以折叠其他非光标处的可折叠区域，只不过被折叠的区域的级别由N指定，N需要大于等于1并小于等于7。

在 Visual Studio Code 编辑器的折叠代码区域中导航

在命令面板中执行命令Go to Next Folding Range或Go to Previous Folding Range，可以将光标移动至同一级别的下一个或上一个折叠区域，这包括已折叠和未折叠区域。

在命令面板中执行命令Go to Parent Fold，可以将光标移动至上一级别的折叠区域。

设置 Visual Studio Code 编辑器折叠代码区域的最大数量

设置项editor.foldingMaximumRegions是一个数字，可以设置一个编辑器中的折叠区域的最大数量，默认值为5000，如果将该设置项调整的过大，可能会影响编辑器的性能。

settings.json

{
	// 折叠区域的最大数量为 100
	"editor.foldingMaximumRegions": 100,
}

设置 Visual Studio Code 编辑器折叠代码区域的评估方式

在默认情况下，编辑器会根据代码的缩进级别来评估折叠区域，同一折叠区域中的行拥有相同或更高的缩进级别。当然，一些语言拥有自己的折叠区域评估方法，比如，HTML 和 CSS。

在下面的 HTML 文件folding.html中，代码<html>，<head>和<body>分别拥有各自的折叠区域，即便他们所处的行均没有缩进。

folding.html

<html>
<head>
<title>A Page</title>
</head>
<body>
Welcome!
</body>
</html>

使用设置项editor.foldingStrategy，可以设置编辑器通过何种方式来评估折叠区域，该设置项是一个字符串并拥有以下有效取值。

auto: auto是默认值，表示使用语言自身提供的折叠区域评估方式，如果未提供，则使用缩进级别来评估编辑器中的折叠区域。
indentation: indentation表示使用缩进级别来评估编辑器中的折叠区域。

settings.json

{
	// 使用缩进级别评估折叠区域
	"editor.foldingStrategy": "indentation",
}

设置是否启用 Visual Studio Code 编辑器的折叠代码功能

通过设置项editor.folding，可以设置是否为编辑器启用折叠代码功能，当该设置项为true（默认值）时，编辑器的折叠代码功能可用。

settings.json

{
	// 禁用折叠代码功能
	"editor.folding": false,
}

设置是否高亮显示 Visual Studio Code 编辑器中的已折叠代码区域

默认情况下，编辑器会高亮显示已折叠的代码区域，如果将设置项editor.foldingHighlight设置为false，那么编辑器中的已折叠区域将不再高亮显示。

settings.json

{
	// 不会高亮显示折叠区域
	"editor.foldingHighlight": false,
}

使用不同语言在 Visual Studio Code 编辑器中创建折叠代码区域

当你希望折叠编辑器中的某些代码，但这些代码并未包含在一个折叠区域中时，使用语言提供的特殊语法（通常是指标记折叠区域开始和结束的注释语句）可以解决此问题，这相当于由开发人员创建了一个折叠区域。

对于通过语言的特殊语法标记的折叠区域，使用键盘快捷方式Ctrl+K Ctrl+8或Ctrl+K Ctrl+9，或者在命令面板中执行命令Fold All Regions或Unfold All Regions，即可在编辑器中折叠或展开他们。

以下是某些常见语言标记折叠区域的方式。


语言 区域开始 区域结束

Python #region #endregion
JavaScript，TypeScript //region //endregion
Java //region 或 //<editor-fold> //endregion 或 //</editor-fold>
C，C++ #pragma region #pragma endregion
C# #region #endregion
Visual Basic #Region #End Region
CSS，Less，SCSS /*#region*/ /*#endregion*/
Markdown <!--region--> <!--endregion-->
PHP #region #endregion
Perl5 #region 或 =pod #endregion 或 =cut
F# //#region //#endregion
PowerShell #region #endregion
Coffeescript #region #endregion
Bat ::#region 或 REM#region ::#endregion 或 REM#endregion

语言	区域开始	区域结束
Python	#region	#endregion
JavaScript，TypeScript	//region	//endregion
Java	//region 或 //<editor-fold>	//endregion 或 //</editor-fold>
C，C++	#pragma region	#pragma endregion
C#	#region	#endregion
Visual Basic	#Region	#End Region
CSS，Less，SCSS	/#region/	/#endregion/
Markdown	<!--region-->	<!--endregion-->
PHP	#region	#endregion
Perl5	#region 或 =pod	#endregion 或 =cut
F#	//#region	//#endregion
PowerShell	#region	#endregion
Coffeescript	#region	#endregion
Bat	::#region 或 REM#region	::#endregion 或 REM#endregion

根据 Visual Studio Code 编辑器中的选中代码创建手动折叠区域

如何在 VSCode 中创建自定义折叠区域
视频演示 YouTube
如何在 VSCode 中创建自定义折叠区域
视频演示 Bilibili

除了通过使用不同语言创建折叠代码区域一段介绍的方法，你还可以根据编辑器中已选中的代码来创建手动折叠区域，要完成这个目标，应首先选中需要折叠的代码（两行或更多），然后使用键盘快捷方式Ctrl+K Ctrl+,，或在命令面板中执行命令Create Folding Range from Selection。

使用键盘快捷方式Ctrl+K Ctrl+.，或在命令面板中执行命令Remove Manual Folding Ranges，可以移除通过上述方式创建的手动折叠区域，如果光标位于手动折叠区域或手动折叠区域被选中的话。

缩进和取消缩进 Visual Studio Code 编辑器中的行

如何在 VSCode 中缩进单行、多行，设置缩进字符和宽度
视频演示 YouTube
如何在 VSCode 中缩进单行、多行，设置缩进字符和宽度
视频演示 Bilibili

对于一些语言，当在编辑器中输入一行新的代码时，该行代码可能会被自动缩进。当然，你可以使用键盘快捷方式Ctrl+]或Ctrl+[，或者在命令面板中执行命令Indent Line或Outdent Line，以在编辑器中缩进或取消缩进光标所在的行或被选中的多个行。

另外，传统的缩进方法也是可行的，直接按下Tab或Shift+Tab键，同样可以在编辑器中缩进或取消缩进光标所在的行或被选中的多个行。如果未选中任何行，则按下Tab键时，光标需要位于行首附近，否则无法缩进该行。

在命令面板中执行命令Reindent Lines或Reindent Selected Lines，可以重新缩进编辑器中的所有行或被选中的行。

点击状态栏中的缩进信息，或在命令面板中执行命令Indent Using Spaces或Indent Using Tabs，可以设置使用空格符或制表符进行缩进，并选择缩进的大小（重新打开编辑器后可能会失效）。

命令 Indent Using Spaces 和 Indent Using Tabs 未达到预期效果？

需要指出的是，命令Indent Using Spaces和Indent Using Tabs的执行效果视具体情况而定，大多数情况下，他们可以改变编辑器的缩进方式，但未必能够完全影响现有代码，比如制表符没有转换为空格符，此时，可尝试使用命令Reindent Lines或Reindent Selected Lines对代码进行重新缩进。

为 Visual Studio Code 编辑器中的自动换行设置缩进方式

通过设置项editor.wrappingIndent，可以设置自动换行的缩进方式（这不包括手动换行，比如，每一行书写一个参数），该设置项是一个字符串，并拥有以下有效取值。

same: same是默认值，表示自动换行会保持原有的缩进级别。
indent: indent表示自动换行的缩进级别比原有的缩进级别大1。
deepIndent: deepIndent表示自动换行的缩进级别比原有的缩进级别大2。
none: none表示自动换行会从第一列开始。

settings.json

{
	// 自动换行的缩进级别比原有缩进级别大 2
	"editor.wrappingIndent": "deepIndent",
}

解决 Visual Studio Code 编辑器中不同缩进方式的冲突

如果编辑器所采用的缩进方式与其所包含的代码的缩进方式不同，那么你所书写的新代码可能会与原有的代码在风格上存在很大不同，为此，可以调整原有代码和编辑器的缩进方式，以保持一致的代码风格，具体请参考缩进和取消缩进行一段中提到的某些方法。

点击 Visual Studio Code 状态栏中的缩进信息，或在命令面板中执行命令Detect Indentation from Content，可以根据编辑器中的内容来决定编辑器的缩进方式，而新书写的代码的缩进方式将与原有代码一致，不过，在编辑器关闭并再次打开之后，编辑器的缩进方式将被重新设置。

如何设置编辑器是否根据内容自动推断缩进方式？

如果你不希望通过执行命令Detect Indentation from Content来推断缩进方式，那么应使设置项editor.detectIndentation保持其默认值true，该设置项用于设置编辑器是否自动根据内容来决定缩进方式，这包括制表符的大小，以及是否采用空格符。

settings.json

{
	// 不会根据内容来推断缩进方式
	"editor.detectIndentation": false,
}

设置是否使用空格符缩进 Visual Studio Code 编辑器中的行

在默认情况下，编辑器会使用空格符来缩进行，你可以将设置项editor.insertSpaces设置为false（默认为true），以采用制表符进行缩进。当然，编辑器可能会根据编辑器中的内容来决定是否使用空格符进行缩进，如同解决不同缩进方式的冲突一段所提到的。

settings.json

{
	// 使用制表符进行缩进
	"editor.insertSpaces": false,
}

点击 Visual Studio Code 状态栏中的缩进信息，或者在命令面板中执行命令Convert Indentation to Spaces或Convert Indentation to Tabs，可以设置编辑器采用空格符或制表符进行缩进，并根据当前编辑器认定的制表符大小来转换缩进中的空格符和制表符。如果剩余的空格符不足以转换为一个制表符，那么这些空格符将被保留。

设置 Visual Studio Code 编辑器的缩进参考线功能

在编辑器中，缩进辅助线是垂直显示的直线，可以让开发人员更加轻松的阅读代码，通过将设置项editor.guides.indentation设置为false（默认值为true），可让缩进辅助线不再显示在编辑器中。

设置项editor.guides.highlightActiveIndentation可以设置如何高亮显示当前活动的缩进辅助线，该设置项拥有以下有效取值。

true: true是默认值，表示会高亮显示编辑器中当前活动的缩进辅助线。
false: false表示不会高亮显示编辑器中当前活动的缩进辅助线。
"always": "always"表示会高亮显示编辑器中当前活动的缩进辅助线，即使已经高亮显示了括号辅助线。

settings.json

{
	// 启用缩进参考线
	"editor.guides.indentation": true,
	// 总是高亮显示缩进参考线
	"editor.guides.highlightActiveIndentation": "always",
}

设置 Visual Studio Code 编辑器中的制表符的大小

编辑器中的制表符的大小，是指一个制表符等同于几个空格符，每一次缩进会增加一个制表符，或相应数量的空格符。不同的编辑器中的制表符大小可能不同，其默认大小由设置项editor.tabSize来决定（默认为4，即一个制表符等同于4个空格符）。

当然，编辑器可能会根据编辑器中的内容来决定制表符的大小，如同解决不同缩进方式的冲突一段所提到的。

settings.json

{
	// 制表符大小为 3
	"editor.tabSize": 3
}

点击 Visual Studio Code 状态栏中的缩进信息，或在命令面板中执行命令Change Tab Display Size，可以改变当前编辑器中的制表符的显示大小（重新打开编辑器后可能失效）。

编辑器的制表符显示大小与制表符大小不同

编辑器的制表符显示大小与制表符大小并不相同，制表符的显示大小可能会影响制表符与空格符之间的转换，但不会影响缩进参考线的显示（以及某些其他功能），缩进参考线依然会根据制表符大小而非显示大小来确定显示位置。

在 Visual Studio Code 编辑器中移除行的尾随空白字符

点击 Visual Studio Code 状态栏中的缩进信息，或在命令面板中执行命令Trim Trailing Whitespace，可以移除编辑器中所有行的尾随空白字符，比如空格符，制表符。

在 Visual Studio Code 编辑器中快速注释/取消注释代码

如何在 VSCode 中注释多行、单行、代码块，以及取消注释
视频演示 YouTube
如何在 VSCode 中注释多行、单行、代码块，以及取消注释
视频演示 Bilibili

使用键盘快捷方式Ctrl+/（对应命令Toggle Line Comment），可将光标所在行或所有选中的行，转换为行注释（或取消行注释）。

使用键盘快捷方式Shift+Alt+A（对应命令Toggle Block Comment），可将选中代码包含在块注释内（或取消块注释）。

在 Visual Studio Code 编辑器中快速移动、复制、删除、新建单行

如何在 VSCode 中移动、复制、删除单行或多行，新建行
视频演示 YouTube
如何在 VSCode 中移动、复制、删除单行或多行，新建行
视频演示 Bilibili

使用键盘快捷方式Alt+UpArrow和Alt+DownArrow（对应命令Move Line Up和Move Line Down），可将光标所在的行或选中的行，向上或向下移动一行。

使用键盘快捷方式Shift+Alt+UpArrow和Shift+Alt+DownArrow（对应命令Copy Line Up和Copy Line Down），可将光标所在的行或选中的行，向上或向下复制。

使用键盘快捷方式Shift+Del或Ctrl+Shift+K（对应命令Delete Line），可删除光标所在的行。

使用键盘快捷方式Ctrl+Shift+Enter和Ctrl+Enter（对应命令Insert Line Above和Insert Line Below），可在光标位置的上方或下方新建一行。

源码

src/zh/editors/code·codebeatme/vscode·GitHub

讲解视频

如何在 VSCode 中正确设置“保存时格式化文件”功能·YouTube 如何在 VSCode 中正确设置“保存时格式化文件”功能·Bilibili
如何在 VSCode 中创建自定义折叠区域·YouTube 如何在 VSCode 中创建自定义折叠区域·Bilibili
如何在 VSCode 中缩进单行、多行，设置缩进字符和宽度·YouTube 如何在 VSCode 中缩进单行、多行，设置缩进字符和宽度·Bilibili
如何在 VSCode 中注释多行、单行、代码块，以及取消注释·YouTube 如何在 VSCode 中注释多行、单行、代码块，以及取消注释·Bilibili
如何在 VSCode 中移动、复制、删除单行或多行，新建行·YouTube 如何在 VSCode 中移动、复制、删除单行或多行，新建行·Bilibili