03.04 10款VS Code插件神器,第7款超級實用

VS Code是這兩年非常熱門的一款IDE,它不僅有提升開發體驗的界面、輕量化的編輯器,還有豐富而強大的插件,這些優秀的插件使得VS Code生態體系更加吸引人,讓開發效率大大提升。本文來介紹5款高效的VS Code插件,總有一款能夠驚豔到你。

前言

我此前寫過一篇有關VS Code的文章:我最終還是選擇了VS code!,沒想到在公眾號和知乎受到很多同學的喜歡,也被多個公眾號先後轉載。

看來,現在VS Code的確是一款非常熱門、有強大用戶基礎的一款開發工具,因此,本文就來介紹5款高效、好用的插件,能夠讓原本單薄的VS Code如虎添翼,開發效率頓時提升到一個新的階段。

1. CodeIf

安裝次數:2萬+

10款VS Code插件神器,第7款超級實用

在計算機科學中只有兩件難事:緩存失效和命名。

我對這句話深有同感,當開發項目時,命名一直都是一種讓我痛苦的事情。我想,應該不止我一個人有這樣的感覺。

可是,命名又是開發過程中一項非常重要的事情,例如,一個好的函數命名,能夠讓你瞬間明白它實現的功能,這樣就節省了很大一部分時間琢磨一段代碼到底是什麼含義。

所以,每當開發過程中遇到要命名的變量、函數、類時我就不得不停下開發,苦思冥想半天。

10款VS Code插件神器,第7款超級實用

但是,CodeIf的出現讓這個問題迎刃而解,它通過搜索GitHub, Bitbucket, GitLab來找到真實的使用變量名,為你提供一些高頻使用的詞彙,同時為你標明使用的語言、代碼鏈接。

可以直接在網頁上搜索要命令的詞彙,當然,它不僅有網頁版,也支持VS Code, Atom, Sublime, WebStorm等開發工具。

在VS Code中,Extensions->搜索“CodeIf”即可完成安裝。

10款VS Code插件神器,第7款超級實用

使用時只需要選中變量名,然後右鍵選擇CodeIf就可以跳轉到網頁,顯示候選命名。

2. local history

安裝次數:14萬+

修改代碼之後想找回歷史代碼怎麼辦?

在使用Pycharm、IDEA時可以直接查看本地歷史代碼,然後輕鬆恢復之前某個版本。但是,VS Code默認是不支持local history的,所以,僅憑Ctrl+z撤銷操作時不行的。何況,撤銷操作是把前面步驟所有的操作都撤銷了,其中有很多是我們不需要的。

10款VS Code插件神器,第7款超級實用

但是,為VS Code配合上local history,所有問問題就迎刃而解了。

安裝這款插件之後在側邊欄會出現LOCAL HISTORY的字樣,每當我們保存更改時,它都會備份一份歷史文件,當我們需要恢復之前版本時,只需要點擊一下對應的文件即可。此外,它還會在編輯框顯示對比詳情,能夠讓你對修改位置一目瞭然。

3. Partial Diff

安裝次數:19萬+

文件比較是一種即常用有實用的一項功能,例如,我們想查看哪裡修改了代碼、查看輸出的日誌信息有什麼區別等等,如果用肉眼逐個詞的去分辨,顯然是無法承受的。

提起文件比較,我首先想到的就是Beyond Compare,這是一款好用的工具,但是,僅憑收費這一點就把很多人拒之門外了。

10款VS Code插件神器,第7款超級實用

還好,VS Code插件庫裡有Partial Diff這款神奇的插件,選中一代碼,右鍵Select Text for Compare,選中另外一部分代碼,右鍵Compare Text with Previous Selection即可。

4. TODO Tree

安裝次數:40萬+

我在此前多篇文章中提到過,習慣使用TODO、FIXME標籤是一個非常好的習慣。

當我們發現某塊代碼需要修改,或者某塊代碼需要以後進一步完善,如果能夠給它做一個標記,那麼後續定位到對應位置是一件非常輕鬆高效的事情。

關於TODO標籤,很多作者都推薦過TODO Highlight這款插件,但是,我更加推薦使用TODO Tree

