基于Web的代碼編輯器是一種用于直接在Web瀏覽器中編寫代碼的應(yīng)用，無需在本地安裝任何軟件。它提供了一個在線開發(fā)環(huán)境，開發(fā)人員可以在其中編寫代碼、預(yù)覽效果、更改代碼并與團(tuán)隊成員實時協(xié)作。

基于Web的代碼編輯器對于團(tuán)隊之間的協(xié)作非常重要，有許多優(yōu)勢：

• 可訪問性：基于Web的代碼編輯器可以從任何具有互聯(lián)網(wǎng)連接的設(shè)備訪問，使團(tuán)隊成員可以輕松地遠(yuǎn)程協(xié)同工作。這種可訪問性具備更大的靈活性，并支持跨地區(qū)和跨時區(qū)的協(xié)作。
• 實時團(tuán)隊協(xié)作：基于Web的代碼編輯器通常支持實時協(xié)作功能，允許多個團(tuán)隊成員同時處理同一代碼。開發(fā)人員能夠在項目上進(jìn)行協(xié)作，一起編輯和審查代碼，并即時反饋。
• 版本控制集成：與Git等版本控制系統(tǒng)集成，使團(tuán)隊能夠管理和跟蹤代碼庫的變更。通過兩者集成，以提供集中的代碼存儲庫，促進(jìn)工作流的順暢協(xié)作，從而簡化協(xié)作。
• 代碼共享和審查：基于Web的代碼編輯器提供了與團(tuán)隊成員共享代碼片段或整個項目的簡單方法。這簡化了代碼評審的過程，團(tuán)隊成員可以直接在編輯器中留下評論、提出更改建議、提供反饋。
• 跨平臺兼容性：基于Web的代碼編輯器一般獨立于平臺，允許開發(fā)人員使用不同的操作系統(tǒng)（Windows、macOS、Linux）進(jìn)行協(xié)作，而不會出現(xiàn)兼容性問題。具備較高包容性，不管團(tuán)隊成員的開發(fā)環(huán)境如何都能夠為項目做貢獻(xiàn)。

本文主要推薦一些比較好的開源Web代碼編輯器，以直接體驗或嵌入到你的產(chǎn)品中。

1.Monaco Editor

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

Monaco編輯器是微軟開發(fā)的基于Web的代碼編輯器，由VS Code提供功能支持。體驗地址：https://microsoft.github.io/monaco-editor/playground.html

優(yōu)點：

• 具有語法突出顯示、代碼完成和調(diào)試功能的豐富功能集。
• 高度可定制和可擴(kuò)展。
• 性能出色，即使是大型代碼庫。
• 支持多種編程語言。
• 與其他工具和框架的集成。

缺點：

• 與更簡單的代碼編輯器相比，學(xué)習(xí)曲線更陡峭。
• 由于其功能豐富的性質(zhì)，需要更多的資源來運行。
• 有限的離線功能，因為它主要在網(wǎng)絡(luò)環(huán)境中運行。

2.OpenVSCode Server

https://github.com/gitpod-io/openvscode-server

這個項目提供了一個可以在遠(yuǎn)處服務(wù)器上運行的VS Code，允許通過Web瀏覽器進(jìn)行訪問。

它基于Gitpod和GitHub Codespaces的技術(shù)架構(gòu)。VS Code團(tuán)隊對其架構(gòu)進(jìn)行重構(gòu)，以支持基于瀏覽器的工作模式，并且該項目共享了使用最新版本的VS Code所需的最小更改集，具有簡單的升級路徑和低維護(hù)工作量。

3.ecode

https://github.com/SpartanJ/ecode

ecode是為現(xiàn)代硬件設(shè)計的輕量級代碼編輯器，專注于響應(yīng)性和性能。它利用硬件加速的eepp GUI，并改進(jìn)eepp GUI庫。

功能特征：

• 輕巧便攜
• 極簡的GUI，可定制的配色方案
• 支持50多種語言的文本高亮顯示和LSP語義高亮顯示
• 多光標(biāo)支持，實現(xiàn)高效編輯
• 終端集成，實現(xiàn)無縫命令執(zhí)行
• 用于快速訪問編輯器功能的命令行
• 自動完成和可定制的鍵盤綁定

4.Code Server

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

Code-Server是一個支持在瀏覽器中運行VS Code的開源項目，能夠在任何設(shè)備上提供一致的開發(fā)環(huán)境。它還支持使用云服務(wù)器以獲得更快的執(zhí)行效率，并為移動的用戶保留電池壽命。

5.Tabby

https://github.com/TabbyML/tabby

Tabby是一個可以私有化部署的AI編碼助手，提供了GitHub Copilot的開源和本地部署方案。它是獨立的，不需要DBMS或云服務(wù)，具有易于集成的OpenAPI接口，并支持消費級GPU。

另外，Tabby可以使用Docker輕松安裝。

6.Neko Code Editor

https://github.com/flyingcatdeveloper/nce

Neko Code Editor是一個簡單的代碼編輯器，具有Monaco Editor類似的功能，包括：控制臺、在新選項卡中打開代碼、多文件功能、項目管理、DevLog更新、本地數(shù)據(jù)保存、可自定義設(shè)置等功能。

功能特征：

• Monaco編輯器功能：具有代碼自動完成、MDN應(yīng)用等功能。
• 控制臺：只需單擊一個按鈕即可輕松查看控制臺。
• 在新選項卡中打開代碼：查看代碼時，它看起來就像一個網(wǎng)頁。
• 多文件功能：擁有盡可能多的文件，支持HTML，CSS，文件夾和JS文件。
• 儀表板：在一個位置查看所有編輯器，沿著顯示上次打開它們的時間。
• 項目導(dǎo)入：開始在新設(shè)備上工作或通過導(dǎo)入項目恢復(fù)已刪除的數(shù)據(jù)。
• 項目下載：安全下載整個項目，以防止意外數(shù)據(jù)丟失。
• 保持更新：隨時了解DevLog的新功能和修復(fù)。
• 數(shù)據(jù)備份：數(shù)據(jù)使用localStorage和IndexedDB保存，可以輕松加載到項目。
• 自定義設(shè)置：自定義編輯器的設(shè)置，包括編輯器名稱、自動保存和文件壓縮。

7.CodeMirror

https://github.com/codemirror/dev/

https://codemirror.net/

CodeMirror是一個可擴(kuò)展的Web代碼編輯器組件，可用于實現(xiàn)具有高級編輯功能和豐富編程接口的文本輸入，并支持進(jìn)行進(jìn)一步擴(kuò)展。

功能特征：

• 可訪問性：適用于屏幕閱讀器和鍵盤用戶。
• 移動的支持：在手機(jī)上使用平臺的本地選擇和編輯功能。
• 雙向文本：支持從右到左和從左到右的混合文本。
• 高亮：顏色代碼，以反映句法結(jié)構(gòu)。
• 顯示行號：顯示代碼旁邊帶有行號或其他信息的間距。
• 自動完成：在編輯器中提供特定語言的完成提示。
• 代碼折疊：暫時隱藏文檔的某些部分。
• 搜索/替換：特定于編輯器的搜索、regexp搜索和替換功能。
• 完整解析：詳細(xì)的解析樹允許許多類型的語言集成。
• 擴(kuò)展接口：健壯地實現(xiàn)要求苛刻的編輯器擴(kuò)展。
• 模塊化：大多數(shù)特性都是在通用公共API之上實現(xiàn)的。
• 速度：即使在大型文檔和長行上也能保持響應(yīng)。
• 自動關(guān)閉：在鍵入時自動插入匹配的括號。
• Linting：在編輯器中顯示錯誤和警告消息。
• 靈活的樣式：混合字體樣式和大小，在內(nèi)容中添加小部件。
• 主題化：導(dǎo)入或創(chuàng)建自定義可視化編輯器樣式。
• 協(xié)作編輯：允許多個用戶編輯同一文檔。
• 歷史記錄撤銷：支持協(xié)作編輯的撤銷、重做功能。
• 多個選擇：一次選擇和編輯文檔的多個范圍。
• 國際化：提供自定義文本以顯示或通知用戶。

8.CodeFlask

https://github.com/kazzkiq/CodeFlask

CodeFlask是一個輕量級、可定制的基于Web的代碼編輯器。它提供了一些基礎(chǔ)的代碼編輯功能，如：語法突出顯示、自動完成和代碼格式化。CodeFlask的設(shè)計目標(biāo)為易于使用，可以被輕松地集成到Web應(yīng)用程序中。當(dāng)需要一個簡單和輕量級的代碼編輯器時，它是一個合適的選擇。

9.CodeJar

https://github.com/antonmedv/codejar

CodeJar是一個強(qiáng)大的開源、可嵌入的Web代碼編輯器。

功能特征：

• 輕量級（僅2.45 kB）
• 沒有依賴關(guān)系
• 適用于Chrome，Safari，F(xiàn)irefox，iOS，iPadOS，Android.
• 支持在新行上保留縮進(jìn)
• 自動添加右括號、引號
• 使用Tab鍵縮進(jìn)
• 支持撤消、重做
• 可以使用任何高亮顯示庫， 如：PrismJS or  或 highlight.js 或自定義開發(fā)

10.Rustpad

https://github.com/ekzhang/rustpad

Rustpad是一個基于操作轉(zhuǎn)換算法的高效和最小的開源協(xié)作文本編輯器。只需要一個小的Docker鏡像，并且不需要數(shù)據(jù)庫。服務(wù)器是使用Rust編寫的warp web服務(wù)器框架，而前端是使用TypeScript編寫的React和Monaco接口。

編輯器通過WebSocket與服務(wù)器進(jìn)行通信，性能高效，但在服務(wù)器重新啟動或24小時不活動后可能斷開連接，導(dǎo)致臨時文檔丟失。

11.ICEcoder

https://github.com/icecoder/ICEcoder

ICEcoder是一個基于瀏覽器的代碼編輯器，允許高效的網(wǎng)站開發(fā)和維護(hù)。它可以在線或離線使用，并與Linux，Windows和Mac平臺兼容。唯一的要求是PHP 7（推薦使用7.4）。

但需要注意的是，目前這個開源庫已經(jīng)停止更新。