推薦 10 個 Visual Studio Code 擴充套件 讓編程變得有效率又有趣!

推薦 10 個 Visual Studio Code 擴充套件 讓編程變得有效率又有趣!
推薦 10 個 Visual Studio Code 擴充套件 讓編程變得有效率又有趣!
In:

本篇原文(標題:10 Fun VS Code Extensions To Enjoy Coding As a Developer)刊登於作者 Medium,由 Anupam Chugh 所著,並授權翻譯及轉載。

Visual Studio Code 是一款由微軟開發的原始碼編輯器,它不只支援 JavaScript ,還支援幾乎所有其他的程式語言,就連 Python 或 Flutter 開發者都會愛上這個 IDE。它為開發者提供 Interactive Playground、除錯 (Debug)、版本控制 (Version Control) 等工具。

但是,VS Code 最有趣的地方是容許使用者客製化程式碼編輯器。Marketplace 上有很多各種各樣的擴充套件 (Extension),只需要點擊幾下就可以輕鬆整合到 IDE 中。

即使你只是剛開始使用 VS Code,你都會聽說過一些必備的擴充套件 (Extension),像是 Live ServerGit LensAuto-Close TagBetter Comments、和 Bracket Pair Colorizer 等,都是大部分開發者會有擴充套件。

但是,當中還有很多不容錯過的擴充套件。在這篇文章中,我會為你介紹 10 個與編程無關、但非常有趣的擴充套件,為我們提高工作效率的同時,還可以讓編程變得更有趣!

1. Vibrancy

第一個要介紹的 VS Code 擴充套件,可以為編輯器帶來漂亮的外觀。

把它整合到 VS Code 後,你可以設置編輯器的背景為半透明,這種模糊的感覺讓你可以查看後面的內容。因此,在我們一邊編寫程式碼、一邊查看文檔時,我們就無須不停切換視窗了。

Vibrancy 也讓我們客製化主題和不透明度,還可以選擇啟用或關閉glass effect。

圖片來源:Visual Studio Code Extension – Vibrancy on GitHub

2. Bookmarks

要在一個文件成千上萬行程式碼中導航是非常困難的,尤其是在需要跨程式碼區塊跳轉的時侯。幸好,Bookmarks 就是那個可以拯救我們的 VS Code 擴充套件。

就像在瀏覽器中為連結添加書籤一樣,這個擴充套件可以在文件中標記某些程式碼片段。如此一來,你就可以輕鬆地跳轉到想要的程式碼片段,又或是將它們單獨列出。

如果你的程式庫中有很多 Log Statement,Bookmarks 擴充套件就非常有用了。另外,它也可以用作剪貼板,讓我們方便地剪貼程式碼片段。

圖片來源:Bookmarks Extension for Visual Studio Code on GitHub

3. Footsteps

如果說 Bookmarks 就像書籤一樣,那麼 Footsteps 就像是實時的歷史記錄。這個 VS Code 擴充套件會 Highlight 你正在編輯的該行程式碼,而移開的時候則淡化,如此一來,你就可以追蹤程式碼的更改。

Footsteps 在除錯時為我們提供方便的視覺提示,並讓我們可以利用一些鍵盤快捷鍵,無縫地切換先前修改的程式碼。

我們可以利用 Footsteps:

  • 使用 ctrl+alt+left 和 ctrl+alt+right 在各行程式碼之間跳轉;
  • 設置 Highlight 程式碼的限制、保存的歷史記錄、以及客製化 Highlight 的顏色。
圖片來源:Footsteps on GitHub

4. Tabout

如果你是從 IntelliJ Idea 或 Visual Studio 轉來使用 VS Code,就會發現 VS Code 在預設情況下不會自動跳出括號或引號,如此一來,我們就經常需要按右箭頭按鈕。

我不是在說 Tab 還是右箭頭按鈕比較好用,但是我們應該可以選擇使用哪一個按鈕。

這個時候我們就可以使用 Tabout 擴充套件,它讓我們可以在填滿括號或引號後,快速地跳出來。如果你覺得按右箭頭按鈕比較方便,要選擇啟用或關閉這個擴充功能也非常方便。

圖片來源:Tabout on GitHub

5. Coins

