VSCode插件大全｜VSCode高級玩家之第二篇

上一篇文章《VSCode經常使用快捷鍵大全》，咱們瞭解到了VSCode中的經常使用快捷鍵。學會了快捷鍵可讓咱們更高效和迅速的編寫代碼。可是沒有IDE中的一些輔助功能，仍是美中不足。

VSCode沒有安裝插件，就等同於一把槍沒有安裝配件，打把的時候仍是缺失精準度，開槍的時候也會有很重的後坐力。固然沒有插件，也能夠很好的編寫代碼，就是沒有那麼強而已。

因此這篇文章會給你們介紹VSCode中最經常使用的插件，讓咱們的編輯器加上一雙翅膀，讓咱們在編寫代碼的過程當中如虎添翼的感受。

🌟全部插件，只要搜索插件名就能找到哦！

「一」國人必備集合

這些插件都是咱們做爲中國人必備的，媽媽不再怕咱們看不懂英文了。

VSCode中文簡體包

插件名：Chinese (Simplified) Language Pack for Visual Studio Code

這個插件一鍵把整個VSCode的文字轉換成中文。一個全中文化的IDE是咱們特別須要的。並且這個是官方漢化包，理解無障礙。

代碼翻譯

插件名：翻譯(英漢詞典)

英語不是很好的童鞋，在寫代碼的時候常常會使用「某道翻譯」，可是其實對於代碼來講，不少時候咱們會用駝峯、小駝峯、下劃線等等寫法來寫變量名、屬性名、類名和方法名的。這種寫法想使用「某道翻譯」在編輯器中懸浮翻譯就是不可能了。

找了好久我爲你們找到一個很是好用的一個插件能夠解決這個問題！

本地77萬詞條英漢詞典，不依賴任何在線翻譯API，無查詢次數限制。可翻譯駝峯和下劃線命名，及對整個文件中的標識符批量翻譯。

檢測代碼英文單詞錯誤

插件名：Code Spell Checker

一個基本的拼寫檢查器，能夠檢測駝峯寫法。這個拼寫檢查程序的目標是幫助捕獲常見的拼寫錯誤。在編寫代碼的時候，咱們都是用英文單詞，不少時候咱們都會寫錯單詞的可能性。用錯了單詞其實對於維護性是有必定的影響的。

使用有意義的單詞作爲方法名、類名和變量名會給本身代碼更多的意義和含義。當本身或者別人去查看代碼時更容易懂其中的用意。可是若是咱們拼錯了單詞，有些時候就沒法理解這個單詞是什麼意思了。

因此這個插件對咱們來講很是實用，就算是老外都很是多人在使用它。（目前有100多萬下載量）

「二」主題集合

一個程序員一天8-12個小時都是看着編輯器和代碼。若是咱們的編輯器很差看，沒有必定的美觀和吸引力，怎麼可能耐看不厭呢？加上長期看代碼，一個舒服的主題天然是必備之一。

這裏介紹幾款我最喜歡的主題給你們使用。有更多你們喜歡的主題歡迎在評論中提出，我會補充到這裏哦！

Dracula Theme

主題名：Dracula Official

這款主題主調色是偏深紫色，我用了這個主題至少也有2-3年，一直都很喜歡。裏面代碼的高亮和顏色都很細緻，很適合長期看。這個主題的顏色有根據不一樣的語言作了適配，不管咱們是在開發什麼語言都很是好看。

Material Theme

主題名：Material Theme

這款也是很是出名的主題，在很是多的IDE/編輯器都有。用習慣這個主題的能夠在VSCode中安裝使用。使用量也是有200多萬+。這款主題在我使用SublimeText的時候很是熱愛。（也用了好幾年）

Nebula Theme

主題名：Nebula Theme

這一款是我如今在用的小衆主題。配色與Dracula很是類似，可是有更多的亮色，顏色的變化幅度也沒有那麼大，相比Dracula更爲順眼。固然這個也要看我的喜愛哈。

Atom One Dark Theme

主題名：Atom One Dark Theme

我認識的一些小夥伴用過Atom，也有這麼一部分小夥伴特別喜歡這個主題。

One Monokai Theme

主題名：One Monokai Theme

對長期使用SublimeText的Monokai的童鞋們，對這款主題應該感興趣。畢竟Monokai主題陪伴了咱們挺長一段時間的。（很差了要暴露年齡了😂）

在這裏插入圖片描述

GitHub Plus Theme

主題名：GitHub Plus Theme

對終於有一個白色的主題了，可是我的對白色的主題不怎麼感冒。最近連微信都加入了黑暗世界，因此我已經習慣全部UI都是黑暗模式了。可是畢竟仍是有童鞋特別喜好白色的。

