vscode常用的36個前端插件，直接搜尋下載！-VSCode-PHP中文網

首頁

開發工具

VSCode

vscode常用的36個前端插件，直接搜尋下載！

青灯夜游

Aug 19, 2021 am 10:47 AM

vscode前端插件

vscode常用的36個前端插件，直接搜尋下載！

趁著空了的時間，把常用的一些vscode外掛程式整理一下，方便後面更換電腦又得重新去搜尋下載，需要的同學可以先收藏一下，後續有get到一些新的插件會繼續更新！【推薦學習：《vscode教學》】

1. Indent-Rainbow

讓縮排有顏色

2. Material Icon Theme

好看的檔案圖示

#3. Beautify

程式碼格式化

4. Power Mode

一款酷炫的鍵盤敲擊動效

5. Vetur

##強大的vue開發支援工具

6. vscode-fileheader

#檔案頭註解資訊

7. Vue CSS Peek

為單一頁面的vue 檔案提供css 轉定義的支援

8. Vue Peek

點擊元件可以跳到元件定義的檔案

9. Vue VSCode Snippets

Vue中的一些data、method等函數自動補全提示，方便快速編寫程式碼；

# 10. 小霸王

一款在vscode裡可以玩的超級瑪莉

11. A-super-translate

劃詞翻譯。滑鼠停留選中幾秒鐘就會查看翻譯內容。

12. filesize

在狀態列中顯示目前檔案大小。

13. TabNine

Al輔助程式碼補全神器。可以根據你寫過的程式碼習慣，來給你配對合適的欄位。

14. Auto Close Tag

自動閉合標籤

15. Auto Import

自動匯入模組

16. Auto Rename Tag

更改標籤名稱時結束標籤名稱自動重新命名

17. Quokka

#是一個調試工具插件，能夠根據你正在編寫的程式碼提供即時回饋。它易於配置，並能夠預覽變數的函數和計算值結果。另外，在使用 JSX 或 TypeScript 專案中，它能夠開箱即用。

18. CSS Peek

使用此插件，你可以追蹤到樣式表中 CSS 類別和 ids 定義的地方。當你在 HTML 檔案中右鍵點選選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它就會給你發送樣式設定的 CSS 程式碼。

19. HTML Boilerplate

透過使用 HTML 模版插件，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，即可產生乾淨的文件結構。

20. Better Comments

透過添加彩色註解來改進您的程式碼並使其更具吸引力。

21. Error Lens

將編輯器診斷出的警告、錯誤、語法問題（提示的波浪線）等，以顏色填滿行背景的方式突出提示，並將診斷訊息顯示在尾部。

22. Prettier

是目前 Web 開發中最受歡迎的程式碼格式化程式。安裝了這個插件，它能夠自動套用 Prettier，並將整個 JS 和 CSS 文件快速格式化為統一的程式碼樣式。如果你還想使用 ESLint，那麼還有個Prettier – Eslint 插件，你可不要錯過咯！

23. color highlight

一款比較常用的程式碼高亮外掛程式

24. Color Picker

顏色選擇器

25. Git Blame

#能夠找出那段程式碼是誰寫的

26. ESLint

eslint外掛程式

27. TODO Highlight

TODO高亮顯示

28. Trailing Spaces

反白顯示尾隨空格，讓你的「空格」型強迫症顯示呈現

#29. VS Code Counter

統計程式碼總行數、註解行數、空白行數，以及使用的語言。

30. Bracket Pair Colorizer

為符合的括號著色

31. Code Spell Checker

#拼字檢查器。例如 banana 單字寫錯成 banane ，會提示你是否修改成 banana ，也可以將 banane 加入到檢查器的字典中。

32. Path Intellisense

自動完成檔案名稱

33. Rainbow Fart

官方概述：VSCode Rainbow Fart是一個在你編程時持續誇你寫的牛逼的擴展，可以根據代碼關鍵字播放貼近代碼意義的真人語音。

34. any-rule

可以在vscode裡快速使用正規表示式，不需要藉助度娘了！

35. ## Todo Tree

