大家好，我是你們的於小二，今天給大家推薦，做Web開發幾個不錯的VSCode插件。
1. Debugger for chrome
相信我，調試JavaScript不僅僅是寫 console.log() （雖然這種方式應用最多）。Chrome內置了一些功能，可以擁有更好的調試體驗。這個插件能讓你在vs code裏使用所有（或者幾乎所有）這些調試功能。
如果你想了解更多，你可以閱讀：
Debugging JavaScript in Chrome and Visual Studio Code.
2. Javascript (ES6) Code Snippets
我喜歡Snippets插件。我覺得沒有必要反覆輸入同一段代碼。這個插件爲你提供了流行的（ES6）JavaScript代碼片段。
注…如果你沒有用es6javascript特性——趕緊用起來吧！
3. ESLint
是否想編寫更好的代碼？ 是否需要整個團隊使用一致的格式？ 安裝ESLint。 這個插件可以配置爲自動設置代碼格式以及帶有錯誤或警告的“yell（提示）”。 VS Code通過合適的配置，可以向你展示這些提示。
4. Live server
在代碼編輯器中進行更改，切換到瀏覽器，然後刷新以查看更改。 那是開發人員無休止的循環，但是如果你在進行更改時瀏覽器會自動刷新會怎樣呢？ 這就是Live Server的用武之地！
它還在本地服務器上運行你的應用程序。 有些事情只有在服務器裏運行應用程序時才能測試，因此這也是個利好之處。
5. Bracket Pair Colorizor
括號阻止開發人員活着的禍害。 使用大量嵌套代碼，幾乎不可能確定哪些括號彼此匹配。 Bracket Pair Colorizor（如你所料）爲括號匹配顏色，以使代碼更具可讀性。 相信我，你想要！
6. Auto Rename Tag
是否需要重命名HTML中的元素？ 好了，使用“Auto Rename Tag”，你只需要重命名開始或結束標籤，其他標籤將自動重命名。 簡單但有效！
7. Quokka
需要一個快速的地方來測試一些JavaScript嗎？ 我曾經習慣在Chrome中打開控制檯，然後在其中輸入一些代碼，但缺點很多。 Quokka在VS Code中爲你提供了一個JavaScript（和TypeScript）暫存器。 這意味着你可以在自己喜歡的編輯器中測試一段代碼！
8. Path Intellisense
在大型項目中，記住特定的文件名和文件所在的目錄可能會很麻煩。 此插件將爲你提供智能提示。 當你開始在引號中輸入路徑時，你將看到目錄和文件名的智能提示。 這樣可以避免你在文件瀏覽中花費大量時間：)
9. Project Manager
我討厭的一件事是在VS Code中的項目之間切換。 每次我必須打開文件資源管理器並在計算機上找到項目時。 但這隨Project Manager 的應用而改變。 使用此插件，你可以在項目的側邊菜單中打開一個額外的菜單。 你可以在項目之間快速切換，保存收藏夾或從文件系統自動檢測Git項目。
如果你開發多個不同的項目，那麼這是保持組織狀態和提高效率的好方法。
10. Editor Config
Editor Config是少數幾種編碼樣式的標準，在主要文本編輯器/ IDE中都得到支持。 運行方式如下如下。 你將配置文件保存在你的編輯器支持的存儲庫中。 在這種情況下，你必須爲VS Code添加擴展名，以使其遵守這些配置文件。 設置起來超級容易，非常適合團隊項目。
11. Sublime Text Keymap
你是Sublime的狂熱用戶，不願意切換到VS Code嗎？ 通過更改所有快捷方式以匹配Sublime的快捷方式，此擴展程序將使你切換得沒有任何感知。 現在，你有什麼理由不進行切換？
12. Browser Preview
我喜歡 Live Server extension 擴展（上文提到的），但就便利性而言，這個擴展更進一步。它爲您提供了VS Code內部的實時重新加載預覽。 無需再查看瀏覽器即可看到很小的變化！
13. Git Lens
git插件一大堆，但是其中一個功能最強大，最多。 您會得到有關警告的信息，行和文件的歷史記錄，提交搜索等等。 如果你需要有關Git工作流程的幫助，請從這個插件開始！
14. Polacode
你知道你在博客和推特中看到的那些漂亮的代碼截圖嗎？ 好吧，很可能它們來自Polacode。 使用起來超級簡單。 將一段代碼複製到剪貼板，打開擴展名，粘貼代碼，然後單擊保存圖像！
15. Prettier
不要花時間格式化代碼...它做了。 前面，我提到了ESLint，它提供格式化和檢查。 如果你不需要棉絨檢查，那麼選擇Prettier。 它非常容易設置，可以配置爲在保存時自動格式化代碼。
16. Better Comments
此插件對各種類型的註釋進行不同顏色標記，以賦予它們不同的含義，並在其餘代碼中突出。 我一直在用這個來做提示。 很難忽略一個橙色的大提示，告訴我我有一些未完成的工作要做。
還有用於問題，警報和強調的顏色代碼。 你也可以添加自己定義的！
17. Git Link
如果你想在Github中查看正在處理的文件，則這個插件適合你。 安裝後，只需右鍵單擊文件，你將看到在Github中打開文件的選項。 如果你不使用Git Lens插件的話，這個插件對於檢查歷史記錄，分支版本等非常好用。
18. VS Code Icons
你知道可以自定義VS Code中的圖標嗎？ 如果你查看設置，將會看到“文件圖標主題”的選項。 從那裏，你可以從預安裝的圖標中選擇或安裝圖標包。 這個插件爲你提供了一個非常可愛的圖標包，已有1100萬人使用！
19. Material Icon Theme
你是Google Material 設計的粉絲嗎？ 那麼，檢出這個“ Material主題”圖標包。 有數百種不同的圖標，它們看起來很棒！
20. Settings Sync
開發人員（包括我自己）花費大量時間自定義開發環境，尤其是文本編輯器。 使用“Settings Sync”插件，你可以在Github中保存設置。 然後，可以使用一個命令將它們加載到任何新版本的VS Code。
21. Better Align
如果你是那種喜歡代碼中完美對齊的人，那麼你需要Better Align。 你可以對齊多個變量聲明，尾隨註釋，代碼段等。沒有比安裝並嘗試一下更好的辦法來了解這個插件的過人之處了！
22. VIM
你是VIM深度用戶嗎？ 如果是的話，恭喜，你所掌握所有VIM騷操作，可以直接在VS Code中使用它。 我個人並不善於此道，但是我知道使用VIM發揮其潛力時會產生多麼瘋狂的生產力，從而爲你提供更多的功能。
翻譯 | 原文作者：James Quick
原文地址：https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
參考：https://juejin.cn/post/6902399886713421831
最後，照舊安利一波我們的公衆號：「終端研發部」，目前每天都會推薦一篇優質的技術相關的文章，主要分享java相關的技術與面試技巧，我們的目標是： 知道是什麼，爲什麼，打好基礎，做好每一點!這個主創技術公衆號超級值得大家關注。