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

閱讀 27:59·字數 8398·發佈 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

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

如果設定項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

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

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

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

VSCode 快速縮排單行、多行，以及正確設定縮排字元、定位字元空格數
影片示範 YouTube

對於一些語言，當在編輯器中輸入一行新的程式碼時，該行程式碼可能會被自動縮排。當然，你可以使用鍵盤快速鍵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

使用鍵盤快速鍵Ctrl+/（對應命令Toggle Line Comment），可將遊標所在行或所有選取的行，轉換為行註解（或取消行註解）。

使用鍵盤快速鍵Shift+Alt+A（對應命令Toggle Block Comment），可將選取程式碼包含在區塊註解內（或取消區塊註解）。

在 Visual Studio Code 編輯器中快速移動、複製、刪除、新增單行

VSCode 快速移動、複製、刪除單行或多行，以及新增行
影片示範 YouTube

使用鍵盤快速鍵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-hant/editors/code·codebeatme/vscode·GitHub

講解影片

VSCode 正確設定「儲存時格式化檔案」功能，以及手動格式化檔案·YouTube
VSCode 手動建立摺疊區域·YouTube
VSCode 快速縮排單行、多行，以及正確設定縮排字元、定位字元空格數·YouTube
VSCode 快速註解/取消註解多行、單行、程式碼塊·YouTube
VSCode 快速移動、複製、刪除單行或多行，以及新增行·YouTube