Visual Studio Code 是一款由微軟開發的原始碼編輯器，它不只支援 JavaScript ，還支援幾乎所有其他的程式語言，就連 Python 或 Flutter 開發者都會愛上這個 IDE。它為開發者提供 Interactive Playground、除錯 (Debug)、版本控制 (Version Control) 等工具。
但是，VS Code 最有趣的地方是容許使用者客製化程式碼編輯器。Marketplace 上有很多各種各樣的擴充套件 (Extension)，只需要點擊幾下就可以輕鬆整合到 IDE 中。
即使你只是剛開始使用 VS Code，你都會聽說過一些必備的擴充套件 (Extension)，像是 Live Server、Git Lens、Auto-Close Tag、Better Comments、和 Bracket Pair Colorizer 等，都是大部分開發者會有擴充套件。
但是，當中還有很多不容錯過的擴充套件。在這篇文章中，我會為你介紹 10 個與編程無關、但非常有趣的擴充套件，為我們提高工作效率的同時，還可以讓編程變得更有趣！
1. Vibrancy
第一個要介紹的 VS Code 擴充套件，可以為編輯器帶來漂亮的外觀。
把它整合到 VS Code 後，你可以設置編輯器的背景為半透明，這種模糊的感覺讓你可以查看後面的內容。因此，在我們一邊編寫程式碼、一邊查看文檔時，我們就無須不停切換視窗了。
Vibrancy 也讓我們客製化主題和不透明度，還可以選擇啟用或關閉glass effect。
2. Bookmarks
要在一個文件成千上萬行程式碼中導航是非常困難的，尤其是在需要跨程式碼區塊跳轉的時侯。幸好，Bookmarks 就是那個可以拯救我們的 VS Code 擴充套件。
就像在瀏覽器中為連結添加書籤一樣，這個擴充套件可以在文件中標記某些程式碼片段。如此一來，你就可以輕鬆地跳轉到想要的程式碼片段，又或是將它們單獨列出。
如果你的程式庫中有很多 Log Statement，Bookmarks 擴充套件就非常有用了。另外，它也可以用作剪貼板，讓我們方便地剪貼程式碼片段。
3. Footsteps
如果說 Bookmarks 就像書籤一樣，那麼 Footsteps 就像是實時的歷史記錄。這個 VS Code 擴充套件會 Highlight 你正在編輯的該行程式碼，而移開的時候則淡化，如此一來，你就可以追蹤程式碼的更改。
Footsteps 在除錯時為我們提供方便的視覺提示，並讓我們可以利用一些鍵盤快捷鍵，無縫地切換先前修改的程式碼。
我們可以利用 Footsteps：
- 使用
ctrl+alt+left和ctrl+alt+right在各行程式碼之間跳轉； - 設置 Highlight 程式碼的限制、保存的歷史記錄、以及客製化 Highlight 的顏色。
4. Tabout
如果你是從 IntelliJ Idea 或 Visual Studio 轉來使用 VS Code，就會發現 VS Code 在預設情況下不會自動跳出括號或引號，如此一來，我們就經常需要按右箭頭按鈕。
我不是在說 Tab 還是右箭頭按鈕比較好用，但是我們應該可以選擇使用哪一個按鈕。
這個時候我們就可以使用 Tabout 擴充套件，它讓我們可以在填滿括號或引號後，快速地跳出來。如果你覺得按右箭頭按鈕比較方便，要選擇啟用或關閉這個擴充功能也非常方便。
5. Coins
最近，加密貨幣和 NFT 一直是城中熱話，很多人都看好這股潮流。同樣地，在編寫程式碼時，切換視窗會打斷你的開發流程。
幸好，我們有 Coins 這個 VS Code 擴充套件，它可以顯示當前的加密貨幣價格、過去 24 小時內的變化、以及其他指標，讓你不會錯過這股潮流
6. Winddown
我們作為開發者，經常長期坐在電腦前工作，這樣會造成壓力，影響健康。
適時休息一下會比較好。我試過使用不同方法提醒自己要休息，例如利用番茄工作法 (Pomodoro Technique) 讓自己每工作 25 分鐘就休息 5 分鐘。但是，這就像是鬧鐘的貪睡鍵 (Snooze)，最後我都會無視提醒，繼續工作。
在這個情況下，我們就可以使用 Winddown 這個擴充套件。Winddown 會逐漸把 IDE 的顏色變淡，直到你停止輸入為止，這是一個很好的提醒，而又不會打斷我們的工作。如此一來，我們就可以很容易地暫停和重新開始工作。
你可以在 Winddown 中設置工作時限和影格率 (frame rate)，來控制褪色速度的。
7. Codetour
在招聘新開發者或交接工作期間，最痛苦的就是要了解整個程式碼庫。如果是遙距工作 (remote work)，大家只能依賴文檔時，情況就更加棘手了。
文檔可能很無聊。而 Codetour 就是一個新的 VS Code 擴充套件，讓我們可以錄製和播放逐步指導的程式碼庫教學，讓整個了解的過程更互動。
在匯出整個教學之前，你還可以為各個步驟添加註釋，甚至可以重新排列步驟。
8. Debug Visualiser
對於初學者而言，除錯是很困難，而要掌握資料結構 (data structure) 就更加困難。
開發者起步時，很容易對整個 LinkedList 的迭代過程感到混亂。在這個情況下，我們就可以用 VSCode Debug Visualizer 這個擴充套件，在編輯器中可視化資料結構。
它會打開一個新的可視化器視圖 (visualizer view)，讓我們觀察圖表中各個迭代的數值，來為資料結構除錯。而且，要在表格中可視化 JSON、或利用資料點 (data point) 繪製直方圖 (histogram) 和圖表，這個擴充套件都可以方便地做到。
9. Coddx
我們都是使用 markdown 檔案記下進度、問題、和標記待辦事項的。但是，一個簡單的列表無法管理我們的工作進度。
看板 (Kanban) 就是一種解決方法，把各個階段可視化來改善工作管理。
Coddx 混合了兩者的好處，為我們提供一系列的工具，來創建互動式看板，並以 markdown 檔案保存。
10. GrokJS
雖然 JavaScript 是一種廣泛使用的語言，但開始學習這種語言並不容易。它的語法並不簡單，特別是如果你本來是使用另一種語言（例如 Java）的時候。
GrokJS 是一個 VS Code 擴充套件，讓你在 Visual Studio Code 中即時學習 JavaScript。你只需要 Highlight 一段程式碼，它就會以小視窗顯示相關文檔，並附上相關的連結。
閱讀程式碼是學習任何編程語言的最佳方法，有了 GrokJS，我們就不用事事都上網搜索了。
總結
以上就是我正在使用的 VS Code 擴充套件，希望你也覺得這些套件有用，並把它們整合到你的 Toolkit 中。
本篇文章到此為止，謝謝你的閱讀。