大家好，我是你們的 貓哥，那個(gè)不喜歡吃魚、又不喜歡喵 的超級(jí)貓 ~

平時(shí)如何發(fā)現(xiàn)好的開源項(xiàng)目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項(xiàng)目

1. code-server

只要服務(wù)器端配置好 Code-Server后，你就可以在任何瀏覽器上使用 VS Code。

code server 的目標(biāo)是為開發(fā)者構(gòu)建一個(gè)便捷統(tǒng)一的開發(fā)環(huán)境，讓開發(fā)者能從任意設(shè)備、任意位置通過(guò)瀏覽器來(lái)進(jìn)行代碼的編寫。從而免去了常規(guī)的 IDE 開發(fā)流程中的環(huán)境搭建的問(wèn)題。

code server 解決的第一個(gè)問(wèn)題就是跨設(shè)備的環(huán)境一致性。因?yàn)?code server 始終運(yùn)行在一個(gè)遠(yuǎn)程的云端環(huán)境，因此他的開發(fā)環(huán)境始終是一致的，不會(huì)出現(xiàn)不同平臺(tái)或者不同設(shè)備運(yùn)行相同的代碼而出現(xiàn)各種問(wèn)題的情況。

https://github.com/coder/code-server

2. monaco-editor

Monaco Editor 是一款開源的在線代碼編輯器。它是 VSCode 的瀏覽器版本，隨著近年 VSCode 大熱，Monaco Editor 也隨之走紅。目前頗有幾分趕超前輩之勢(shì)。

Monaco Editor 是一個(gè)瀏覽器端的代碼編輯器庫(kù)，同時(shí)它也是 VS Code 所使用的編輯器。Monaco Editor 可以看作是一個(gè)編輯器控件，只提供了基礎(chǔ)的編輯器與語(yǔ)言相關(guān)的接口，可以被用于任何基于 Web 技術(shù)構(gòu)建的項(xiàng)目中，而 VS Code 包含了文件管理、版本控制、插件等功能，是一款桌面軟件。

https://github.com/microsoft/monaco-editor

3. Vim

VSCodeVim 是 Visual Studio Code 的 Vim 模擬器。

https://github.com/VSCodeVim/Vim

4. vscode-drawio

draw.io 是一個(gè)支持在線繪圖的網(wǎng)站工具，因其界面簡(jiǎn)潔直觀，功能豐富強(qiáng)大而受到不少用戶喜愛。

由上圖我們清楚可以看到，draw.io 所擁有的功能非常全面，完全能夠輕松勝任我們?nèi)粘５膱D形繪制需求。

不僅如此，draw.io 還支持將圖形保存到 Google Drive、One Drive、GitHub 倉(cāng)庫(kù) 等云端硬盤上，讓用戶可以隨時(shí)進(jìn)行同步與讀取。

由于使用這款工具的人數(shù)眾多，開發(fā)者還貼心的對(duì)其進(jìn)行了國(guó)際化文案翻譯。因此英文不太好的同學(xué)，也不用過(guò)于擔(dān)心。

VSCode 現(xiàn)已完美集成 drwa.io，用戶只需點(diǎn)點(diǎn)鼠標(biāo)，安裝下插件，便能立即在 VSCode 上體驗(yàn) http://draw.io 的所有核心功能。

https://github.com/hediet/vscode-drawio

5. vscode-debug-visualizer

在我們寫代碼得時(shí)候，最麻煩的事是出現(xiàn)錯(cuò)誤很難定位到問(wèn)題，特別是代碼特別長(zhǎng)的時(shí)候，錯(cuò)誤隱藏的很深的時(shí)候，不管是 debugger 還是 console.log，亦或用瀏覽器的調(diào)試工具打斷點(diǎn)，都是需要慢慢一條一條的排錯(cuò)。

這些調(diào)試方式都是需要我們大腦去思考、去排錯(cuò)，那有沒有一種方式更方便，能將結(jié)果以圖的形式展示給我們看，并且將過(guò)程展示給我們看呢？

這里我們介紹一個(gè)神器：vscode-debug-visualizer

它提供了一種以圖表的形式展示數(shù)據(jù)結(jié)構(gòu)形成程的過(guò)程，有樹形、表格、曲線、圖等。

這種展示形式，不僅可以幫我們?cè)诖a調(diào)試的時(shí)候用到，而且在學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)、算法、刷 Leecode 的時(shí)候也可以用到，它會(huì)讓你很清晰的看到數(shù)據(jù)生成的過(guò)程。

https://github.com/hediet/vscode-debug-visualizer

6. vscode-gitlens

GitLens 增強(qiáng)了VS Code 中的 Git，并解鎖了每個(gè)存儲(chǔ)庫(kù)中未開發(fā)的知識(shí)。它可以幫助您通過(guò) Git 責(zé)備注釋和 CodeLens直觀地可視化代碼作者身份，無(wú)縫導(dǎo)航和探索Git 存儲(chǔ)庫(kù)，通過(guò)豐富的可視化和強(qiáng)大的比較命令獲得有價(jià)值的見解等等。