這裏推薦一款與GitHub同樣色系的白色主題（我能夠說是我惟一能夠考慮使用白色的一款，有童鞋有本身喜歡的白色主題能夠在評論中留言給我哦！）

🌟小總結 VSCode中還有很是多的主題能夠選擇，若是我推薦的主題中沒有大家喜歡的，能夠在插件搜索框中輸入theme，就會出來不少的主題供你們自由選擇哦！

在這裏插入圖片描述

「三」圖標主題集合

安裝了編輯器主題，不安裝圖標主題就等同於 💐鮮花插在了 💩牛糞上。這裏推薦兩款我本身使用過的圖標主題。

Material Icon Theme

主題名：Material Icon Theme

佔了大部分人都是用這個圖標主題，內含很是齊全的圖標，基本你能想到的文件都在內了。很是推薦使用！

VSCode Icons

主題名：vscode-icons

這一款是VSCode官方的圖標主題包，有超過500萬+下載量。能夠說是和Material Icon同樣佔了另一大部分人在使用的一款主題。看我的喜愛選擇使用。我的以爲兩款最大的區別在於文件夾。可是以爲Material Icon作的圖標相對更加協調一些。

「四」實用插件集合

這裏給小夥伴們介紹一些在其餘IDE都有可能用過的超級實用插件和功能。這些插件主要是強化編輯器的功能，讓咱們在開發過程當中獲得很是大的幫助。

代碼書籤

插件名：Bookmarks

它是代碼中導航，在重要位置之間輕鬆快速地移動。再也不須要搜索代碼。它還支持一組選擇命令，容許咱們選擇書籤行和書籤行之間的區域。它對於日誌文件分析很是有用。

如下是書籤提供的一些功能:

• 在代碼中標記/取消標記位置
• 在代碼中標記位置並給出名稱
• 在書籤之間來回跳轉
• 查看一個文件中全部書籤的列表
• 查看項目中全部書籤的列表
• 專用側杆
• 帶有書籤的行
• 選擇書籤之間的區域

這裏附上我常用的幾個這個插件的命令：

• Bookmarks: List 列出當前文件中的全部書籤
• Bookmarks: List from All Files 列出當前項目下全部書籤
• Bookmarks: Clear 刪除當前文件中的全部書籤
• Bookmarks: Clear from All Files 刪除當前項目下的全部書籤

咱們還能夠經過打開側邊欄中的書籤tab查看全部標籤：

括號對彩色化

插件名：Bracket Pair Colorizer 2

這個擴展使用顏色來標識匹配的括號。用戶能夠定義要如何匹配，以及要使用哪些顏色。在代碼量比較多的狀況下，括號也會變得很是的多，有了顏色的標識會給開發者帶來更好的識別能力。

加強Git功能

插件名：GitLens

加強VSCode中內置的Git功能——經過Git blame註釋和代碼透鏡，一眼就能看到代碼做者的身份，無縫導航和探索Git存儲庫，經過強大的比較命令得到有價值的看法，等等。使用Git代碼管理的開發者們，這個是一個必裝插件之一！

Git歷史記錄

插件名：Git History

對於一些開發者習慣使用編輯器中的Git管理工具的，不太喜歡要打開另一個Git UI工具的同窗，這一款插件知足你查詢全部Git記錄的需求。

• 查看和搜索git日誌中的圖形和詳細信息。
• 查看文件之前的副本。
• 查看和搜索歷史
• 比較分支/提交記錄/文件
• 更多～

實時協做編輯

插件名：Live Share

Visual Studio Live Share容許咱們與他人實時協做編輯和調試，無論咱們使用的是哪一種編程語言或正在構建的應用程序類型。它容許咱們當即(而且安全地)共享咱們當前的項目，而後根據須要共享調試會話、終端實例、本地主機web應用程序、語音呼叫等等！加入咱們的會話的開發人員從咱們的環境中接收全部的編輯器上下文(例如，語言服務、調試)，這確保了他們能夠當即開始有效地協做，而不須要克隆任何代碼或安裝任何sdk。

此外，與傳統的結對編程不一樣，Visual Studio Live Share容許開發人員一塊兒工做，同時保留他們的我的編輯器首選項(例如主題、鍵綁定)，以及擁有本身的遊標。這容許咱們在跟隨他人和本身探索想法/任務之間無縫過渡。在實踐中，這種協做和獨立工做的能力爲許多常見用例提供了一種更天然的協做體驗。

要使用這個協同軟件，首先咱們須要登錄（推薦使用GitHub登錄）。登錄後點擊下方的Live Share:

