> 翻譯    原文作者：James Quick    原文地址：https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
@[Toc]
# 1. Debugger for chrome > https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome  相信我，除錯JavaScript不僅僅是寫 console.log() （雖然這種方式應用最多）。Chrome內建了一些功能，可以擁有更好的除錯體驗。這個外掛能讓你在vs code裡使用所有（或者幾乎所有）這些除錯功能。 如果你想了解更多，你可以閱讀： [Debugging JavaScript in Chrome and Visual Studio Code.](https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code)
# 2. Javascript (ES6) Code Snippets > https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets  我喜歡Snippets外掛。我覺得沒有必要反覆輸入同一段程式碼。這個外掛為你提供了流行的（ES6）JavaScript程式碼片段。 注…如果你沒有用es6javascript特性——趕緊用起來吧！
# 3. ESLint > https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint  是否想編寫更好的程式碼？ 是否需要整個團隊使用一致的格式？ 安裝ESLint。 這個外掛可以配置為自動設定程式碼格式以及帶有錯誤或警告的“yell（提示）”。 VS Code通過合適的配置，可以向你展示這些提示。
# 4. Live server > https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer  在程式碼編輯器中進行更改，切換到瀏覽器，然後重新整理以檢視更改。 那是開發人員無休止的迴圈，但是如果你在進行更改時瀏覽器會自動重新整理會怎樣呢？ 這就是Live Server的用武之地！ 它還在本地伺服器上執行你的應用程式。 有些事情只有在伺服器裡執行應用程式時才能測試，因此這也是個利好之處。
# 5. Bracket Pair Colorizor > https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer  括號阻止開發人員活著的禍害。 使用大量巢狀程式碼，幾乎不可能確定哪些括號彼此匹配。 Bracket Pair Colorizor（如你所料）為括號匹配顏色，以使程式碼更具可讀性。 相信我，你想要！
# 6. Auto Rename Tag > https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag  是否需要重新命名HTML中的元素？ 好了，使用“Auto Rename Tag”，你只需要重新命名開始或結束標籤，其他標籤將自動重新命名。 簡單但有效！
# 7. Quokka > https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode  需要一個快速的地方來測試一些JavaScript嗎？ 我曾經習慣在Chrome中開啟控制檯，然後在其中輸入一些程式碼，但缺點很多。 Quokka在VS Code中為你提供了一個JavaScript（和TypeScript）暫存器。 這意味著你可以在自己喜歡的編輯器中測試一段程式碼！
# 8. Path Intellisense > https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense  在大型專案中，記住特定的檔名和檔案所在的目錄可能會很麻煩。 此外掛將為你提供智慧提示。 當你開始在引號中輸入路徑時，你將看到目錄和檔名的智慧提示。 這樣可以避免你在檔案瀏覽中花費大量時間：)
# 9. Project Manager > https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager  我討厭的一件事是在VS Code中的專案之間切換。 每次我必須開啟檔案資源管理器並在計算機上找到專案時。 但這隨Project Manager 的應用而改變。 使用此外掛，你可以在專案的側邊選單中開啟一個額外的選單。 你可以在專案之間快速切換，儲存收藏夾或從檔案系統自動檢測Git專案。 如果你開發多個不同的專案，那麼這是保持組織狀態和提高效率的好方法。
# 10. Editor Config > https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig  Editor Config是少數幾種編碼樣式的標準，在主要文字編輯器/ IDE中都得到支援。 執行方式如下如下。 你將配置檔案儲存在你的編輯器支援的儲存庫中。 在這種情況下，你必須為VS Code新增副檔名，以使其遵守這些配置檔案。 設定起來超級容易，非常適合團隊專案。
# 11. Sublime Text Keymap > https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings  你是Sublime的狂熱使用者，不願意切換到VS Code嗎？ 通過更改所有快捷方式以匹配Sublime的快捷方式，此擴充套件程式將使你切換得沒有任何感知。 現在，你有什麼理由不進行切換？
# 12. Browser Preview > https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview  我喜歡 Live Server extension 擴充套件（上文提到的），但就便利性而言，這個擴充套件更進一步。它為您提供了VS Code內部的實時重新載入預覽。 無需再檢視瀏覽器即可看到很小的變化！
# 13. Git Lens > https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens  git外掛一大堆，但是其中一個功能最強大，最多。 您會得到有關警告的資訊，行和檔案的歷史記錄，提交搜尋等等。 如果你需要有關Git工作流程的幫助，請從這個外掛開始！
# 14. Polacode > https://marketplace.visualstudio.com/items?itemName=pnp.polacode  你知道你在部落格和推特中看到的那些漂亮的程式碼截圖嗎？ 好吧，很可能它們來自Polacode。 使用起來超級簡單。 將一段程式碼複製到剪貼簿，開啟副檔名，貼上程式碼，然後單擊儲存影象！
# 15. Prettier > https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode  不要花時間格式化程式碼...它做了。 前面，我提到了ESLint，它提供格式化和檢查。 如果你不需要棉絨檢查，那麼選擇Prettier。 它非常容易設定，可以配置為在儲存時自動格式化程式碼。
# 16. Better Comments > https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments  此外掛對各種型別的註釋進行不同顏色標記，以賦予它們不同的含義，並在其餘程式碼中突出。 我一直在用這個來做提示。 很難忽略一個橙色的大提示，告訴我我有一些未完成的工作要做。 還有用於問題，警報和強調的顏色程式碼。 你也可以新增自己定義的！
# 17. Git Link > https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink  如果你想在Github中檢視正在處理的檔案，則這個外掛適合你。 安裝後，只需右鍵單擊檔案，你將看到在Github中開啟檔案的選項。 如果你不使用Git Lens外掛的話，這個外掛對於檢查歷史記錄，分支版本等非常好用。
# 18. VS Code Icons > https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons  你知道可以自定義VS Code中的圖示嗎？ 如果你檢視設定，將會看到“檔案圖示主題”的選項。 從那裡，你可以從預安裝的圖示中選擇或安裝圖示包。 這個外掛為你提供了一個非常可愛的圖示包，已有1100萬人使用！
# 19. Material Icon Theme > https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme  你是Google Material 設計的粉絲嗎？ 那麼，檢出這個“ Material主題”圖示包。 有數百種不同的圖示，它們看起來很棒！
# 20. Settings Sync > https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync  開發人員（包括我自己）花費大量時間自定義開發環境，尤其是文字編輯器。 使用“Settings Sync”外掛，你可以在Github中儲存設定。 然後，可以使用一個命令將它們載入到任何新版本的VS Code。
# 21. Better Align > https://marketplace.visualstudio.com/items?itemName=wwm.better-align  如果你是那種喜歡程式碼中完美對齊的人，那麼你需要Better Align。 你可以對齊多個變數宣告，尾隨註釋，程式碼段等。沒有比安裝並嘗試一下更好的辦法來了解這個外掛的過人之處了！
# 22. VIM > https://marketplace.visualstudio.com/items?itemName=vscodevim.vim  你是VIM深度使用者嗎？ 如果是的話，恭喜，你所掌握所有VIM騷操作，可以直接在VS Code中使用它。 我個人並不善於此道，但是我知道使用VIM發揮其潛力時會產生多麼瘋狂的生產力，從而為你提供更多的功能。 <