vscode 支持代碼折疊功能,可通過多種方式操作。1. 鼠標點擊左側小三角圖標可展開或折疊代碼塊,適合局部隱藏;2. 使用快捷鍵 ctrl + shift + [(windows/linux)或 command + option + [(macos)一鍵折疊所有代碼,對應快捷鍵也可展開全部;3. 通過命令面板執行“fold level x”按縮進層級折疊代碼;4. 默認不保存折疊狀態,但可通過插件如 fold plus 實現記憶折疊狀態,提升瀏覽和編輯效率。
vscode 默認就支持代碼折疊功能,不過很多人剛開始用的時候可能沒注意怎么操作,其實掌握幾個小技巧就能快速折疊代碼塊,提高瀏覽和編輯效率。
鼠標點擊折疊:最直觀的方式
在代碼編輯器的左側,也就是行號旁邊,你會看到一個小三角圖標。點擊這個圖標就可以展開或折疊對應的代碼塊。這種方式適合偶爾需要折疊某一段代碼的時候使用,比如查看函數結構、隱藏不關心的部分等。
- 函數內部代碼折疊后,只保留函數聲明那一行
- 類中的方法也可以單獨折疊
- 如果是 html 或 JSX 這類嵌套結構,標簽內的內容也能逐層折疊
這種操作雖然簡單,但如果要折疊多個區域,一個個點就會有點麻煩。
快捷鍵一鍵折疊所有代碼塊
如果你希望一次性把當前文件中所有的可折疊代碼都收起來,可以用快捷鍵:
這樣可以把整個文件的所有代碼塊都折疊起來,只顯示第一層結構。如果你想再展開全部,也有對應快捷鍵:
- Windows/Linux:Ctrl + Shift + ]
- macos:Command + Option + ]
這個方法特別適合在看一個新項目時,先快速瀏覽整體結構,再有選擇地展開關注部分。
折疊層級控制:按縮進級別折疊
有些時候你不想折疊全部,也不想一個個點,而是想根據代碼縮進層次來折疊。VSCode 提供了“Fold Level”命令,可以按縮進深度來控制折疊程度。
例如:
- Fold Level 1:只折疊最外層(如類定義)
- Fold Level 2:折疊到第二層(如類中的方法)
- 依此類推,最多可以到 Fold Level 7 左右(取決于代碼結構)
你可以通過命令面板(Ctrl + Shift + P)搜索 Fold Level X 來執行,也可以自己設置快捷鍵綁定。
小細節:折疊狀態默認保存嗎?
VSCode 不會自動記住上次關閉文件時的折疊狀態。也就是說,每次打開一個文件,默認都會展開全部。如果你希望保持上次的折疊狀態,可以安裝一些插件來實現,比如 “Fold Plus” 或 “Save and Restore Folding State”。
不過對大多數日常使用來說,配合快捷鍵手動折疊已經夠用了。
基本上就這些常用的方法。折疊代碼看似簡單,但熟練以后在閱讀大型文件或者協作項目時,真的能節省不少時間。