vscode 折疊代碼

很多編程語言都使用花括號來包裹代碼塊。比如說類的定義、函數(shù)的定義、條件判斷語句或者循環(huán)語句，它們都是用花括號作為一個代碼塊的開始和結(jié)尾。而VS Code 就是通過對花括號的匹配來決定哪些代碼塊是能夠被折疊的。

首先，我們一起來看一下編輯器中最基礎(chǔ)的代碼折疊方式。比如在下面的這段 JavaScript 代碼中：

function foo() {
bar("Hello World");
}

foo()

function bar(a) {

}

JavaScript

前三行里是一個foo的函數(shù)，并且這個函數(shù)當中只有一行內(nèi)容。

當我們把鼠標移動到行號的附近時，就能夠看到一個類似于減號的標記，同時鼠標指針變成了手的形狀。

鼠標移動到行號附近

此時若我們單擊這個圖標，就能夠看到 foo函數(shù)內(nèi)部的這行代碼消失了，取而代之的則是三個點的縮略圖。

代碼被折疊

在代碼被折疊后，行號附近的這個圖標就變成了一個加號的形狀，若再點擊這個加號就能把這段代碼展開。

以上內(nèi)容就是代碼折疊最基本的概念，下面介紹下VSCode基于語言定義的代碼折疊。

VSCode基于語言定義的代碼折疊

上面講述的代碼折疊的判斷方式，是通過花括號或者代碼縮進的檢測來實現(xiàn)的。但若遇到不使用花括號或者縮進不正確的代碼時，可能就不能實現(xiàn)這樣的操作了。為此，VS Code 給語言服務(wù)提供了一個接口，語言服務(wù)可以動態(tài)地檢測代碼，然后告訴 VS Code 哪段代碼是可以被折疊的。

這樣一來，VS Code 就不用傻傻地檢查花括號的匹配了，并且我們寫代碼的時候也不用為了折疊而更改代碼風格了。

除了讓語言服務(wù)參與到代碼折疊的定義當中來，VS Code 還給了用戶一定的控制權(quán)。也就是說，我們可以通過在代碼注釋里書寫特殊的關(guān)鍵詞來申明，哪一行是可折疊代碼的開始，哪一段則是這個可折疊代碼塊的結(jié)束。

舉例子可能要比解釋定義要來的容易一些，所以我們一起看下面的這段 Java 代碼：

public class Main {
// region Main
public static void main(String[] args) {
}
// endregion
}

Java

其中，// region Main 申明了一個可折疊代碼塊的開始，而// endregion則申明了這段可折疊代碼的結(jié)束。當我們把鼠標指針移動到行號附近時，我們能夠看到三個加號，說明這段代碼包含了三個可折疊的代碼塊，兩個是由花括號控制的，一個則是基于特殊的語言的定義。

至于哪個語言可以使用哪些關(guān)鍵詞來控制代碼的折疊，還請參考 VS Code 的官方文檔。

下面我們再來一起看一下有哪些折疊和展開代碼的快捷鍵。