Visual Studio Code 編輯器程式碼功能使用和設定說明

閱讀 26:29·字數 7945·發佈 2024-10-27

本節所講述的是與程式碼相關的 Visual Studio Code 編輯器功能，如果你想了解編輯器的基本功能，可以參考Visual Studio Code 編輯器使用和設定說明一節。

在 Visual Studio Code 編輯器中格式化程式碼

對於一些語言，比如 JavsScript，Visual Studio Code 擁有預設的格式器，而不同的格式器擁有不同的選項和設定。當然，你可以在 Visual Studio Code 的應用商店中搜尋某種語言的其他格式器，但無論如何，Visual Studio Code 需要擁有有效的格式器，才能對特定語言的程式碼進行格式化。

在 Visual Studio Code 編輯器中書寫程式碼後，可以使用鍵盤快速鍵Shift+Alt+F，或選擇編輯器操作功能表項格式化文件，或在命令選擇區中執行命令Format Document，來格式化編輯器中的所有程式碼。

如果 Visual Studio Code 編輯器中存在被修改的程式碼，那麽在命令選擇區中執行命令Format Modified Lines，來格式化編輯器中已經修改的程式碼。

如果 Visual Studio Code 編輯器中存在被選取的程式碼，那麽可以使用鍵盤快速鍵Ctrl+K Ctrl+F，或選擇編輯器操作功能表項格式化選取範圍，或在命令選擇區中執行命令Format Selection，來格式化選取的程式碼。

Visual Studio Code 編輯器可以格式化非程式碼內容

由於格式化功能由 Visual Studio Code 延伸模組（格式器）提供，因此，Visual Studio Code 編輯器可以格式化任何形式的文字內容，比如txt文字檔案，只要擁有對應的格式器。

設定 Visual Studio Code 編輯器的自動格式化程式碼功能

除了通過鍵盤快速鍵，編輯器的操作功能表項或命令選擇區命令，Visual Studio Code 編輯器可以自動在合適的時機對程式碼進行格式化，當你正確設定以下設定項的時候。

如果 Visual Studio Code 設定項editor.formatOnType的值被設定為true（預設值為false），那麽在完成一行程式碼的書寫之後 Visual Studio Code 編輯器將自動格式化該行程式碼（不會格式化其他行）。當然，不同的語言可能會以不同的方式來判斷一行程式碼是否書寫完畢，比如 JavaScript 可能會將輸入歸位字元或;視為書寫完畢。

如果 Visual Studio Code 設定項editor.formatOnPaste的值被設定為true（預設值為false），那麽 Visual Studio Code 編輯器將自動格式化貼上至編輯器的程式碼。

如果 Visual Studio Code 設定項editor.formatOnSave的值被設定為true（預設值為false），那麽在 Visual Studio Code 編輯器儲存檔案時，將自動對檔案中的程式碼進行格式化。儲存檔案的行為可由使用者觸發或由 Visual Studio Code 編輯器的自動儲存功能觸發，即便檔案不需要真正的儲存（比如，檔案內容並未被變更），格式化程式碼的工作也會進行。

當設定項editor.formatOnSave為true時（即編輯器會在儲存檔案時格式化程式碼），使用 Visual Studio Code 設定項editor.formatOnSaveMode可以設定對被儲存檔案中的哪些程式碼進行格式化，該設定項是一個字串，擁有以下有效取值。

file: file是預設值，表示 Visual Studio Code 編輯器將格式化檔案中的所有程式碼。
modifications: modifications表示 Visual Studio Code 編輯器僅格式化檔案中被修改的程式碼，這需要檔案包含在原始檔控製中，以判斷哪些程式碼被修改了。
modificationsIfAvailable: modificationsIfAvailable與modifications類似，同樣表示 Visual Studio Code 編輯器僅格式化檔案中被修改的程式碼，只不過編輯器可能會格式化所有程式碼，如果檔案未包含在原始檔控製中。

Visual Studio Code 編輯器無法格式化延時或關閉時自動儲存的檔案中的程式碼

將 Visual Studio Code 設定項editor.formatOnSave設定為true，並不意味著編輯器一定會格式化被儲存檔案中的程式碼。

