作者 | 浪裡行舟
來源 | 前端工匠（ID：frontendJS）
VS Code，是一個免費的、開源的跨平臺編輯器,也是我最滿意的編輯器之一。
本文向大家推薦一些我喜歡的VS Code插件，不出意外的話，這些插件將對你的工作效率提升有不小的幫助！
GitLens
VS Code中的 Git 體驗在易用性和完整性之間取得了一個不錯的平衡，大部分用戶都能夠使用它完成工作，同時又不會被太多的功能嚇到。但是很多硬核的 Git 用戶肯定會覺得功能還不夠用。包括但不限於：
不能查看某個 commit 中的代碼改動；
不能比較兩個 commit 或者 branch，然後閱覽代碼改動；
不能查看代碼歷史記錄。
不過 GitLens 這個插件的出現，就彌補上了上述不足。
類似的 Extension：
Git History -- 用來查看 Git log 或則一個文件的 Git 歷史，比較不同的分支，commits
Git Blame - 它允許您在當前選定行的狀態欄中看到 Git Blame 信息。GitLens 也提供了類似的功能。
Git Project Manager --可以一鍵搜索並打開某個的基於 Git 管理的項目
Quokka.js
Quokka.js 是一個用於 JavaScript 和 TypeScript 的實時運行代碼平臺。這意味著它會在你輸入後立即運行您的代碼，並在您的代碼編輯器中顯示各種執行結果。建議你親自嘗試一下。
從上面的動態圖，我們就可以知道 Quokka 是一個調試工具，可以為您正在編寫的代碼提供實時反饋。它能夠預覽變量的函數和計算值結果。
Visual Studio Intellicode
Visual Studio Intellicode 超過 350 萬下載量，是 Visual Studio 上下載次數最多的插件。並且，在我看來，它會是你用過的最有用的插件之一。
這個插件能幫助開發人員生成智能代碼補全提示，並且它內置支持很多種編程語言。
Visual Studio Intellicode 使用機器學習技術，通過學習大量 GitHub 項目的代碼，能找到一些編碼模式，然後在你編程時給予代碼提示。
Debugger for Chrome
如果你想調試 JavaScript 程序，你可以不必離開 VSCode 開發環境。
Debugger for Chrome 這款插件就可以做到這點，它由微軟發佈，允許你在 VSCode 中直接調試網頁源文件，該插件主要利用 Chrome 所開放出來的接口來實現對其渲染的頁面進行調試。
Auto Rename Tag
無論你選擇哪種框架，假如當開始和結束標籤間的代碼有 50 多行時，你想將一個H2標籤更改為H3標籤，或者你想將一個div標籤更改為span標籤，不管要做什麼，你都要浪費時間來查找結束標籤，這時候就該用這個插件-- Auto Rename Tag
這個插件在你修改某一個標籤時會自動匹配結束標籤修改為相應的結束標籤，反之亦然。
SCSS IntelliSense
在 SCSS 中創建變量，這是很棒的體驗。但創建後，你還記得它們嗎？可能大多沒記住。
有了這個插件，你能在應用的任何位置快速獲取你發明的那些 SCSS 變量名。再也不用記住那些名稱，也無需進行文件搜索。
ESLint
ESLint 插件將 ESLint 集成進了 Visual Studio Code 中。如果你還不瞭解這款插件，我簡單說一下，這款插件會靜態分析你的代碼，快速找到代碼中的問題。
ESLint 找到的大部分問題都可以由其自動修復。ESLint 會根據當前文件使用的語法進行自動修復，所以就不會像傳統的“尋找 - 替換”算法那樣產生語法錯誤。
最重要的是，ESLint 是高度可定製化的。
Prettier
對那些想嚴格遵守一組編碼規則格式的開發者來說，Prettier 是相當有用的插件。
並且，它是一個健壯的、固守成規的代碼格式化利器，它可以一鍵美化你的 JavaScript/TypeScript/CSS 代碼。
Vetur
Vetur是一款必備的Vue開發工具。支持多種功能，比如語法高亮、錯誤檢測、Emmet和Snippet等等。
Code Runner
時至今日，Code Runner已經有了超過300萬的下載量，代碼一鍵運行，支持超過40種語言。
安裝好Code Runner之後，打開你所要運行的文件，有多種方式來快捷地運行你的代碼：
在編輯區，右鍵選擇 Run Code
鍵盤快捷鍵 Ctrl+Alt+N
快捷鍵 F1 調出 命令面板, 然後輸入 Run Code
在左側的文件管理器，右鍵選擇 Run Code
右上角的運行小三角按鈕
Path Intellisense
Path Intellisense 可以快速提高你的開發效率。如果你同時開發多個項目，並使用很多不同的技術，你肯定想要一個方便的工具，它能幫你記住文件路徑。
這款插件就能為你節省很多這方面的時間，幫你省去找到正確文件路徑的時間。
Color Picker
在書寫 HTML 和 CSS 的時候，你可能經常需要修改元素的顏色。VS Code 為修改顏色，提供了一個圖形化的界面，其中包含了顏色相關的屬性。
當你打開一段 HTML 或者 CSS 代碼時，你可以看到，VS Code 在顏色的前面畫了一個方塊（即顏色裝飾器 Color Decorator），用於展示這段顏色屬性所對應的最終效果。然後你把鼠標移動到這段代碼上時，一個顏色選擇器窗口就顯示出來了，根據你需要來調整顏色。
參考：
30個極大提高開發效率的Visual Studio Code插件
這就是我想要的 VSCode 插件！
26 Miraculous VS Code Tools for JavaScript Developers in 2019
10 Extremely Helpful Visual Studio Code Plugins for Programmers
讓開發效率“飛起”的 5 個 VS Code 插件
☞中科院回應木蘭語言造假：當事人已停職；中國軟件業務收入百強：華為蟬聯十八冠；Ionic 5.0.0-beta.5 發佈|極客頭條
☞15 年老程序員自述：8 個影響我職業生涯的重要技能
☞上海正在奪回互聯網 “失落的十年”
☞悲痛！臨近年關，一位 IT 創業者自殺，曾賣房給員工發工資
閱讀更多 CSDN 的文章
