大家好体箕，我是你們的于小二专钉，今天給大家推薦，做Web開(kāi)發(fā)幾個(gè)不錯(cuò)的VSCode插件累铅。
1. Debugger for chrome
相信我跃须，調(diào)試JavaScript不僅僅是寫(xiě) console.log() （雖然這種方式應(yīng)用最多）。Chrome內(nèi)置了一些功能娃兽，可以擁有更好的調(diào)試體驗(yàn)菇民。這個(gè)插件能讓你在vs code里使用所有（或者幾乎所有）這些調(diào)試功能。
如果你想了解更多投储，你可以閱讀：
Debugging JavaScript in Chrome and Visual Studio Code.
2. Javascript (ES6) Code Snippets
我喜歡Snippets插件第练。我覺(jué)得沒(méi)有必要反復(fù)輸入同一段代碼。這個(gè)插件為你提供了流行的（ES6）JavaScript代碼片段玛荞。
注…如果你沒(méi)有用es6javascript特性——趕緊用起來(lái)吧娇掏！
3. ESLint
是否想編寫(xiě)更好的代碼？ 是否需要整個(gè)團(tuán)隊(duì)使用一致的格式冲泥？ 安裝ESLint驹碍。 這個(gè)插件可以配置為自動(dòng)設(shè)置代碼格式以及帶有錯(cuò)誤或警告的“yell（提示）”壁涎。 VS Code通過(guò)合適的配置凡恍，可以向你展示這些提示。
4. Live server
在代碼編輯器中進(jìn)行更改怔球，切換到瀏覽器嚼酝，然后刷新以查看更改。 那是開(kāi)發(fā)人員無(wú)休止的循環(huán)竟坛，但是如果你在進(jìn)行更改時(shí)瀏覽器會(huì)自動(dòng)刷新會(huì)怎樣呢闽巩？ 這就是Live Server的用武之地！
它還在本地服務(wù)器上運(yùn)行你的應(yīng)用程序担汤。 有些事情只有在服務(wù)器里運(yùn)行應(yīng)用程序時(shí)才能測(cè)試涎跨，因此這也是個(gè)利好之處。
5. Bracket Pair Colorizor
括號(hào)阻止開(kāi)發(fā)人員活著的禍害崭歧。 使用大量嵌套代碼隅很，幾乎不可能確定哪些括號(hào)彼此匹配。 Bracket Pair Colorizor（如你所料）為括號(hào)匹配顏色率碾，以使代碼更具可讀性叔营。 相信我模孩，你想要本辐！
6. Auto Rename Tag
是否需要重命名HTML中的元素？ 好了，使用“Auto Rename Tag”永淌，你只需要重命名開(kāi)始或結(jié)束標(biāo)簽，其他標(biāo)簽將自動(dòng)重命名甜橱。 簡(jiǎn)單但有效寂诱！
7. Quokka
需要一個(gè)快速的地方來(lái)測(cè)試一些JavaScript嗎？ 我曾經(jīng)習(xí)慣在Chrome中打開(kāi)控制臺(tái)谭羔，然后在其中輸入一些代碼矮湘，但缺點(diǎn)很多。 Quokka在VS Code中為你提供了一個(gè)JavaScript（和TypeScript）暫存器口糕。 這意味著你可以在自己喜歡的編輯器中測(cè)試一段代碼缅阳！
8. Path Intellisense
在大型項(xiàng)目中，記住特定的文件名和文件所在的目錄可能會(huì)很麻煩景描。 此插件將為你提供智能提示十办。 當(dāng)你開(kāi)始在引號(hào)中輸入路徑時(shí)，你將看到目錄和文件名的智能提示超棺。 這樣可以避免你在文件瀏覽中花費(fèi)大量時(shí)間：)
9. Project Manager
我討厭的一件事是在VS Code中的項(xiàng)目之間切換向族。 每次我必須打開(kāi)文件資源管理器并在計(jì)算機(jī)上找到項(xiàng)目時(shí)。 但這隨Project Manager 的應(yīng)用而改變棠绘。 使用此插件件相，你可以在項(xiàng)目的側(cè)邊菜單中打開(kāi)一個(gè)額外的菜單。 你可以在項(xiàng)目之間快速切換氧苍，保存收藏夾或從文件系統(tǒng)自動(dòng)檢測(cè)Git項(xiàng)目夜矗。
如果你開(kāi)發(fā)多個(gè)不同的項(xiàng)目，那么這是保持組織狀態(tài)和提高效率的好方法让虐。
10. Editor Config
Editor Config是少數(shù)幾種編碼樣式的標(biāo)準(zhǔn)紊撕，在主要文本編輯器/ IDE中都得到支持。 運(yùn)行方式如下如下赡突。 你將配置文件保存在你的編輯器支持的存儲(chǔ)庫(kù)中对扶。 在這種情況下，你必須為VS Code添加擴(kuò)展名惭缰，以使其遵守這些配置文件浪南。 設(shè)置起來(lái)超級(jí)容易，非常適合團(tuán)隊(duì)項(xiàng)目漱受。
11. Sublime Text Keymap
你是Sublime的狂熱用戶络凿，不愿意切換到VS Code嗎？ 通過(guò)更改所有快捷方式以匹配Sublime的快捷方式，此擴(kuò)展程序?qū)⑹鼓闱袚Q得沒(méi)有任何感知喷众。 現(xiàn)在各谚，你有什么理由不進(jìn)行切換？
12. Browser Preview
我喜歡 Live Server extension 擴(kuò)展（上文提到的）到千，但就便利性而言昌渤，這個(gè)擴(kuò)展更進(jìn)一步。它為您提供了VS Code內(nèi)部的實(shí)時(shí)重新加載預(yù)覽憔四。 無(wú)需再查看瀏覽器即可看到很小的變化膀息！
13. Git Lens
git插件一大堆，但是其中一個(gè)功能最強(qiáng)大了赵，最多潜支。 您會(huì)得到有關(guān)警告的信息，行和文件的歷史記錄柿汛，提交搜索等等冗酿。 如果你需要有關(guān)Git工作流程的幫助，請(qǐng)從這個(gè)插件開(kāi)始络断！
14. Polacode
你知道你在博客和推特中看到的那些漂亮的代碼截圖嗎裁替？ 好吧，很可能它們來(lái)自Polacode貌笨。 使用起來(lái)超級(jí)簡(jiǎn)單弱判。 將一段代碼復(fù)制到剪貼板，打開(kāi)擴(kuò)展名锥惋，粘貼代碼昌腰，然后單擊保存圖像！
15. Prettier
不要花時(shí)間格式化代碼...它做了膀跌。 前面遭商，我提到了ESLint，它提供格式化和檢查淹父。 如果你不需要棉絨檢查株婴，那么選擇Prettier怎虫。 它非常容易設(shè)置暑认，可以配置為在保存時(shí)自動(dòng)格式化代碼。
16. Better Comments
此插件對(duì)各種類型的注釋進(jìn)行不同顏色標(biāo)記大审，以賦予它們不同的含義蘸际，并在其余代碼中突出。 我一直在用這個(gè)來(lái)做提示徒扶。 很難忽略一個(gè)橙色的大提示粮彤，告訴我我有一些未完成的工作要做。
還有用于問(wèn)題，警報(bào)和強(qiáng)調(diào)的顏色代碼导坟。 你也可以添加自己定義的屿良！
17. Git Link
如果你想在Github中查看正在處理的文件，則這個(gè)插件適合你惫周。 安裝后尘惧，只需右鍵單擊文件，你將看到在Github中打開(kāi)文件的選項(xiàng)递递。 如果你不使用Git Lens插件的話喷橙，這個(gè)插件對(duì)于檢查歷史記錄，分支版本等非常好用登舞。
18. VS Code Icons
你知道可以自定義VS Code中的圖標(biāo)嗎贰逾？ 如果你查看設(shè)置，將會(huì)看到“文件圖標(biāo)主題”的選項(xiàng)菠秒。 從那里疙剑，你可以從預(yù)安裝的圖標(biāo)中選擇或安裝圖標(biāo)包。 這個(gè)插件為你提供了一個(gè)非臣可愛(ài)的圖標(biāo)包核芽，已有1100萬(wàn)人使用！
19. Material Icon Theme
你是Google Material 設(shè)計(jì)的粉絲嗎酵熙？ 那么轧简，檢出這個(gè)“ Material主題”圖標(biāo)包。 有數(shù)百種不同的圖標(biāo)匾二，它們看起來(lái)很棒哮独！
20. Settings Sync
開(kāi)發(fā)人員（包括我自己）花費(fèi)大量時(shí)間自定義開(kāi)發(fā)環(huán)境，尤其是文本編輯器察藐。 使用“Settings Sync”插件皮璧，你可以在Github中保存設(shè)置。 然后分飞，可以使用一個(gè)命令將它們加載到任何新版本的VS Code悴务。
21. Better Align
如果你是那種喜歡代碼中完美對(duì)齊的人，那么你需要Better Align譬猫。 你可以對(duì)齊多個(gè)變量聲明讯檐，尾隨注釋，代碼段等染服。沒(méi)有比安裝并嘗試一下更好的辦法來(lái)了解這個(gè)插件的過(guò)人之處了别洪！
22. VIM
你是VIM深度用戶嗎？ 如果是的話柳刮，恭喜挖垛，你所掌握所有VIM騷操作痒钝，可以直接在VS Code中使用它。 我個(gè)人并不善于此道痢毒，但是我知道使用VIM發(fā)揮其潛力時(shí)會(huì)產(chǎn)生多么瘋狂的生產(chǎn)力送矩，從而為你提供更多的功能。
翻譯 | 原文作者：James Quick ??
原文地址：https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
參考：https://juejin.cn/post/6902399886713421831
最后哪替，照舊安利一波我們的公眾號(hào)：「終端研發(fā)部」益愈，目前每天都會(huì)推薦一篇優(yōu)質(zhì)的技術(shù)相關(guān)的文章，主要分享java相關(guān)的技術(shù)與面試技巧夷家，我們的目標(biāo)是： 知道是什么蒸其，為什么，打好基礎(chǔ)库快，做好每一點(diǎn)!這個(gè)主創(chuàng)技術(shù)公眾號(hào)超級(jí)值得大家關(guān)注摸袁。