而後編輯器就會彈出如下提示，具體意思就是說，咱們的實時共享會話已經開啓，邀請鏈接已經被複制，能夠發給你的協助開發者。

這個時候咱們能夠把鏈接發給咱們的協助者，這裏對方必須安裝了Live Share的插件而且必須是登錄狀態。

這個時候對方只須要點擊側邊欄的Live Share圖標，而後在會話詳細信息中找到而且點擊加入協做會話...。

點擊後編輯器上方會出現一個輸入框，對方只須要輸入咱們提供的邀請鏈接而後按回車便可。

協助完畢後，咱們能夠點擊下方的圖中的圖標 點擊圖標後，上方會出現一個選擇彈窗，選擇Stop Collaboration Session就能夠中止協助會話了。

路徑智能提示

插件名：Path Intellisense

加入此插件讓咱們在應用文件（例如圖片）時，有智能的路徑提示。

「五」前端開發插件集合

這裏提供給各位童鞋世上最全的前端開發插件集合，沒有「之一」。（固然要作到最強還須要你們給我多提意見，歡迎小夥伴們給我補充一些我也尚未使用過的實用前端插件哦！能夠在評論區留言哈！）

程序員最好的朋友無非就是編輯器中的插件，有插件和沒有使用插件在開發中簡直就是天差地別。這裏讓我想到本身一開始學習編程的時候，使用notepad++，一行一行代碼純手敲的經歷。如今有了各式各樣的IDE，估計已經差很少沒有人還在用文本編輯器手敲代碼了。

自動關閉標籤

插件名：Auto Close Tag

自動添加HTML/XML關閉標籤，與Visual Studio IDE或SublimeText相同。當咱們填寫了開始標籤，結束標籤就會被自動加上。這個很是實用，減小不少咱們寫html和xml的時間。

若是是使用SublimeText過來的或者習慣SublimeText的童鞋，能夠開啓Sublime Text 3模式，在settings.json文件裏面加入這個配置：

{
   "auto-close-tag.SublimeText3Mode": true
}
複製代碼

自動同步標籤名

插件名：Auto Rename Tag

自動重命名成對的HTML/XML標記，與Visual Studio IDE相同。用這個插件能夠告別每次改變標籤的時候要重複修改頭部和尾部標籤。特別是標籤內內容很是多的時候，要改確實很費勁的。

CSS顏色高亮

插件名：Color Highlight

這個插件會對頁面上全部的CSS/web的顏色編碼進行高亮，高亮的顏色就是編碼對應的顏色。在寫CSS的時候很是實用。

高亮匹對標籤

插件名：VSCode Highlight Matching Tag

此插件高亮顯示匹對的開始和/或結束標籤。還能夠在狀態欄中顯示標籤的路徑。這個插件將嘗試在任何地方匹配標記: 從標記屬性、字符串內部、任何文件，同時還提供普遍的樣式選項來定製標記的高亮顯示方式。

官方支持的標籤: HTML和JSX。其餘風格 (XML、Vue、Angular、PHP) 也能夠。

HTML CSS 支持

插件名：HTML CSS Support

補充了VSCode中缺乏的CSS支持。類屬性補全、ID屬性補全和全文件搜索CSS和SCSS提示等。

小程序支持

插件名：minapp-vscode

微信小程序標籤、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，並提供 snippets）

Vue支持

插件名：Vetur

開發Vue的童鞋必裝插件之一。支持標籤、屬性的智能補全等等。

常常用Vue開發的童鞋，我這個裏另外推薦一個插件給大家。就是Vue 2 Snippets，這個插件加入了Vue2的代碼塊，讓咱們開發的過程當中能夠快速生成Vue2的代模版。

在這裏插入圖片描述

React支持

插件名：ES7 React/Redux/GraphQL/React-Native snippets

這個擴展爲你提供了JavaScript和ES7中的React/Redux代碼片斷，以及VSCode的Babel插件特性。編寫React的童鞋，這個插件是必備之一。

NPM支持

插件名：npm

這個擴展支持運行包中定義的npm腳本。並根據包中定義的依賴項驗證已安裝的模塊。最喜歡這個插件的功能就是能夠自動檢測依賴是否安裝，還能夠提示依賴的版本和具體項目地址。使用npm的童鞋必備插件之一。

NPM智能提示

插件名：npm Intellisense

加入此插件可讓咱們在編寫JavaScript的時候有npm依賴包的提示。特別是引用的過程當中會有豐富的提示。

強大的代碼格式化

插件名：Prettier - Code formatter