Todo Tree 是提示待辦事項的插件，在程式碼註解最前面加上//TODO，整個註解就會高亮顯示；

36. ## project-tree

這是一個自動產生專案結構的外掛；

更多程式相關知識，請造訪：程式設計入門！！

以上是vscode常用的36個前端插件，直接搜尋下載！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金--枫913。如有侵權，請聯絡admin@php.cn刪除

Visual Studio：代碼編譯，測試和部署Apr 24, 2025 am 12:05 AM

在VisualStudio中，代碼編譯、測試和部署的步驟如下：1.編譯：使用VisualStudio的編譯器選項將源代碼轉化為可執行文件，支持多種語言如C#、C 和Python。 2.測試：利用內置的MSTest和NUnit等框架進行單元測試，提高代碼質量和可靠性。 3.部署：通過Web部署、Azure部署等方式，將應用程序從開發環境轉移到生產環境，確保安全性和性能。

Visual Studio：綜合開發環境簡介（IDE）Apr 23, 2025 am 12:02 AM

VisualStudioismicrosoft'sflagshipide，支持multipleProgrammingLanguagesandEnhancingCodingQodings.1）ItoffersFeaterSfeaturesLikeInkIntellisensensensensensensensensensensensensensensensensenseforcodePrediction，Multi-TabbedInterfaceForProproject Managements，andToolsfordEbugging，andToolsfordEbugging，Repactioning，andVersionControl.2

Visual Studio：探索免費和付費產品Apr 22, 2025 am 12:09 AM

VisualStudio的免費版和付費版的主要區別在於功能的豐富程度和支持的服務。免費版（Community）適用於個人開發者和小型團隊，提供基本開發工具；付費版（Professional和Enterprise）則提供高級功能，如高級調試和團隊協作工具，適合大型項目和企業級開發。

Visual Studio社區版：解釋的免費選項Apr 21, 2025 am 12:09 AM

VisualStudioCommunityEdition是一款免費的IDE，適合個人開發者、小型團隊和教育機構。 1)它提供代碼編輯、調試、測試和版本控制等功能。 2)基於Roslyn編譯器平台，支持多種編程語言並集成Git和TFVC。 3)高級功能包括單元測試，優化建議包括關閉不必要的擴展和使用輕量級編輯器。

視覺工作室：輕鬆構建應用程序Apr 20, 2025 am 12:09 AM

VisualStudio是由微軟開發的集成開發環境（IDE），支持多種編程語言，包括C#,C ,Python等。 1.它提供了智能感知（IntelliSense）功能，幫助快速編寫代碼。 2.調試器允許設置斷點，逐步執行代碼，找出問題。 3.對於初學者，創建簡單的控制台應用程序是入門的好方法。 4.高級用法包括項目管理和依賴注入等設計模式的應用。 5.常見錯誤可以通過調試工具逐步解決。 6.性能優化和最佳實踐包括代碼優化、版本控制、代碼質量檢查和自動化測試。

Visual Studio和VS代碼：了解其關鍵差異Apr 19, 2025 am 12:16 AM

VisualStudio適合大型項目和企業級應用開發，VSCode則適合快速開發和多語言支持。 1.VisualStudio提供全面的IDE環境，支持微軟技術棧。 2.VSCode是輕量級編輯器，強調靈活性和擴展性，跨平台支持。

視覺工作室仍然免費嗎？了解可用性Apr 18, 2025 am 12:05 AM

是的，VisualStudio某些版本是免費的。具體來說，VisualStudioCommunityEdition對個人開發者、開源項目、學術研究和小型組織免費。然而，也有付費版本如VisualStudioProfessional和Enterprise，適用於大型團隊和企業，提供額外功能。

使用Visual Studio：跨平台開發軟件Apr 17, 2025 am 12:13 AM

使用VisualStudio進行跨平台開發是可行的，通過支持.NETCore和Xamarin等框架，開發者可以編寫一次代碼並在多個操作系統上運行。 1)創建.NETCore項目並使用其跨平台能力，2)使用Xamarin進行移動應用開發，3)利用異步編程和代碼重用來優化性能，確保應用的高效運行和可維護性。

See all articles