如果設定項files.autoSave為afterDelay，即在等待指定的時間之後自動儲存已變更的檔案，那麽 Visual Studio Code 編輯器在檔案儲存時不會格式化檔案中的程式碼。

如果設定項files.autoSave為onFocusChange或onWindowChange，即在編輯器或 Visual Studio Code 視窗失去焦點時自動儲存已變更的檔案，那麽直接關閉 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 編輯器中的程式碼

當程式碼檔案中包含大量程式碼時，Visual Studio Code 編輯器所提供的折疊程式碼功能可讓程式碼更容易閱讀。將滑鼠移動至 Visual Studio Code 編輯器左邊的裝訂邊，會顯示目前可折疊或已折疊程式碼區域，點選裝訂邊上的折疊或展開按鈕，可以折疊或展開對應的程式碼區域。

如果在點選 Visual Studio Code 編輯器的裝訂邊中的折疊或展開按鈕時，同時按住Shift鍵，那麽可以依次折疊檔案中的程式碼（比如先折疊類別中的方法，再折疊類別），或展開被折疊區域以及該區域中包含的已折疊區域。

如何設定折疊和展開按鈕在 Visual Studio Code 編輯器的裝訂邊中的顯示方式？

Visual Studio Code 設定項editor.showFoldingControls可用於設定如何顯示裝訂邊中的折疊和展開按鈕，該設定項是一個字串，並擁有以下有效取值。

mouseover是預設值，表示當滑鼠暫留在 Visual Studio Code 編輯器的裝訂邊時，顯示折疊和展開按鈕。always表示折疊和展開按鈕始終顯示在 Visual Studio Code 編輯器的裝訂邊中。never表示始終不顯示折疊和展開按鈕。

這裏需要指出，即便 Visual Studio Code 編輯器的裝訂邊中沒有顯示折疊和展開按鈕，你依然可以通過滑鼠點選來折疊或展開對應的程式碼區域。

settings.json

{
	// 總是顯示折疊和展開按鈕
	"editor.showFoldingControls": "always",
}

此外，Visual Studio Code 編輯器提供了以下的鍵盤快速鍵和命令選擇區命令，用於快速折疊和展開編輯器中的程式碼。

使用鍵盤快速鍵Ctrl+Shift+[，或在命令選擇區中執行命令Fold，可以在 Visual Studio Code 編輯器中折疊遊標處或更外層的可折疊程式碼區域。

使用鍵盤快速鍵Ctrl+K Ctrl+0，或在命令選擇區中執行命令Fold All，可以折疊 Visual Studio Code 編輯器中所有可折疊的程式碼區域。

使用鍵盤快速鍵Ctrl+K Ctrl+[，或在命令選擇區中執行命令Fold Recursively，可以在 Visual Studio Code 編輯器中遞歸折疊遊標處可折疊的程式碼區域，即折疊任何該區域中的可折疊區域。

使用鍵盤快速鍵Ctrl+Shift+]，或在命令選擇區中執行命令Unfold，可以在 Visual Studio Code 編輯器中展開遊標處已折疊的程式碼區域。

使用鍵盤快速鍵Ctrl+K Ctrl+J，或在命令選擇區中執行命令Unfold All，可以展開 Visual Studio Code 編輯器中所有已經折疊的程式碼區域。

使用鍵盤快速鍵Ctrl+K Ctrl+]，或在命令選擇區中執行命令Unfold Recursively，可以在 Visual Studio Code 編輯器中遞歸展開遊標處已折疊的程式碼區域，即展開任何該區域中的已折疊區域。

使用鍵盤快速鍵Ctrl+K Ctrl+L，或在命令選擇區中執行命令Toggle Fold，可以在 Visual Studio Code 編輯器中折疊遊標處可折疊的程式碼區域，或者展開遊標處已折疊的程式碼區域。

使用鍵盤快速鍵Ctrl+K Ctrl+Shift+L，或在命令選擇區中執行命令Toggle Fold Recursively，可以在 Visual Studio Code 編輯器中遞歸折疊或展開遊標處可折疊或已折疊的程式碼區域。

