1 Todo Tree

很多人在處理問題時都有自己的方式，在代碼中加入某種形式的注釋，并承諾自己會回來重新審視這段代碼。然而，實際上很少有人能夠真正回來重新審視這些注釋，結果我們經常發現這些被遺忘的代碼片段。

為了解決這個問題，有一個插件可以幫助我們以不同的樣式在注釋部分編寫ToDo，并且可以方便地在代碼庫中找到所有相同的ToDo。這樣一來，就能更好地管理和跟蹤我們的開發計劃了。

圖片

2 CSS Triggers

這個插件可以幫助我們更智能地編寫代碼，并提供有關CSS屬性的布局、繪制和組合的更多信息。

該擴展為CSS屬性添加內聯修飾來指示它們的成本。

圖片

同時，我們還可以找到示例，了解在編寫這些屬性時通過改變給定CSS屬性而觸發的不同變化。這些變化因瀏覽器引擎而異，包括Blink、Gecko、WebKit、EdgeHTML。通過這個插件，我們可以更好地了解和優化CSS代碼。

3 REST Client

這個工具是在VS Code中使用curl命令的快捷方式和現成解決方案。支持測試Rest API，包括任何Get/Post/Put/Delete（CRUD）操作，帶有參數和請求頭。

圖片

4 正則表達式預覽器

大多數人在處理復雜的正則表達式并測試不同的變體時通常會訪問https://regex101.com/網站。然而，有一個插件可以幫助我們省去訪問其他網站的麻煩，直接在編輯器中即時測試你的正則表達式。這個插件會以并排顯示的方式打開結果和匹配項，讓你更方便地進行測試和調試。這樣就能更高效地編寫和驗證正則表達式了。

圖片

5 Compareit

這個擴展幫助我們比較兩個文件，你可以從當前項目和計算機上的其他目錄選擇文件，甚至可以從剪貼板中選擇文件進行比較。使用這個擴展，就不再需要其他在線文本比較工具或離線許可軟件了。它提供了便捷的文件比較功能，讓我們能夠輕松地對比文件內容，提高工作效率。

圖片

6 書簽

當你處理大文件并且需要在文件中不斷搜索代碼片段時，這個插件非常有幫助。它可以幫助我們在文件中快速跳轉到另一個位置，節省寶貴的時間。你可以在文件中設置書簽，并通過簡單的操作在書簽之間切換。此外，還可以在左側菜單中查看書簽列表，方便地管理和導航到不同的書簽位置。使用這個插件，我們能更高效地瀏覽和編輯大文件，提高工作效率。

圖片

7 React Snippets

代碼片段是一種超級省時和高效的方式，這個工具提供了編寫動態組件、類組件、導入、導出、純函數等片段的功能。

在編輯器中，當你輸入csc作為片段的起始，它將顯示一個包含所有可用選項的選擇列表。你可以傳遞不同的值作為參數，比如$2、$3等。這個代碼片段生成器讓你能夠快速插入常用代碼塊，提高編碼速度和質量。無論是快速創建組件，還是導入導出模塊，都能通過這個工具輕松完成。

圖片

8 Prettier

對于美化JavaScript和其他語言的代碼，有多種插件可供選擇，取決于個人的偏好。剛開始使用此插件時可能會感到有些困惑，因為配置并不直觀且需要時間。然而，一旦配置完成，它將非常方便代碼審查人員的工作。

此插件不僅可以格式化代碼，還可以處理LF、RF（UTF-8）和其他格式。它提供了一種便捷的方式，在文檔保存或選擇特定代碼后對代碼進行美化。你可以使用快捷鍵（Command + Shift + P）執行相應的操作。

通過使用這個代碼美化插件，你可以提高代碼的可讀性和一致性，使得代碼更易于維護和理解。

圖片

9 代碼拼寫檢查器

這個插件可以幫助我們捕捉到在編寫代碼時的英語拼寫錯誤。它支持幾乎所有主要的編程語言。

圖片

10 添加JSDoc注釋

這個工具真的很有趣！你不再需要手動添加一些虛擬的參數，比如參數、返回值、描述等，并將它們從虛擬狀態更新為實際參數。現在，你只需選擇函數定義，按下（command + Shift + p）打開命令面板（Mac），然后選擇“添加JSDoc注釋”，一個帶有所選參數的注釋部分將自動添加。

這個功能真的很酷，可以幫助我們快速生成JSDoc注釋，提高代碼的可讀性和可維護性。通過這個注釋生成器，你可以輕松地為函數添加必要的文檔注釋，包括參數、返回值、描述等。這樣，其他開發人員就能更好地理解和使用你的代碼了。

圖片