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