利用 VS Code 的 Fold selection 手動建立程式的折疊區塊

撰寫程式時，IDE 的程式折疊功能十分方便，讓我們可以展開折疊多行程式區塊。不過通常 IDE 只針對括弧的區塊做折疊，有方法指定某幾行程式折疊嗎 ?

彼得潘研究一下後，發現 VS Code 的 Fold selection 提供了手動建立折疊區的 Fold selection 功能。

以下我們舉個 SwiftUI 程式說明。

struct ContentView: View {
    
    var body: some View {
        VStack {
            AsyncImage(url: URL(string: "https://www.swift.org/assets/images/landing-page/hero/bird.png"))
            Text("Hello, Swift!")
                .font(.largeTitle)
                .bold()
                .italic()
                .foregroundStyle(.orange.gradient)
                .shadow(radius: 10)
        }
        .padding()
    }
}

從下圖可看出原本只有 { } 的區塊出現折疊的箭頭。由於 Text 搭配了大量 modifier，我們希望 Text 也能成為可折疊的區塊。

選取整段 Text 加 modifier 的區塊。

從 Command palette 點選 Create Folding Range from Selection。(快速鍵cmd + k + ,)

Text 加 modifier 被折疊了 ! 點選 > 或 … 可展開程式。

之後若想移除之前創建的折疊區塊，可在選取程式後從 Command palette 點選 Remove Manual Folding Ranges。

相關連結

Basic editing