VSCode on IT 空間

VS Code 小技巧 — 將程式碼摺疊起來，讓畫面更簡潔

jia@jiatool.com (Jia) — Sun, 13 Aug 2023 13:30:00 +0800

前言

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

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

圖片來源：Unsplash

程式碼摺疊

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

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

程式碼摺疊圖示

程式碼摺疊起來的樣子

而針對幾種程式語言 (Markdown、HTML、CSS、LESS、SCSS、JSON)，已提供語法感知折疊。

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

折疊區域標記

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

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

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

原本的程式碼與加入折疊區域標記對比

我就可以像這樣點擊圖示來將其摺疊，這樣版面就可以很清爽~

折疊程式碼區域

當然你想要嵌套多層也是可以的：

嵌套多層折疊區域

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

Language	Start region	End region
Bat	`::#region` 或 `REM #region`	`::#endregion` 或 `REM #endregion`
C#	`#region`	`#endregion`
C/C++	`#pragma region`	`#pragma endregion`
CSS/Less/SCSS	`/#region/`	`/#endregion/`
Coffeescript	`#region`	`#endregion`
F#	`//#region` 或 `(#_region)`	`//#endregion` 或 `(#_endregion)`
Java	`//#region` 或 `//<editor-fold>`	`// #endregion` 或 `//</editor-fold>`
Markdown	`<!-- #region -->`	`<!-- #endregion -->`
Perl5	`#region` 或 `=pod`	`#endregion` 或 `=cut`
PHP	`#region`	`#endregion`
PowerShell	`#region`	`#endregion`
Python	`#region` 或 `# region`	`#endregion` 或 `# endregion`
TypeScript/JavaScript	`//#region`	`//#endregion`
Visual 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)

VS Code 小技巧 — 使用正規表達式(Regular Expression)來尋找和取代文字

jia@jiatool.com (Jia) — Sat, 03 Jun 2023 21:30:00 +0800

前言

在 Visual Studio Code 內你有沒有遇過一些情況，想要尋找(或取代)某些文字，但不知道怎麼下手。

今天來分享一個 VS Code 的小技巧，使用正規表達式(Regular Expression)來尋找和取代文字，針對一些比較複雜的情況會非常好用！！

文章我列出幾種我實際使用過的語法給各位參考。
以下技巧學起來後，未來需要尋找或取代，不用在那邊一行一行耗眼力尋找，或 ctrl+c、ctrl+v 費神練手速了。

圖片來源：Unsplash

正規表達式(Regular Expression)

先來快速認識常用的正規表達式(Regular Expression)語法：

