vscode 折疊代碼

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

首先，我們一起來看一下編輯器中最基礎(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è)類似于減號(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)就能把這段代碼展開。

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

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

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

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

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

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

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

Java

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

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

下面我們?cè)賮硪黄鹂匆幌掠心男┱郫B和展開代碼的快捷鍵。