最近,加密貨幣和 NFT 一直是城中熱話,很多人都看好這股潮流。同樣地,在編寫程式碼時,切換視窗會打斷你的開發流程。

幸好,我們有 Coins 這個 VS Code 擴充套件,它可以顯示當前的加密貨幣價格、過去 24 小時內的變化、以及其他指標,讓你不會錯過這股潮流

圖片來源:Coins on GitHub

6. Winddown

我們作為開發者,經常長期坐在電腦前工作,這樣會造成壓力,影響健康。

適時休息一下會比較好。我試過使用不同方法提醒自己要休息,例如利用番茄工作法 (Pomodoro Technique) 讓自己每工作 25 分鐘就休息 5 分鐘。但是,這就像是鬧鐘的貪睡鍵 (Snooze),最後我都會無視提醒,繼續工作。

在這個情況下,我們就可以使用 Winddown 這個擴充套件。Winddown 會逐漸把 IDE 的顏色變淡,直到你停止輸入為止,這是一個很好的提醒,而又不會打斷我們的工作。如此一來,我們就可以很容易地暫停和重新開始工作。

你可以在 Winddown 中設置工作時限和影格率 (frame rate),來控制褪色速度的。

圖片來源:Winddown – Write code and stay healthy on GitHub

7. Codetour

在招聘新開發者或交接工作期間,最痛苦的就是要了解整個程式碼庫。如果是遙距工作 (remote work),大家只能依賴文檔時,情況就更加棘手了。

文檔可能很無聊。而 Codetour 就是一個新的 VS Code 擴充套件,讓我們可以錄製和播放逐步指導的程式碼庫教學,讓整個了解的過程更互動。

在匯出整個教學之前,你還可以為各個步驟添加註釋,甚至可以重新排列步驟。

圖片來源:CodeTour on GitHub

8. Debug Visualiser

對於初學者而言,除錯是很困難,而要掌握資料結構 (data structure) 就更加困難。

開發者起步時,很容易對整個 LinkedList 的迭代過程感到混亂。在這個情況下,我們就可以用 VSCode Debug Visualizer 這個擴充套件,在編輯器中可視化資料結構。

它會打開一個新的可視化器視圖 (visualizer view),讓我們觀察圖表中各個迭代的數值,來為資料結構除錯。而且,要在表格中可視化 JSON、或利用資料點 (data point) 繪製直方圖 (histogram) 和圖表,這個擴充套件都可以方便地做到。

圖片來源:VS Code Debug Visualizer on GitHub

9. Coddx

我們都是使用 markdown 檔案記下進度、問題、和標記待辦事項的。但是,一個簡單的列表無法管理我們的工作進度。

看板 (Kanban) 就是一種解決方法,把各個階段可視化來改善工作管理。

Coddx 混合了兩者的好處,為我們提供一系列的工具,來創建互動式看板,並以 markdown 檔案保存。

圖片來源:Coddx on GitHub

10. GrokJS

雖然 JavaScript 是一種廣泛使用的語言,但開始學習這種語言並不容易。它的語法並不簡單,特別是如果你本來是使用另一種語言(例如 Java)的時候。

GrokJS 是一個 VS Code 擴充套件,讓你在 Visual Studio Code 中即時學習 JavaScript。你只需要 Highlight 一段程式碼,它就會以小視窗顯示相關文檔,並附上相關的連結。

閱讀程式碼是學習任何編程語言的最佳方法,有了 GrokJS,我們就不用事事都上網搜索了。

圖片來源:GrokJS on GitHub

總結

以上就是我正在使用的 VS Code 擴充套件,希望你也覺得這些套件有用,並把它們整合到你的 Toolkit 中。

本篇文章到此為止,謝謝你的閱讀。

本篇原文(標題:10 Fun VS Code Extensions To Enjoy Coding As a Developer)刊登於作者 Medium,由 Anupam Chugh 所著,並授權翻譯及轉載。

作者簡介:Anupam Chugh,深入探索 ML 及 AR 的 iOS Developer。喜愛撰寫關於想法、科技、與程式碼的文章。歡迎到我的 Blog 閱讀更多文章,或在 LinkedIn 上關注我。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。

作者
AppCoda 編輯團隊
此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。
評論
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。