符號	說明
`google`	匹配 google。
`[abc]`	匹配 a 或 b 或 c 的字元。
`[a-z]`	匹配 a~z 之間的字元。
`[^a-z]`	匹配所有非 a~z 之間的字元。
`g..gle`	`.` 代表換行字元以外的任意字元(等同於 `[^\n\r]`)，g 後接著兩個字元，然後接著是 gle。
`^hello`	匹配行以 hello 開頭。
`world$`	匹配行以 world 結尾。
`go?gle`	代表前一個字元出現零次或一次 (0 或 1 次)，匹配 ggle、gogle 等，等同於 `{0,1}`。
`go*gle`	代表前一個字元出現任意次數 (0 次以上)，匹配 ggle、gogle、google 等，等同於 `{0,}`。
`go+gle`	代表前一個字元至少出現一次 (1 次以上)，匹配 gogle、google 等，等同於 `{1,}`。
`go{m}gle`	指定前一個字元出現 m 次。
`go{m,}gle`	指定前一個字元出現 m 次以上。
`go{m,n}gle`	指定前一個字元出現次數，m~n 之間的次數。
`A\\|B`	匹配 A 或 B 字串，`true\\|false` 匹配 true 或 false 字串。
`\`	下一個字符標記為特殊字元、或原義字元。`\?` 匹配 `?` (因為 `?` 本身在正規表達式裡是代表不同意思)
`()`	一個子表達式的開始和結束，提取子表達式字串供之後使用。
`$1`	第一組使用 `()` 匹配的部分，`$2` 代表第二組、`$0` 代表完整匹配的內容。

特別序列 (Special Sequences)：

符號	說明
`\d`	所有數字，等同於 `[0-9]`。
`\D`	所有非數字，等同於 `[^0-9]`。
`\w`	所有字母、數字、底線，等同於 `[A-Za-z0-9_]`。
`\W`	所有非字母、數字、底線，等同於 `[^A-Za-z0-9_]`。
`\s`	任意空白字元，等同於 `[ \f\n\r\t\v]`。
`\S`	任意非空白字元，等同於 `[^ \f\n\r\t\v]`。
`\n`	換行字元。
`\t`	tab 字元。
`\b`	單字的邊界。
`\B`	非單字的邊界。

* 和 + 是貪婪的(匹配越多越好)，可以在後方加上 ? 使用非貪婪模式，例如有一個 HTML 字串 <h1>正規表達式</h1>：

<.*> 會匹配到 <h1>正規表達式</h1>；
<.*?> 會匹配到 <h1> 和 </h1>。

為了寫這篇文章在查找正規表達式時，發現有一種 Lookahead 和 lookbehind 語法，感覺也很實用。

符號	說明
`x(?=y)`	zero-width positive lookahead assertion，匹配 x，並且後方是 y。
`x(?!y)`	zero-width negative lookahead assertion，匹配 x，並且後方不是 y。

例如有一字串 Java JavaScript JavaBeans：
Java(?=Script) 會匹配到 JavaScript 的 Java；
Java(?!Script) 會匹配到 Java 和 JavaBeans 的 Java。

符號	說明
`(?<=y)x`	zero-width positive lookbehind assertion，匹配 x，並且前方是 y。
`(?<!y)x`	zero-width negative lookbehind assertion，匹配 x，並且前方不是 y。

例如有一字串 Script JavaScript TypeScript：
(?<=Java)Script 會匹配到 JavaScript 的 Script；
(?<!Java)Script 會匹配到 Script 和 TypeScript 的 Script。

這邊超級推薦一個線上網頁工具，方便我們嘗試正規表達式： regex101

regex101：好用的正規表達式測試網站

基本操作

在 VS Code 內要使用尋找/取代功能，可以使用快捷鍵 Ctrl + f 叫出尋找/取代視窗，或從左上角功能列打開編輯 > 尋找/取代。

在輸入框可以使用 Ctrl + Enter 插入換行，在 "尋找" 的輸入框可用上下鍵查看歷史紀錄。

因為本篇主要說明正規表達式的尋找與取代，因此 "使用正規表達式" 的那顆按鈕要啟用。

VS Code 尋找&取代

題外話：
stack overflow 上這篇回答提到，VS Code 的正規表達式是使用 JavaScript 的 RegEx engine。
(這邊指的是以上說明的 "尋找/取代小工具"，左邊文件欄的又不太一樣，不過基本常用的正規表達式語法都是有支援的)

特殊案例

以下列出一些較特殊的案例給各位參考。

多個連續的空白換成一個

先來個簡單的，假如要將多個連續空白換成一個空白：

使用 \s+ 查找，取代成：

大 家 好 嗎？
// 取代後會變成
大 家 好 嗎？

找出 Java 而不是 Javascript

假設有一個句子：difference between Javascript and Java.

直接使用 Java 去搜尋會找到 Javascript 的 Java 和 Java。
但我其實只想要找出 Java 這個單字。

這時候就可以使用 \b (單字的邊界)來尋找：\bJava\b

找出 Java 而不是 Javascript

保留原字串內容 $

正規表達式內使用 () 可以將這部分提取出來，在取代的部分就可以使用 $1 指第一個字串、$2 指第二個字串 ($0 指匹配的全部)。

舉個例子，我們想把 HTML 語法內的 h2 全部替換為 Markdown 語法的標題(## )，當然標題的字串要留著。

使用 <h2>(.+?)<\/h2> 查找，取代成 ## $1，
因此 <h2>標題一</h2> 取代後會變成 ## 標題一。

* 因為 </h2> 內的斜線在正規表達式內是有其他功能，因此想要比對斜線，前方需要加上反斜線 \ 來將其標示為一般字串。
* 在 () 內還有使用 ? 來使用非貪婪模式，避免如果一行字串出現兩個 <h2></h2> 會有問題。

保留原字串內容

替換英文大小寫

符號	說明
`\u`	大寫一個字元。
`\l`	小寫一個字元。
`\U`	大寫匹配組的全部字元。
`\L`	小寫匹配組的全部字元。

使用 (hello)(.*) 查找，取代成 \l$1\U$2，
因此 Hello world 取代後會變成 hello WORLD。

替換英文大小寫

將日期 2023/07/01 轉換為 2023年07月01日

我們想把日期中間的斜線替換成 "年"、"月"、"日"。

使用 () group 將年、月、日的數字抽取出來，再使用 "年"、"月"、"日" 去替換掉。

使用 (\d{4})\/(\d{2})\/(\d{2}) 查找，取代成 $1年$2月$3日，
因此 2023/07/01 取代後會變成 2023年07月01日。

將日期 2023/07/01 轉換為 2023年07月01日

日期字串補上 0

同樣是日期但不同操作，我們想把日期字串 2023/5/1 補上 0 變成 2023/05/01，當然他如果原本就是兩位數，則不需要補 0。

使用 /(\d{1})(?=[\D\n]) 查找，取代成 /0$1，
因此 2023/5/10 取代後會變成 2023/05/10。

日期字串補上 0

去除相鄰的重複英文單字

這個範例是我們想把相鄰的重複英文單字找出來，並取去除掉，只留下一個就好。

使用 \b(\w+)\s+\1\b 查找，取代成 $1，
因此 The the quick brown fox jumps over the lazy dog dog. 會被替換成 The quick brown fox jumps over the lazy dog.。

* \b：單字的邊界
* (\w+)：一個英文單字
* \s+：一個或多個空格
* \1：重點，匹配與第一組(即前面的 (\w+))相同的單詞。

後續如果還有遇到比較特別的例子，我還會再補上~

結語

本來寫這篇文章前，想說舉幾個特殊用法就好，結果資料查著查著，就不小心把正規表達式(Regular Expression)的用法也整理出來了🤣
算了，剛好也可以給未來的我參考。

本篇文章所說明的概念，使用 Visual Studio IDE 或其他編輯器也是大同小異。

歡迎追蹤『 IT空間』FB 粉專，取得最新發文通知🔔

參考：
正規表達式 | MDN Web Docs
regex101
VS Code 官方使用尋找取代說明
 正規表示式（Regular Expression）| HackMD

你所害怕的事情，從來不會如你想像中的那般嚴重。
你自己在腦海裡所勾勒出來恐懼的影像總是會比實際情況糟的多。

—— 史賓賽強森