VSCode 前端開發必裝10套件 / 工具

平常開發時都會習慣搜尋一些好用套件或是輔助工具來使用,一方面可以提升coding效率,有些工具甚至可以防呆、提升程式碼品質,常常會推薦同事一起安裝,今天就整理一下我認為好用的VSCode套件們吧!

1.Chinese

不習慣使用英文介面的VSCode先裝這個讓他變中文吧!

2.Bracket Pair Colorizer

主要可以幫助你迅速找到結尾符號,避免誤刪必要符號!

3.Code Spell Checker

噢!這個太重要了,自從安裝了這個套件再也沒有拼錯字的問題,而且順便揪出了許多以前拼錯的字,雖然說錯字的變數或函式並不影響程式執行,但是看到錯字連篇的code真的沒辦法坐視不管,已要求co-work 的同事都要安裝此套件。

4.indent-rainbow

讓每一格的縮排都有不同的顏色,同樣是輔助閱讀避免縮排問題的工具!看起來視覺效果也很不錯。

5.Material Icon Theme

讓資料夾Icon變成Material風格

6.One Dark Pro

個人目前使用的 coding 主題,顏色及對比都蠻喜歡的,閱讀起來也舒服。

7.Prettier

目前用的最習慣的formatter工具,支援多種語言。co-work最害怕的就是大家的coding style不統一,每次format 排版後git 總是一堆排版異動真的很困擾。統一大家的coding style 真的很重要。

8.Pug vue beautify

針對vue專案中的pug排版,不過幫助有限,幫忙統一縮排、移除多餘div tag等等,主要是用在複製不同的縮排時,可以幫忙統一,避免編譯出錯。

9.GitLens

非常好用的git 輔助工具,一秒揪出該行程式碼是誰commit的,追查git log也很方便。

10.Todo Tree

開發時總會遇到 註解 Todo 給 team member 或給自己之後看,Todo tree 會幫你整理出來也方便與同事溝通用。

以上是目前我覺得裝了在開發上不僅可提高效率甚至有些套件可以減少出錯,善用工具可以幫我們省下不少成本,還有很多套件我仍在試用中,例如:可以同步每台電腦VSCode的套件的工具等。若好用後續再慢慢補上。

發佈留言