Web開發中實用的22個VSCode插件

相關推薦：《vscode基礎教學》

1. Debugger for chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

相信我，調試JavaScript不僅僅是寫console.log() （雖然這種方式應用最多）。 Chrome內建了一些功能，可以有更好的調試體驗。這個外掛能讓你在vscode裡使用所有（或幾乎所有）這些偵錯功能。

如果你想了解更多，可以閱讀：

《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 Colorizo​​r

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

#括號阻止開發人員活著的禍害。使用大量嵌套程式碼，幾乎不可能確定哪些括號彼此匹配。 Bracket Pair Colorizo​​r（如你所料）為括號匹配顏色，以使程式碼更具可讀性。相信我，你想要！

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發揮其潛力時會產生多麼瘋狂的生產力，從而為你提供更多的功能。

原文網址：https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development

原文作者： James Quick

譯文網址：https://segmentfault.com/a/1190000038478784

更多程式相關知識，請造訪：

程式設計教學###！ ！ ###

以上是Web開發中實用的22個VSCode插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！