如何在 Visual Studio Code 編輯器中折疊或展開匯入陳述式？

在命令選擇區中執行命令Toggle Import Fold，可以折疊或展開 Visual Studio Code 編輯器中連續的匯入陳述式（允許出現空白行）。連續的匯入陳述式可能位於檔案的開頭，但也可能位於程式碼檔案的其他位置，比如，Python 的方法中。

如果 Visual Studio Code 設定項editor.foldingImportsByDefault為true（預設值為false），那麽在程式碼檔案被第一次開啟時，編輯器將自動折疊程式碼中的匯入陳述式。當然，你也許會看到 Visual Studio Code 編輯器並未自動折疊程式碼中的匯入語言，其原因可能在於檔案並非第一次開啟，並且在上次關閉時匯入陳述式為非折疊狀態。

settings.json

{
	// 自動折疊匯入陳述式，在檔案第一次被開啟時
	"editor.foldingImportsByDefault": true,
}

如何在 Visual Studio Code 編輯器中折疊或展開程式碼註解？

使用鍵盤快速鍵Ctrl+K Ctrl+/，或在命令選擇區中執行命令Fold All Block Comments，可以折疊 Visual Studio Code 編輯器中所有的程式碼區塊註解，這不包括單行的程式碼註解。

如何在 Visual Studio Code 編輯器中折疊或展開非遊標處的程式碼區域？

如果你希望僅關註 Visual Studio Code 編輯器中遊標處的程式碼（遊標所在的折疊區域中的程式碼），那麽可以使用鍵盤快速鍵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 編輯器的折疊程式碼區域中導航

在 Visual Studio Code 命令選擇區中執行命令Go to Next Folding Range或Go to Previous Folding Range，可以將遊標移動至同一層級的下一個或上一個折疊區域，這包括已折疊和未折疊區域。

在 Visual Studio Code 命令選擇區中執行命令Go to Parent Fold，可以將遊標移動至上一層級的折疊區域。

設定 Visual Studio Code 編輯器中的折疊程式碼區域的最大數量

Visual Studio Code 設定項editor.foldingMaximumRegions是一個數值，可以設定一個 Visual Studio Code 編輯器中的折疊區域的最大數量，預設值為5000，如果將該設定項調整的過大，可能會影響編輯器的效能。

settings.json

{
	// 折疊區域的最大數量為 100
	"editor.foldingMaximumRegions": 100,
}

設定 Visual Studio Code 編輯器中的折疊程式碼區域的評定方式

在預設情況下，Visual Studio Code 編輯器會根據程式碼的縮排層級來評定折疊區域，同一折疊區域中的行擁有相同或更高的縮排層級。當然，一些語言擁有自己的折疊區域評定方法，比如，HTML 和 CSS。

在下面的 HTML 檔案folding.html中，程式碼<html>，<head>和<body>分別擁有各自的折疊區域，即便他們所處的行均沒有縮排。

folding.html

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

使用 Visual Studio Code 設定項editor.foldingStrategy，可以設定編輯器通過何種方式來評定折疊區域，該設定項是一個字串並擁有以下有效取值。

auto: auto是預設值，表示使用語言自身提供的折疊區域評定方式，如果未提供，則使用縮排層級來評定 Visual Studio Code 編輯器中的折疊區域。
indentation: indentation表示使用縮排層級來評定 Visual Studio Code 編輯器中的折疊區域。

settings.json

{
	// 使用縮排層級評定折疊區域
	"editor.foldingStrategy": "indentation",
}

設定是否啟用 Visual Studio Code 編輯器的折疊程式碼功能

通過 Visual Studio Code 的設定項editor.folding，可以設定是否為編輯器啟用折疊程式碼功能，當該設定項為true（預設值）時，Visual Studio Code 編輯器的折疊程式碼功能可用。

settings.json

{
	// 停用折疊程式碼功能
	"editor.folding": false,
}

設定是否醒目提示 Visual Studio Code 編輯器中的已折疊程式碼區域

預設情況下，Visual Studio Code 編輯器會醒目提示已折疊的程式碼區域，如果將設定項editor.foldingHighlight設定為false，那麽編輯器中的已折疊區域將不再醒目提示。