Prettier是一個代碼格式化程序。它經過解析代碼並使用它本身的規則從新打印代碼來強制實現一致的樣式，這些規則考慮到最大行長度，在必要時包裝代碼。

在一個多人協同開發的團隊中，統一的代碼編寫規範很是重要。一套規範可讓咱們編寫的代碼達到一致的風格，提升代碼的可讀性和統一性。天然維護性也會有所提升。

🌟小技巧 咱們能夠經過在settings.json中強制讓一些特定語言用這個格式化工具。在settings.json中添加如下配置。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
複製代碼

🌟小技巧 我的還建議設置編輯器在保存時自動格式化。在settings.json中添加如下配置。

// 全局配置
"editor.formatOnSave": false,
// 按語言配置
"[javascript]": {
    "editor.formatOnSave": true
}
複製代碼

編輯器中的實時預覽

插件名：Browser Preview

VSCode的瀏覽器預覽插件讓咱們可以在編輯器中打開一個能夠真正的瀏覽器預覽。瀏覽器預覽是由Chrome Headless提供的，它的工做原理是在一個新進程中啓動一個Headless Chrome實例。提供了一種安全的方法在VSCode中呈現web內容，並支持一些有趣的特性，如編輯器內調試等! 不再用在瀏覽器和編輯器中來回切換而以爲麻煩了！

在這裏插入圖片描述

這個插件須要另一個插件的支持Debugger for Chrome，安裝了這個插件後只要按下面配置格式配置便可（配置要根據咱們的項目而定，須要微小的修改一下）

{
    "version": "0.1.0",
    "configurations": [
        {
            "type": "browser-preview",
            "request": "attach",
            "name": "Browser Preview: Attach"
        },
        {
            "type": "browser-preview",
            "request": "launch",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:3000" // 把這裏改成你本地項目的地址
        }
    ]
}
複製代碼

實時預覽

插件名：Live Server

若是咱們是在作一個靜態頁排版，這個插件能夠提供給咱們一個本地實時預覽服務器，預覽會在谷歌瀏覽器打開。相對於上面講到的插件來講，這個比較輕量級。

瀏覽器打開

插件名：open in browser

在開發本地文件的時候，能夠安裝這個插件，而後用默認瀏覽器打開。固然能夠設置咱們喜好的瀏覽器打開哦。

「六」PHP開發插件

VSCode做爲前端開發編輯器確實很強大了，可是這個編輯器不只限於前端，做爲一個後端編輯器也不差於其餘IDE不少。

我有很長一段時間一直使用PHPStorm，可是發現用再高配置的電腦仍是逃不過這些重量級IDE對電腦的CPU和內存的無限吞噬。

隨着幾款輕量級編輯器的發展，包括SublimeText、Atom和VSCode。這些輕量級的編輯器加上活躍的插件開發社區，不少在IDE裏面擁有的功能在輕量級的編輯器中均可以擁有了。因此最後我又迴歸到了輕量級編輯器中。

最後我開始研究怎麼用VSCode做爲PHP開發的IDE。這裏分享一些很是實用的PHP開發用的VSCode必裝插件集合：

PHP強化插件

插件名：PHP Intelephense

PHP Intelephense是一個高性能的PHP語言服務器，它爲高效的PHP開發提供了大量的基本特性。安裝了這個插件基本擁有了70-80%重量級IDE的輔助功能。

它的功能包含如下：

