2022年推薦給Web開發人員的十大VSCode擴展
目前來說開源代碼編輯器&IDE方面,VSCode可以是一枝獨秀,是目前使用最廣泛的工具。VSCode中大量擴展可以讓我們的開發生活越來越方便高效。本文蟲蟲就可以大家介紹一下當前最流行的VSCode插件擴展。
1.ESLint
ESLint是OpenJS基金會下的熱門JavaScript開源庫。該庫也提供了VSCode擴展,可以無縫的集成到VSC中。它可以用來檢測錯誤并自動修復它們或提供手動修復它們的選項。
這些錯誤是由語法錯誤或違反編程風格指南產生的。編程風格可以按照企業的實際情況設置。
ESLint易于使用,文檔豐富,而且可高度定制。
星級:5
下載次數:1817萬
源碼倉庫: github /Huachao/vscode-restclient
2.Prettier
Coding過程中代碼格式時常會弄亂,比如:錯誤地縮進了JS代碼、每行寫了超過80個字符,等等。不光影響美觀和可讀性,對于處女座的碼農來說這也是個巨大的障礙。
有了Prettier,它可以幫我們搞定這一切。它負責將代碼格式化為優雅、人性可讀的格式。包括正確縮進代碼,如果代碼太長則將代碼分解,是否與添加分號保持一致等等。
ESLint和Prettier可以完美地協同工作,幫助團隊提供與JavaScript樣式指南保持一致的、對可維護性非常有用的。
星級:4
下載次數:1799萬
源碼倉庫: github /prettier/prettier-vscode
3.GitLens
GitLens插件增強了VSC中內置的Git功能。提供git更改、作者和更改時間的詳細信息。
這意味著在編碼時,可以在代碼旁邊看到git更改的詳細信息。懸停時,它會為提供有關該代碼行的更多git信息和操作。
這些操作包括暫存更改、提交更改、推送提交等等。 你真的不需要帶有這個擴展的Git CLI。 此外,您可以輕松導航和修改任何文件的git歷史記錄(向后和向前)。
星級:5
下載次數:1263萬
源碼倉庫: github/eamodio/vscode-gitlens
4.Code Runner
使用Code Runner可以很輕松地在VSC中運行代碼并在VSCode 輸出(終端窗口)。該擴展支持超過41種流行語言的代碼,包括 C、C++、Java、JS、PHP、Python、Perl、Go 和Rust等。
Code Runner可以運行文件中的所有代碼,也支持按需運行選定的代碼。比如:可以選擇一個函數并僅運行該函數。
運行選定代碼時,應確保選定代碼不依賴于未選定代碼,否則可能導致錯誤。
星級:5
下載次數:1087萬
源碼倉庫: github /formulahendry/vscode-code-runner/
5.GitHub PR and ISSues
GitHub PR and ISSues可幫助直接在VSCode中查看和管理GitHub PR和問題。
有了它,可以輕松地從GitHub列出問題和拉取請求。可以評論問題、開始處理問題、查看和驗證拉取請求等等。
無需要打開GitHub Web頁面來管理拉取請求或解決問題,所有這些都可以在VSCode中完成。
星級:3
下載次數:470萬
源碼倉庫: github/Microsoft/vscode-pull-request-github
6.Indent-rainbow
Indent Rainbow可實現代碼縮進著色。這對于JS和Python等語言非常有用。每個級別都有不同的顏色,可以輕松判斷的縮進級別。
該擴展是可定制的,可以輕松更改每個級別的顏色,可支持四種以上顏色。
星級:5
下載次數:281萬
源碼倉庫: github/oderwat/vscode-indent-rainbow
7.DotENV
DotENV 擴展可以突出顯示的.env文件,使其更加易讀而且防止錯誤。這對于Node 開發人員設置環境變量時非常有用。
這個擴展為評論(它啟用評論)、字符串、數字、屬性、關鍵字等提供了不同的顏色。在VSCode中這些默認都是全白的,但這個擴展改變了這一點。它基本上使.env文件看起來像另一種具有語法突出顯示的語言文件。
星級:5
下載次數:234萬
源碼倉庫: github/mikestead/vscode-dotenv/
8.REST Client
REST Client 可以用來操作和管理HTTP請求并直接在編輯器中查看響應。
使用該擴展,可以管理HTTP請求(GET、POST、DELETE、PUT 等),這是使用API 的一個很酷的功能,請求響應結果可以輕松保存到本地磁盤。
它還支持 GraphQL以及身份驗證。
星級:5
下載次數:210萬
源碼倉庫: github /Huachao/vscode-restclient
9.TailwindCSS
TailwindCSS是一個開源擴展,可以用來極大限度地提高工作效率。
我們知道Tailwind主要是關于類的,這個擴展提供了TailwindCSS中所有類名的快速自動完成。使用此擴展程序,可以通過將鼠標懸停在特定類名稱上來查看其樣式。
Tailwind CSS還為樣式表或標記中的錯誤提供linting。所以如果錯誤地使用了一個類名,它就會提醒你。
星級:5
下載次數:86萬
源碼倉庫: github /tailwindlabs/tailwindcss-intellisense
10.VSCode-icons
VSCode-Icons可根據文件夾/文件的名稱或基于文件的擴展名提供交互式和好看的文件/文件夾圖標。
使用具有不同圖標的不同類型的文件夾或文件,可以在項目中無縫導航,而無需一直閱讀文件夾或文件的名稱。這需要更輕松、更快速的導航,同時使編輯器的文件列表更加美觀且更易用。
結論
本文我們介紹了一些優秀的VSCode擴展。當然這只是VSCode龐大生態系統中的冰山一角,更多更好的插件需要大家去挖掘和開發。