settings.json

{
	// 不會醒目提示折疊區域
	"editor.foldingHighlight": false,
}

使用不同的語言在 Visual Studio Code 編輯器中建立折疊程式碼區域

當你希望折疊 Visual Studio Code 編輯器中的某些程式碼，但這些程式碼並未包含在一個折疊區域中時，使用語言提供的特殊語法（通常是指標記折疊區域開始和結束的註解陳述式）可以解決此問題，這相當於由開發人員建立了一個折疊區域。

對於通過語言的特殊語法標記的折疊區域，使用鍵盤快速鍵Ctrl+K Ctrl+8或Ctrl+K Ctrl+9，或者在命令選擇區中執行命令Fold All Regions或Unfold All Regions，即可在 Visual Studio Code 編輯器中折疊或展開他們。

以下是某些常見語言標記折疊區域的方式。


語言 區域開始 區域結束

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 編輯器中的選取程式碼建立手動折疊區域

除了通過使用不同的語言建立折疊程式碼區域一段介紹的方法，你還可以根據編輯器中已選取的程式碼來建立手動折疊區域，要完成這個目標，應首先選取需要折疊的程式碼（兩行或更多），然後使用 Visual Studio Code 鍵盤快速鍵Ctrl+K Ctrl+,，或在命令選擇區中執行命令Create Folding Range from Selection。

使用 Visual Studio Code 鍵盤快速鍵Ctrl+K Ctrl+.，或在命令選擇區中執行命令Remove Manual Folding Ranges，可以移除通過上述方式建立的手動折疊區域，如果遊標位於手動折疊區域或手動折疊區域被選取的話。

縮排和取消縮排 Visual Studio Code 編輯器中的行

