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

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

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

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

1.Monaco Editor

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

• 與更簡(jiǎn)單的代碼編輯器相比，學(xué)習(xí)曲線更陡峭。
• 由于其功能豐富的性質(zhì)，需要更多的資源來運(yùn)行。
• 有限的離線功能，因?yàn)樗饕诰W(wǎng)絡(luò)環(huán)境中運(yùn)行。

2.OpenVSCode Server

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

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

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

3.ecode

https://github.com/SpartanJ/ecode

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

功能特征：

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

4.Code Server

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

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

5.Tabby

https://github.com/TabbyML/tabby

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

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

6.Neko Code Editor

https://github.com/flyingcatdeveloper/nce

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

功能特征：

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

7.CodeMirror

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

https://codemirror.net/

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

功能特征：

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

8.CodeFlask

https://github.com/kazzkiq/CodeFlask

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

9.CodeJar

https://github.com/antonmedv/codejar

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

功能特征：

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

10.Rustpad

https://github.com/ekzhang/rustpad

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

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

11.ICEcoder

https://github.com/icecoder/ICEcoder

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

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