GitLens 只是幫助您更好地理解代碼。快速了解更改行或代碼塊的人員、原因和時(shí)間。回顧歷史，以進(jìn)一步了解代碼如何以及為何演變。輕松探索代碼庫(kù)的歷史和演變。

今天，GitLens 的安裝量超過(guò) 1300 萬(wàn)次，下載量接近 7900 萬(wàn)次，受到數(shù)百萬(wàn)用戶的喜愛和依賴，從單個(gè)開發(fā)人員到大型企業(yè)團(tuán)隊(duì)。

https://github.com/gitkraken/vscode-gitlens

7. polacode

vs code的一款代碼截圖美化插件，能夠輕松創(chuàng)造出漂亮的代碼截圖。

https://github.com/octref/polacode

8. codetour

CodeTour 是一個(gè) VS Code 插件，允許記錄和回放代碼庫(kù)的演練和思路。我們通常都是通過(guò)代碼注釋或者文檔來(lái)解釋某段代碼或方法的功能及邏輯，這樣的方法相對(duì)簡(jiǎn)便，但是對(duì)閱讀的人來(lái)說(shuō)還不夠友好，CodeTour 允許我們?yōu)榇a添加備注，并且將這些備注串聯(lián)起來(lái)，動(dòng)態(tài)地展示我們的思路以及代碼邏輯。

就像一個(gè)目錄，可以輕松地加入到新的項(xiàng)目/功能，并且可視化錯(cuò)誤報(bào)告或了解代碼審查/PR 更改的上下文。"code tour"只是一系列交互步驟，每個(gè)步驟都與特定目錄或文件/行進(jìn)行關(guān)聯(lián)，并包括對(duì)相應(yīng)代碼的描述。開發(fā)人員可以 clone 一個(gè)倉(cāng)庫(kù)，然后立即開始學(xué)習(xí)，而無(wú)需參考 CONTRIBUTING.md 文件或依賴他人的幫助。

https://github.com/microsoft/codetour

9. vscode-database-client

Visual Studio Code的數(shù)據(jù)庫(kù)客戶端擴(kuò)展, 支持MySQL/MariaDB, PostgreSQL, SQLite, Redis, ClickHouse, 達(dá)夢(mèng)以及ElasticSearch的管理, 且可以作為一個(gè)SSH客戶端, 最大程度地提高你的生產(chǎn)力!

https://github.com/cweijan/vscode-database-client

10. vscode-icons

Icons for Visual Studio Code

https://github.com/vscode-icons/vscode-icons

最后

平時(shí)如何發(fā)現(xiàn)好的開源項(xiàng)目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項(xiàng)目

更多精彩項(xiàng)目，請(qǐng)看下方寶藏倉(cāng)庫(kù)，請(qǐng)慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

不知不覺，原創(chuàng)文章已經(jīng)寫到第 70 期了呢，幾乎每一篇都是貓哥精心挑選的優(yōu)質(zhì)開源項(xiàng)目，推送的每一篇文章里面的項(xiàng)目幾乎都是對(duì)前端開發(fā)很有幫助的。

原創(chuàng)不易，一篇優(yōu)質(zhì)的文章都是要肝幾個(gè)晚上才能肝出來(lái)的，花費(fèi)很多時(shí)間、精力去篩選和寫推薦理由，大佬們看完文章后順手點(diǎn)個(gè)贊或者轉(zhuǎn)發(fā)吧，就當(dāng)給貓哥一點(diǎn)鼓勵(lì)吧。

往期精文

• 推薦 12 個(gè)好用的 React 的開源項(xiàng)目，YYDS！

• 推薦 10 個(gè)好用的 Vue3 的開源項(xiàng)目，開發(fā)效率又能提升了！

• 推薦 9 個(gè) Node.js 學(xué)習(xí)、進(jìn)階、debugging 分析、實(shí)戰(zhàn) 的重磅開源項(xiàng)目

• 猛增 110K Star！年增長(zhǎng)數(shù)最多的 10 大頂級(jí)前端學(xué)習(xí)資源項(xiàng)目！

• 推薦 7 個(gè) Vue2、Vue3 源碼解密分析的開源項(xiàng)目

• Vue3 的學(xué)習(xí)教程匯總、源碼解釋項(xiàng)目、支持的 UI 組件庫(kù)、優(yōu)質(zhì)實(shí)戰(zhàn)項(xiàng)目

關(guān)注公眾號(hào)：前端GitHub，回復(fù) 電子書 即可以獲得下面 1000 本技術(shù)精華書籍哦，貓哥微信號(hào)：CB834301747 。

如果不想錯(cuò)過(guò)精彩內(nèi)容，請(qǐng)多給本公眾號(hào)點(diǎn)贊哦，這樣就會(huì)先收到內(nèi)容推薦的。

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的推荐 10 个你没见过的 VsCode 的高效开源神器，YYDS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。