阿里&螞蟻聯(lián)合開源的 IDE 研發(fā)框架 - OpenSumi
VSCode 號稱宇宙最強 IDE，平時我們基本上都是在以本地客戶端的方式來使用的，那么有沒有 WEB IDE 的方式呢？其實從 VSCode 1.40 版本開始我們已經(jīng)可以編譯出 Web 版的 VSCode 了，VSCode 官方也提供了一個在線的 IDE：https://vscode.dev/。
除了基于原始的 VSCode 代碼構建 Web 服務來運行之外，其實還有一些比較優(yōu)秀的基于 VSCode 的 WEB IDE 項目，接下來我們就來和大家盤點下。
1、code-server
code-server 是 Coder 公司（ https://coder.com/ ）基于VSCode的開源項目，可以實現(xiàn)通過瀏覽器訪問在遠程服務器上的 VSCode，專門為瀏覽器做了設計優(yōu)化，以便作為可托管的 Web 服務來運行。
使用 code-server 具有很多的優(yōu)勢：
- 隨時隨地編寫代碼：使用一致的開發(fā)環(huán)境，在平板電腦和筆記本電腦上設置代碼。在 Linux 計算機上進行開發(fā)，然后通過 Web 瀏覽器從任何設備中獲取。
- 云服務器支持：利用大型云服務器加快測試、編譯、下載等速度。
要運行 code-server 最低的服務器要求是 1GB 內存和 2CPU 的 Linux 機器。
要安裝 code-server 也非常簡單的，只需要執(zhí)行下面的腳本命令即可一鍵安裝：
curl -fsSL https://code-server.dev/install.sh | sh
不過一般情況下推薦使用 Docker 或者 Kubernetes 來部署。
# This will start a code-server container and expose it at http://127.0.0.1:8080.
# It will also mount your current directory into the container as `/home/coder/project`
# and forward your UID/GID so that all file system operations occur as your user outside
# the container.
#
# Your $HOME/.config is mounted at $HOME/.config within the container to ensure you can
# easily access/modify your code-server config in $HOME/.config/code-server/config.json
# outside the container.
mkdir -p ~/.config
docker run -it --name code-server -p 127.0.0.1:8080:8080 \
-v "$HOME/.config:/home/coder/.config" \
-v "$PWD:/home/coder/project" \
-u "$(id -u):$(id -g)" \
-e "DOCKER_USER=$USER" \
codercom/code-server:latest
Git 倉庫：https://github.com/coder/code-server。
2、Eclipse Theia
Theia 是一個可擴展的平臺，用于使用最新的 Web 技術開發(fā)多語言的云端和桌面的 IDE。Theia 作為后起之秀，借鑒了 VSCode 的一些設計理念，發(fā)展到現(xiàn)在社區(qū)比較繁榮，背后是 Eclipse 基金會。Theia 從一開始就設計為在桌面和云上運行，Theia 本身就提供了一種模塊化構建 IDE 產(chǎn)品的能力，我們可以通過模塊的方式去定制 IDE，插件也兼容大部分的 VSCode 的插件。
要使用 Theia 也是比較簡單的，我們可以根據(jù)自己的需求去創(chuàng)建一個定制的文件，如下所示。
mkidr my-app && cd my-app
在目錄下創(chuàng)建一個 package.json 的文件，內容如下所示：
```json
{
"private": true,
"dependencies": {
"@theia/callhierarchy": "next",
"@theia/file-search": "next",
"@theia/git": "next",
"@theia/markers": "next",
"@theia/messages": "next",
"@theia/mini-browser": "next",
"@theia/navigator": "next",
"@theia/outline-view": "next",
"@theia/plugin-ext-vscode": "next",
"@theia/preferences": "next",
"@theia/preview": "next",
"@theia/search-in-workspace": "next",
"@theia/terminal": "next"
},
"devDependencies": {
"@theia/cli": "next"
}
}
Theia 應用程序和擴展是 Node.js 包，上面的文件顯示包的元數(shù)據(jù)，如名稱、版本、其運行時和構建時間依賴項等。作為應用程序的一部分，還可以使用 VSCode 擴展。如下所示：
```json
{
"private": true,
"dependencies": {
"@theia/callhierarchy": "next",
"@theia/file-search": "next",
"@theia/git": "next",
"@theia/markers": "next",
"@theia/messages": "next",
"@theia/navigator": "next",
"@theia/outline-view": "next",
"@theia/plugin-ext-vscode": "next",
"@theia/preferences": "next",
"@theia/preview": "next",
"@theia/search-in-workspace": "next",
"@theia/terminal": "next",
"@theia/vsx-registry": "next"
},
"devDependencies": {
"@theia/cli": "next"
},
"scripts": {
"prepare": "yarn run clean && yarn build && yarn run download:plugins",
"clean": "theia clean",
"build": "theia build --mode development",
"start": "theia start --plugins=local-dir:plugins",
"download:plugins": "theia download:plugins"
},
"theiaPluginsDir": "plugins",
"theiaPlugins": {
"vscode-builtin-extensions-pack": "https://open-vsx.org/api/eclipse-theia/builtin-extension-pack/1.50.1/file/eclipse-theia.builtin-extension-pack-1.50.1.vsix"
},
"theiaPluginsExcludeIds": [
"vscode.extension-editing",
"vscode.git",
"vscode.git-ui",
"vscode.github",
"vscode.markdown-language-features",
"vscode.microsoft-authentication"
]
}
然后我們直接使用 yarn 命令就可以安裝相關依賴，然后使用 Theia 命令來構建即可：
yarn theia build
構建后可以使用下面的命令來啟動應用：
yarn theia start --plugins=local-dir:plugins
當然也可以使用 Docker 來一鍵啟動：
docker run -it --init -p 3000:3000 -v "$(pwd):/home/project:cached" theiaide/theia-full:latest
Git 倉庫：https://github.com/eclipse-theia/theia。
3、OpenSumi
OpenSumi 是阿里&螞蟻聯(lián)合開源的 IDE 研發(fā)框架，基于 TypeScript 和 React 進行編碼，實現(xiàn)了包含資源管理器、編輯器、調試、Git 面板、搜索面板等核心功能模塊，開發(fā)者只需要進行簡單的配置，就可以快速搭建屬于自己的本地或云端 IDE 產(chǎn)品。和 Theia 類似，OpenSumi 也兼容了 VSCode 的插件生態(tài)，大部分的 VSCode 的插件都可以無縫在基于 OpenSumi 的 IDE 中運行。
OpenSumi 框架旨在解決阿里經(jīng)濟體內部 IDE 產(chǎn)品研發(fā)的重復建設問題，滿足 IDE 在更多垂直場景的定制能力，同時實現(xiàn) Web 與本地客戶端共用底層，讓 IDE 研發(fā)從早期的“刀耕火種”時代向“機器化大生產(chǎn)”時代邁進。
OpenSumi 支持三種模式：Web、Electron、純前端。比如 OpenSumi 提供的純前端版本，可以讓你脫離 node 的環(huán)境，在純?yōu)g覽器環(huán)境下，通過簡單的 B/S 架構提供相對完整的 IDE 能力。
同樣我們可以使用 Docker 來進行一鍵啟動：
# 拉取鏡像
docker pull ghcr.io/opensumi/opensumi-web:latest
# 運行
docker run --rm -d -p 8080:8000/tcp ghcr.io/opensumi/opensumi-web:latest
然后瀏覽器打開 http://127.0.0.1:8080 進行預覽或開發(fā)。OpenSumi 支持通過模塊的方式對界面主題、內置命令、菜單等基礎能力進行定制，我們可以根據(jù)自己的需求去定制屬于自己的 IDE。
Git 倉庫：https://github.com/opensumi/core。