• 快速駝峯/下劃線大小寫 代碼完成(智能感知)。提供文檔、項目和內置符號和關鍵字的詳細提示。自動添加使用聲明。
• 項目和內置的構造函數，方法和函數都有詳細 簽名(參數)幫助輔助。
• 快速項目中的 跳轉定義支持。
• 項目內 查找全部引用。
• 項目內快速搜索「駝峯/下劃線」的符號
• 完整 文檔符號搜索，也支持 breadcrumb 和outline UI。
• 經過一個容錯解析器和強大的靜態分析引擎 診斷打開的文件。
• 兼容PSR-12 文檔/範圍格式。格式化也適用於HTML/PHP/JS/CSS文件。
• HTML請求轉發到HTML語言服務器完成 HTML/JS/CSS/PHP代碼智能提示。
• 鼠標懸停顯示詳細連接到官方PHP文檔。
• 智能 高亮參考資料和關鍵字。
• 讀取 PHPStorm metadata以得到更高級的類型分析和提示。
• 智能 重命名符號。在適當的時候，文件/文件夾也會自動重命名。(高級版)(https://intelephense.com)
• 能精確的 摺疊代碼定義，塊，使用聲明，heredoc，註釋，和自定義區域。(高級版)(https://intelephense.com)
• 快速 找到和跳轉接口和抽象類以及相關方法。(高級版)(https://intelephense.com)
• 快速 轉到類型定義的變量和參數。(高級版)(https://intelephense.com)
• 快速 去聲明實現接口或抽象方法聲明的方法。(高級版)(https://intelephense.com)
• 可配置 自動phpdoc建立，推斷返回類型並識別拋出的異常。(高級版)(https://intelephense.com)

提到的高級版功能須要另外購買，能夠到https://intelephense.com實用支付寶購買。一次性購買價格是70元人名幣（我的以爲相比其餘IDE是年費的，這個仍是很划算的）。

這個插件基本上全部其餘IDE又的功能它都給你提供了，有了這個插件咱們的VSCode瞬間編程了一個全能的IDE編輯器。重點它仍是比較輕量級的。

PHP規範檢測

插件名：phpcs

這個linter插件爲Visual Studio代碼提供了一個到phpc的接口。它將與具備「PHP」語言模式的文件一塊兒使用。

若是小夥伴們一直都有用linter，那這個插件裝上，能夠配合咱們項目中的phpCS設置的linter一塊兒用，就能夠自動格式化代碼或者在VSCode中也會提示格式錯誤了。

「七」Java開發插件

我的沒有作過多的JAVA開發，因此也沒有深刻研究，可是VSCode也有不少Java開發者在使用。因此也有對應的支持。

用來支持Java的插件有好幾個，可是官方有作了一個Java插件全家桶，一鍵安裝好全部Java支持的插件。

插件名：Java Extension Pack

Java Extension Pack (Java插件全家桶) 是一組流行的插件，能夠幫助在Visual Studio Code中編寫、測試和調試Java應用程序。

這個全家桶包含了如下插件：

• 📦 Java 語言支持（Red Hat 提供）

  • 代碼導航
  • 自動完成
  • 重構
  • 代碼片斷
• 📦 Java 調試器
• 📦 Java測試運行器

  • 項目腳手架
  • 自定義目標
• 📦 Java依賴查看器

  • 查看Java項目、引用庫、資源文件、包、類和類成員
• Visual Studio IntelliCode

  • 開發輔助
  • 完整的代碼填充

其餘語言支持

使用VSCode開發其餘語言也是徹底能夠的，只要在插件搜索欄輸入咱們想用的語言，就能夠找到那個語言的相關插件和支持。

「待續」總結

對於一個個性化的編輯器，一箱好用的插件是必備的，沒有插件的VSCode就等於沒有了靈魂。這文章介紹了一大箱不一樣分類的超級實用、好用和經常使用的插件。

可是這麼多插件，一個一個安裝，是否是想一想都想放棄？還有一部分童鞋會說「IDE的插件基本上都是安裝好的，這個太麻煩了」。說實話確實很麻煩，特別是公司一臺電腦，家裏又一臺手提電腦，兩臺電腦都須要安裝這些插件，想一想都崩潰了。

固然每個問題都有解決辦法，VSCode也有插件專門解決這種問題。VSCode的Setting Syn能夠幫助咱們同步本身的插件，編輯器配置和自定義快捷鍵。讓咱們在新的環境或者電腦上，立刻拉取以往的全部配置，不再須要一個一個從新配置。

下一篇文章我會詳細講說怎麼配置和怎麼使用配置同步插件。敬請期待哦！

好文推薦

• 🔥 《VSCode經常使用快捷鍵大全｜VSCode高級玩家寶典之第一篇》 --- 因此對於個好的程序員，一個好的代碼編輯器能夠起到很大的做用，在開發的過程當中能夠給咱們帶來不少便利、幫助、效率和影響。甚至一個好的編輯器能夠給開發者平常編程中帶來更高的喜悅感。
• 🔥 《前端必看的8個HTML+CSS技巧》 --- CSS是一個很獨特的語言。看起來很是簡單，可是某種特殊效果看似簡單，實現起來就很有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，從新燃起對前端排版和特效的熱愛和熱情！🔥
• 🔥 《寫給想學和在學編程的大家，學習編程的7個好處》 --- 其實選擇學編程是能改變人生的。可能起初不少人學編程，報了一個編程培訓班，爲了就是能拿到更高的工資或者有更好的工做環境。最後堅持着堅持着，最後會發現編程還會給咱們帶來不少我的能力和技能上的提高。
• 🔥 《5大法則助你 成爲更出色的開發者》 --- 這篇文章傳授5大法則助咱們成爲更出色的開發者，在衆多開發者中脫穎而出的訣竅，也會在咱們的技術職業生涯中給咱們不少的幫助。

本文使用 mdnice 排版