前言今天再來分享一個 VS Code 的小技巧，有時候程式碼比較長，我們想要將其摺疊起來、分不同的區塊，這時就可以使用編輯器內建的「程式碼摺疊」功能。

而對於想要自定義摺疊區域也是有辦法的哦，讓我們看下去~

圖片來源：Unsplash程式碼摺疊根據

官方的說法

，VS Code 編輯器默認情況下，折疊區域是根據縮進進行評估的。

如下圖行數右邊、程式碼左邊之間有 "折疊圖示" 的箭頭：

程式碼摺疊圖示程式碼摺疊起來的樣子而針對幾種程式語言 (Markdown、HTML、CSS、LESS、SCSS、JSON)，已提供語法感知折疊。

這個功能應該大部分的人都有使用過，但接下來的 "自定義折疊區域" 使用過的人應該就不多了。

折疊區域標記如果是想要自定義折疊區域，也可以通過每種語言定義的標記來定義，像是 Python 是使用 # region 和 # endregion。

像是下圖左邊為原本的 Python 程式碼，而這個 Class 有多個不同類型的屬性，除了我覺得太占版面，想要把它摺疊起來以外，我還想要區分不同類型，就可以如右邊那樣加入折疊區域標記 (後面還可以為它加上備註，這樣摺疊起來後也可以清楚的知道這段程式的用途)。

可以看到程式碼左邊會出現 "折疊圖示" 的箭頭。

原本的程式碼 與 加入折疊區域標記 對比我就可以像這樣點擊圖示來將其摺疊，這樣版面就可以很清爽~

折疊程式碼區域當然你想要嵌套多層也是可以的：

嵌套多層折疊區域目前 VS Code 編輯器定義了以下幾種程式語言的折疊標記：

LanguageStart regionEnd regionBat::#region 或 REM #region::#endregion 或 REM #endregionC##region#endregionC/C++#pragma region#pragma endregionCSS/Less/SCSS/*#region*//*#endregion*/Coffeescript#region#endregionF#//#region 或 (#_region)//#endregion 或 (#_endregion)Java//#region 或 //// #endregion 或 //MarkdownPerl5#region 或 =pod#endregion 或 =cutPHP#region#endregionPowerShell#region#endregionPython#region 或 # region#endregion 或 # endregionTypeScript/JavaScript//#region//#endregionVisual Basic#Region#End Region另外對於一些沒有程式語言支持的情況，想要新增摺疊區域的話，可以使用以下快捷鍵：

創建折疊：先 Ctrl+K 再 Ctrl+,移除折疊：先 Ctrl+K 再 Ctrl+.結語折疊區域標記只是 VS Code 編輯器定義的語法，對於落落長的程式，我們可以使用此技巧來方便我們對程式碼區分不同的區塊、摺疊讓版面更清爽，實際上它對程式碼執行並沒有任何影響 (只算是註解)。

我沒記錯的話，Visual Studio 那邊應該也可以使用一樣的折疊區域標記語法。

歡迎追蹤『

IT空間

』FB 粉專，取得最新發文通知🔔

參考：程式碼摺疊說明 | VS Code 官方文件

在錯誤的道路上，奔跑也沒有用。There is no use running if you’re on the wrong road.

—— 華倫‧巴菲特 (Warren Buffett)

🔻 如果覺得喜歡，歡迎在下方獎勵我 5 個讚~