對於一些語言，當在 Visual Studio Code 編輯器中輸入一行新的程式碼時，該行程式碼可能會被自動縮排。當然，你可以使用鍵盤快速鍵Ctrl+]或Ctrl+[，或者在命令選擇區中執行命令Indent Line或Outdent Line，以在 Visual Studio Code 編輯器中縮排或取消縮排遊標所在的行或被選取的多個行。

另外，傳統的縮排方法也是可行的，直接按下Tab或Shift+Tab鍵，同樣可以在 Visual Studio Code 編輯器中縮排或取消縮排遊標所在的行或被選取的多個行。如果未選取任何行，則按下Tab鍵時，遊標需要位於行開頭附近，否則無法縮排該行。

在 Visual Studio Code 命令選擇區中執行命令Reindent Lines或Reindent Selected Lines，可以重新縮排編輯器中的所有行或被選取的行。

點選 Visual Studio Code 狀態列中的縮排資訊，或在命令選擇區中執行命令Indent Using Spaces或Indent Using Tabs，可以設定使用空格字元或定位字元進行縮排，並選擇縮排的大小（重新開啟編輯器後可能會失效）。

Visual Studio Code 命令 Indent Using Spaces 和 Indent Using Tabs 未達到預期效果？

需要指出的是，命令Indent Using Spaces和Indent Using Tabs的執行效果視具體情況而定，大多數情況下，他們可以改變編輯器的縮排方式，但未必能夠完全影響現有程式碼，比如定位字元沒有轉換為空格字元，此時，可嘗試使用命令Reindent Lines或Reindent Selected Lines對程式碼進行重新縮排。

設定 Visual Studio Code 編輯器中的自動換行的縮排方式

通過 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 編輯器所采用的縮排方式與其所包含的程式碼的縮排方式不同，那麽你所書寫的新程式碼可能會與原有的程式碼在風格上存在很大不同，為此，可以調整原有程式碼和編輯器的縮排方式，以保持一致的程式碼風格，具體請參考縮排和取消縮排行一段中提到的某些方法。

點選 Visual Studio Code 狀態列中的縮排資訊，或在命令選擇區中執行命令Detect Indentation from Content，可以根據編輯器中的內容來決定編輯器的縮排方式，而新書寫的程式碼的縮排方式將與原有程式碼一致，不過，在編輯器關閉並再次開啟之後，編輯器的縮排方式將被重新設定。

如何設定 Visual Studio Code 編輯器是否根據內容自動推斷縮排方式？

如果你不希望通過執行命令Detect Indentation from Content來推斷縮排方式，那麽應使 Visual Studio Code 設定項editor.detectIndentation保持其預設值true，該設定項用於設定 Visual Studio Code 編輯器是否自動根據內容來決定縮排方式，這包括定位字元的大小，以及是否采用空格字元。

settings.json

{
	// 不會根據內容來推斷縮排方式
	"editor.detectIndentation": false,
}

設定是否使用空格字元縮排 Visual Studio Code 編輯器中的行

在預設情況下，Visual Studio Code 編輯器會使用空格字元來縮排行，你可以將設定項editor.insertSpaces設定為false（預設為true），以采用定位字元進行縮排。當然，Visual Studio Code 編輯器可能會根據編輯器中的內容來決定是否使用空格字元進行縮排，如同解決不同縮排方式的沖突一段所提到的。

settings.json

{
	// 使用定位字元進行縮排
	"editor.insertSpaces": false,
}

點選 Visual Studio Code 狀態列中的縮排資訊，或者在命令選擇區中執行命令Convert Indentation to Spaces或Convert Indentation to Tabs，可以設定編輯器采用空格字元或定位字元進行縮排，並根據目前編輯器認定的定位字元大小來轉換縮排中的空格字元和定位字元。如果剩余的空格字元不足以轉換為一個定位字元，那麽這些空格字元將被保留。

設定 Visual Studio Code 編輯器的縮排輔助線功能

在 Visual Studio Code 編輯器中，縮排輔助線是垂直顯示的直線，可以讓開發人員更加輕松的閱讀程式碼，通過將設定項editor.guides.indentation設定為false（預設值為true），可讓縮排輔助線不再顯示在 Visual Studio Code 編輯器中。

Visual Studio Code 設定項editor.guides.highlightActiveIndentation可以設定如何醒目提示目前使用中的縮排輔助線，該設定項擁有以下有效取值。

true: true是預設值，表示會醒目提示 Visual Studio Code 編輯器中目前使用中的縮排輔助線。
false: false表示不會醒目提示 Visual Studio Code 編輯器中目前使用中的縮排輔助線。
"always": "always"表示會醒目提示 Visual Studio Code 編輯器中目前使用中的縮排輔助線，即使已經醒目提示了括弧輔助線。

settings.json

{
	// 啟用縮排輔助線
	"editor.guides.indentation": true,
	// 總是醒目提示縮排輔助線
	"editor.guides.highlightActiveIndentation": "always",
}

設定 Visual Studio Code 編輯器中的定位字元的大小

Visual Studio Code 編輯器中的定位字元的大小，是指一個定位字元等同於幾個空格字元，每一次縮排會增加一個定位字元，或相應數量的空格字元。不同的 Visual Studio Code 編輯器中的定位字元大小可能不同，其預設大小由設定項editor.tabSize來決定（預設為4，即一個定位字元等同於4個空格字元）。

當然，Visual Studio Code 編輯器可能會根據編輯器中的內容來決定定位字元的大小，如同解決不同縮排方式的沖突一段所提到的。

settings.json

{
	// 定位字元大小為 3
	"editor.tabSize": 3
}

點選 Visual Studio Code 狀態列中的縮排資訊，或在命令選擇區中執行命令Change Tab Display Size，可以改變目前編輯器中的定位字元的顯示大小（重新開啟編輯器後可能失效）。

Visual Studio Code 編輯器的定位字元顯示大小與定位字元大小不同

Visual Studio Code 編輯器的定位字元顯示大小與定位字元大小並不相同，定位字元的顯示大小可能會影響定位字元與空格字元之間的轉換，但不會影響縮排輔助線的顯示（以及某些其他功能），縮排輔助線依然會根據定位字元大小而非顯示大小來確定顯示位置。

在 Visual Studio Code 編輯器中移除行的尾隨空白字元

點選 Visual Studio Code 狀態列中的縮排資訊，或在命令選擇區中執行命令Trim Trailing Whitespace，可以移除編輯器中所有行的尾隨空白字元，比如空格字元，定位字元。

程式碼

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