10款VS Code插件神器,第7款超級實用

雖然很多標籤工具能夠實現TODO標籤高亮,但問題是“我們怎麼快速定位到對應的標籤?”逐個的打開文件去尋找顯然是很麻煩的,效率並沒有得到太大的提升。

TODO Tree則不同,它不僅可以實現標籤高亮,還可以在活動欄添加一個選項卡,它能夠以不同視圖展示我們標記的位置,單擊對應標籤就能夠快速定位到指定位置。

5. vscode-icons

安裝次數:466萬+

一個好的編輯界面能夠讓開發過程心情舒暢,甚至可以提升開發效率。

顯然,VS Code默認的圖標是達不到這種程度的。

10款VS Code插件神器,第7款超級實用

但是,配合vscode-icons這款插件就不同了,它具有以下特性,

  • 自定義圖標
  • 自動檢測項目
  • 自定義配置

它不僅能夠給文件夾、文件添加上舒適的圖標,而且可以自動檢測項目,根據項目不同功能配上不同圖標,例如,git、Markdown、配置項、工具類等等。

6. Better Comments

安裝次數:66萬+

10款VS Code插件神器,第7款超級實用

是不是覺得註釋信息千篇一律?

Better Comments這款插件可以讓VS Code註釋信息更加人性化。

它可以根據告警、查詢、TODO、高亮等標記對註釋進行不同的展示。此外,還可以對註釋掉的代碼進行樣式設置。

您想要的任何其他註釋樣式都可以在設置中指定

7. Bracket Pair Colorizer

安裝次數:250萬

10款VS Code插件神器,第7款超級實用

當你看到上述示例中這樣包含多層嵌套的括號時,是不是覺得很凌亂?至少,我是這樣的,每當看到這樣複雜嵌套括號時,尤其代碼行數多起來以後,就很難確定哪些是處於同一層次的。不弄明白層次結構,當然閱讀代碼也會麻煩很多。

Bracket Pair Colorizer這款插件可以給()、[]、{}這些常用括號顯示不同顏色,當點擊對應括號時能夠用線段直接鏈接到一起,讓層次結構一目瞭然。除此之外,它還支持用戶自定義符號。

10款VS Code插件神器,第7款超級實用

這款神器的確解決了我的痛點。

8. Better Align

安裝次數:10萬+

整潔的代碼,是一個優秀程序員必須要做到的。當我們閱讀那些大型公司開源的代碼時,會發現,它的設計模式、它的編程規範都讓人讚歎不已。

Better Align就是這樣一款能夠實現代碼規範的工具,它主要用於代碼的上下對齊

它能夠用冒號(:)、賦值(=,+=,-=,*=,/=)和箭頭(=>)對齊代碼。

10款VS Code插件神器,第7款超級實用

使用方法:Ctrl+Shift+p輸入“Align”確認即可。

9. change-case

安裝次數:24萬+

標識符和命名規則是學習一門語言最基本,也是必須要了解的一項。

不同語言對變量名、函數名、類名的命名要求不同,有的是駝峰、有的是下劃線...但是,不管是什麼要求,都有一個共性--命名很重要

有些編程語言甚至對命名嚴格到如果不按規範要求,執行時會直接報錯。

change-case就是一款快速修改當前選定內容或當前單詞的命名的插件。

10款VS Code插件神器,第7款超級實用

使用方法:Ctrl+Shift+p輸入“change”然後選擇要修改的格式即可。

10. Markdown All in One

安裝次數:119萬+

10款VS Code插件神器,第7款超級實用

Markdown對於開發者而言,應該是一種常用的文檔書寫方式,雖然我在獨立Markdown文檔書寫時習慣於使用Typora,但是對於開發過程中涉及到的API接口文檔、README,我還是習慣於使用VS Code。

Markdown All in One這款插件可以實現媲美Typora的Markdown編輯體驗,它具備如下特性,

  • 豐富的快捷鍵
  • TOC標籤
  • 數學公式
  • 自動完成
  • 列表編輯
  • 輸出HTML同時轉PDF
  • Github風格文檔
  • ......

這款插件真正做到了All in One


分享到:


相關文章: