搜尋
首頁開發工具VSCode22個Web開發中不錯的VSCode插件(分享)

22個Web開發中不錯的VSCode插件(分享)

Jul 26, 2021 am 11:13 AM
githubvscode前端開發外掛

這篇文章跟大家分享22個Web開發中不錯的VSCode插件,幫助開發者提示開發效率,我們一起來看看吧!

22個Web開發中不錯的VSCode插件(分享)

【推薦學習:《vscode教學》】

1. Debugger for chrome

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

22個Web開發中不錯的VSCode插件(分享)##相信我,除錯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://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

##我喜歡Snippets插件。我覺得沒有必要重複輸入同一段程式碼。這個插件為你提供了流行的(ES6)JavaScript程式碼片段。 22個Web開發中不錯的VSCode插件(分享)

附註…如果你沒有用es6javascript特性-趕快用起來吧!

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

#是否想寫更好的程式碼?是否需要整個團隊使用一致的格式?安裝ESLint。這個外掛可以配置為自動設定程式碼格式以及帶有錯誤或警告的“yell(提示)”。 VS Code透過適當的配置,可以向你展示這些提示。 22個Web開發中不錯的VSCode插件(分享)

4. Live server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

在程式碼編輯器中進行更改,切換到瀏覽器,然後刷新以查看更改。那是開發人員無休止的循環,但是如果你在進行更改時瀏覽器會自動刷新會怎麼樣呢?這就是Live Server的用武之地! 22個Web開發中不錯的VSCode插件(分享)

它也在本機伺服器上運行你的應用程式。有些事情只有在伺服器裡運行應用程式時才能測試,因此這也是利好之處。

5. Bracket Pair Colorizo​​r

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

括號阻止開發人員活著的禍害。使用大量嵌套程式碼,幾乎不可能確定哪些括號彼此匹配。 Bracket Pair Colorizo​​r(如你所料)為括號匹配顏色,以使程式碼更具可讀性。相信我,你想要! 22個Web開發中不錯的VSCode插件(分享)

6. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

是否需要重新命名HTML中的元素?好了,使用“Auto Rename Tag”,你只需要重命名開始或結束標籤,其他標籤將自動重命名。簡單但有效! 22個Web開發中不錯的VSCode插件(分享)

7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

#需要一個快速的地方來測試一些JavaScript嗎?我曾經習慣在Chrome中打開控制台,然後在其中輸入一些代碼,但缺點很多。 Quokka在VS Code中為你提供了一個JavaScript(和TypeScript)暫存器。這意味著你可以在自己喜歡的編輯器中測試一段程式碼! 22個Web開發中不錯的VSCode插件(分享)

8. Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

#在大型專案中,記住特定的檔案名稱和檔案所在的目錄可能會很麻煩。此外掛將為你提供智慧提示。當你開始在引號中輸入路徑時,你將看到目錄和檔案名稱的智慧提示。這樣可以避免你在文件瀏覽中花費大量時間:)22個Web開發中不錯的VSCode插件(分享)

9. Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

22個Web開發中不錯的VSCode插件(分享)

#我討厭的一件事是在VS Code中的專案之間切換。每次我必須打開文件資源管理器並在計算機上找到項目時。但這會隨Project Manager 的應用而改變。使用此插件,你可以在項目的側邊選單中開啟一個額外的選單。你可以在專案之間快速切換,儲存收藏夾或從檔案系統自動偵測Git專案。

如果你開發多個不同的項目,那麼這是保持組織狀態和提高效率的好方法。

10. Editor Config

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

22個Web開發中不錯的VSCode插件(分享)

#Editor Config是少數幾種編碼樣式的標準,在主要文字編輯器/ IDE中都得到支援。運行方式如下如下。你將設定檔保存在你的編輯器支援的儲存庫中。在這種情況下,你必須為VS Code添加副檔名,以使其遵守這些設定檔。設定起來超級容易,非常適合團隊專案。

11. Sublime Text Keymap

#https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

22個Web開發中不錯的VSCode插件(分享)

你是Sublime的狂熱用戶,不願意切換到VS Code嗎?透過更改所有快捷方式以匹配Sublime的快捷方式,此擴充功能將使您切換得沒有任何感知。現在,你有什麼理由不進行切換?

12. Browser Preview

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

22個Web開發中不錯的VSCode插件(分享)

#我喜歡Live Server extension 擴充功能(上文提到的),但就便利性而言,這個擴充功能更進一步。它為您提供了VS Code內部的即時重新載入預覽。無需再查看瀏覽器即可看到很小的變化!

13. Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

22個Web開發中不錯的VSCode插件(分享)

git外掛一大堆,但其中一個功能最強大,最多。您會得到有關警告的信息,行和文件的歷史記錄,提交搜索等等。如果你需要有關Git工作流程的協助,請從這個外掛程式開始!

14. Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

22個Web開發中不錯的VSCode插件(分享)

#你知道你在部落格和推特中看到的那些漂亮的程式碼截圖嗎?好吧,很可能它們來自Polacode。使用起來超簡單。將一段程式碼複製到剪貼簿,打開擴展名,貼上程式碼,然後點擊儲存圖像!

15. Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

22個Web開發中不錯的VSCode插件(分享)

#不要花時間格式化程式碼...它做了。前面,我提到了ESLint,它提供格式化和檢查。如果你不需要棉絮檢查,那麼選擇Prettier。它非常容易設置,可以配置為在儲存時自動格式化程式碼。

16. Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

22個Web開發中不錯的VSCode插件(分享)

此外掛程式對各種類型的註解進行不同顏色標記,以賦予它們不同的含義,並在其餘程式碼中突出。我一直在用這個來做提示。很難忽略一個橙色的大提示,告訴我我有一些未完成的工作要做。

還有用於問題,警報和強調的顏色代碼。你也可以加入自己定義的!

17. Git 連結

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

22個Web開發中不錯的VSCode插件(分享)

#如果你想在Github中查看正在處理的文件,則這個外掛程式適合你。安裝後,只需右鍵單擊文件,你將看到在Github中開啟文件的選項。如果你不使用Git Lens插件的話,這個插件對於檢查歷史記錄,分支版本等非常好用。

18. VS Code Icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

22個Web開發中不錯的VSCode插件(分享)

#你知道可以自訂VS Code中的圖示嗎?如果你查看設置,將會看到「文件圖示主題」的選項。從那裡,你可以從預先安裝的圖示中選擇或安裝圖示包。這個外掛程式為你提供了一個非常可愛的圖示包,已有1100萬人使用!

19. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

22個Web開發中不錯的VSCode插件(分享)

你是Google Material 設計的粉絲嗎?那麼,檢出這個「 Material主題」圖示包。有數百種不同的圖標,它們看起來很棒!

20. Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

22個Web開發中不錯的VSCode插件(分享)

開發人員(包括我自己)花費大量時間自訂開發環境,尤其是文字編輯器。使用「Settings Sync」插件,你可以在Github中儲存設定。然後,可以使用一個命令將它們載入到任何新版本的VS Code。

21. Better Align

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

22個Web開發中不錯的VSCode插件(分享)

如果你是那種喜歡程式碼中完美對齊的人,那麼你需要Better Align。你可以對齊多個變數聲明,尾隨註釋,程式碼段等。沒有比安裝並嘗試更好的辦法來了解這個插件的過人之處了!

22. VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

22個Web開發中不錯的VSCode插件(分享)

#你是VIM深度用戶嗎?如果是的話,恭喜,你所掌握所有VIM騷操作,可以直接在VS Code中使用它。我個人並不擅長於此道,但是我知道使用VIM發揮其潛力時會產生多麼瘋狂的生產力,從而為你提供更多的功能。

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

更多程式相關知識,請造訪:程式設計影片! !

以上是22個Web開發中不錯的VSCode插件(分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:知乎。如有侵權,請聯絡admin@php.cn刪除
Visual Studio的價值:權衡成本與其收益Visual Studio的價值:權衡成本與其收益Apr 12, 2025 am 12:06 AM

VisualStudio在.NET开发中价值高,因其功能强大且全面。尽管成本和资源消耗较高,但其带来的效率提升和开发体验改善显著。对于个人开发者和小型团队,Community版是理想选择;大型企业则适合Professional或Enterprise版。

Visual Studio的可用性:哪些版本是免費的?Visual Studio的可用性:哪些版本是免費的?Apr 10, 2025 am 09:44 AM

VisualStudio的免費版本包括VisualStudioCommunity和VisualStudioCode。 1.VisualStudioCommunity適用於個人開發者、開源項目和小型團隊,功能強大,適合個人項目和學習編程。 2.VisualStudioCode是一個輕量級的代碼編輯器,支持多種編程語言和擴展,啟動速度快,資源佔用少,適合需要靈活性和可擴展性的開發者。

如何為Windows 8安裝Visual Studio?如何為Windows 8安裝Visual Studio?Apr 09, 2025 am 12:19 AM

在Windows8上安裝VisualStudio的步驟如下:1.從微軟官方網站下載VisualStudioCommunity2019安裝包。 2.運行安裝程序並選擇所需組件。 3.完成安裝後即可使用。注意選擇與Windows8兼容的組件,並確保有足夠的磁盤空間和管理員權限。

我的計算機可以運行與代碼嗎?我的計算機可以運行與代碼嗎?Apr 08, 2025 am 12:16 AM

VSCode可以在大多數現代電腦上運行,只要滿足基本系統要求:1.操作系統:Windows7及以上,macOS10.9及以上,Linux;2.處理器:1.6GHz或更快;3.內存:至少2GBRAM(推薦4GB或更高);4.存儲空間:至少200MB可用空間。通過優化設置和減少擴展使用,可以在低配置電腦上獲得流暢的使用體驗。

如何使程序與Windows 8兼容?如何使程序與Windows 8兼容?Apr 07, 2025 am 12:09 AM

要讓程序在Windows8上順暢運行,需採取以下步驟:1.使用兼容性模式,通過代碼檢測並啟用該模式。 2.調整API調用,根據Windows版本選擇適當的API。 3.進行性能優化,盡量避免使用兼容性模式,優化API調用並使用通用控件。

VS代碼在Windows 8上有效嗎?VS代碼在Windows 8上有效嗎?Apr 06, 2025 am 12:13 AM

Yes,VSCodeiscompatiblewithWindows8.1)DownloadtheinstallerfromtheVSCodewebsiteandensurethelatest.NETFrameworkisinstalled.2)Installextensionsusingthecommandline,notingsomemayloadslower.3)Manageperformancebyclosingunnecessaryextensions,usinglightweightt

VS代碼和Visual Studio有什麼區別?VS代碼和Visual Studio有什麼區別?Apr 05, 2025 am 12:07 AM

VSCode是輕量級代碼編輯器,適用於多種語言和擴展;VisualStudio是功能強大的IDE,主要用於.NET開發。 1.VSCode基於Electron,支持跨平台,使用Monaco編輯器。 2.VisualStudio使用微軟自主技術棧,集成調試和編譯器。 3.VSCode適合簡單任務,VisualStudio適合大型項目。

哪個代碼編輯器可以在Windows 7上運行?哪個代碼編輯器可以在Windows 7上運行?Apr 03, 2025 am 12:01 AM

在Windows7上可以運行的代碼編輯器有Notepad 、SublimeText和Atom。 1.Notepad :輕量級,啟動快,適合老系統。 2.SublimeText:功能強大,需付費。 3.Atom:可定制性強,但啟動慢。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。