vscode 折疊代碼

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

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

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

foo()

function bar(a) {

}

JavaScript

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

當(dāng)我們把鼠標(biāo)移動(dòng)到行號(hào)的附近時(shí)，就能夠看到一個(gè)類(lèi)似于減號(hào)的標(biāo)記，同時(shí)鼠標(biāo)指針變成了手的形狀。

鼠標(biāo)移動(dòng)到行號(hào)附近

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

代碼被折疊

在代碼被折疊后，行號(hào)附近的這個(gè)圖標(biāo)就變成了一個(gè)加號(hào)的形狀，若再點(diǎn)擊這個(gè)加號(hào)就能把這段代碼展開(kāi)。

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

VSCode基于語(yǔ)言定義的代碼折疊

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

這樣一來(lái)，VS Code 就不用傻傻地檢查花括號(hào)的匹配了，并且我們寫(xiě)代碼的時(shí)候也不用為了折疊而更改代碼風(fēng)格了。

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

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

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

Java

其中，// region Main 申明了一個(gè)可折疊代碼塊的開(kāi)始，而// endregion則申明了這段可折疊代碼的結(jié)束。當(dāng)我們把鼠標(biāo)指針移動(dòng)到行號(hào)附近時(shí)，我們能夠看到三個(gè)加號(hào)，說(shuō)明這段代碼包含了三個(gè)可折疊的代碼塊，兩個(gè)是由花括號(hào)控制的，一個(gè)則是基于特殊的語(yǔ)言的定義。

至于哪個(gè)語(yǔ)言可以使用哪些關(guān)鍵詞來(lái)控制代碼的折疊，還請(qǐng)參考 VS Code 的官方文檔。

下面我們?cè)賮?lái)一起看一下有哪些折疊和展開(kāi)代碼的快捷鍵。