阿里&螞蟻聯合開源的 IDE 研發框架 - OpenSumi

作者：Github愛好者 2022-07-05 07:59:00

code-server 是 Coder 公司（ https://coder.com/ ）基于VSCode的開源項目，可以實現通過瀏覽器訪問在遠程服務器上的 VSCode，專門為瀏覽器做了設計優化，以便作為可托管的 Web 服務來運行。

VSCode 號稱宇宙最強 IDE，平時我們基本上都是在以本地客戶端的方式來使用的，那么有沒有 WEB IDE 的方式呢？其實從 VSCode 1.40 版本開始我們已經可以編譯出 Web 版的 VSCode 了，VSCode 官方也提供了一個在線的 IDE：https://vscode.dev/。

除了基于原始的 VSCode 代碼構建 Web 服務來運行之外，其實還有一些比較優秀的基于 VSCode 的 WEB IDE 項目，接下來我們就來和大家盤點下。

1、code-server

使用 code-server 具有很多的優勢：

隨時隨地編寫代碼：使用一致的開發環境，在平板電腦和筆記本電腦上設置代碼。在 Linux 計算機上進行開發，然后通過 Web 瀏覽器從任何設備中獲取。
云服務器支持：利用大型云服務器加快測試、編譯、下載等速度。

要運行 code-server 最低的服務器要求是 1GB 內存和 2CPU 的 Linux 機器。

要安裝 code-server 也非常簡單的，只需要執行下面的腳本命令即可一鍵安裝：

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 技術開發多語言的云端和桌面的 IDE。Theia 作為后起之秀，借鑒了 VSCode 的一些設計理念，發展到現在社區比較繁榮，背后是 Eclipse 基金會。Theia 從一開始就設計為在桌面和云上運行，Theia 本身就提供了一種模塊化構建 IDE 產品的能力，我們可以通過模塊的方式去定制 IDE，插件也兼容大部分的 VSCode 的插件。

要使用 Theia 也是比較簡單的，我們可以根據自己的需求去創建一個定制的文件，如下所示。

mkidr my-app && cd my-app

在目錄下創建一個 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 包，上面的文件顯示包的元數據，如名稱、版本、其運行時和構建時間依賴項等。作為應用程序的一部分，還可以使用 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 是阿里&螞蟻聯合開源的 IDE 研發框架，基于 TypeScript 和 React 進行編碼，實現了包含資源管理器、編輯器、調試、Git 面板、搜索面板等核心功能模塊，開發者只需要進行簡單的配置，就可以快速搭建屬于自己的本地或云端 IDE 產品。和 Theia 類似，OpenSumi 也兼容了 VSCode 的插件生態，大部分的 VSCode 的插件都可以無縫在基于 OpenSumi 的 IDE 中運行。

OpenSumi 框架旨在解決阿里經濟體內部 IDE 產品研發的重復建設問題，滿足 IDE 在更多垂直場景的定制能力，同時實現 Web 與本地客戶端共用底層，讓 IDE 研發從早期的“刀耕火種”時代向“機器化大生產”時代邁進。

OpenSumi 支持三種模式：Web、Electron、純前端。比如 OpenSumi 提供的純前端版本，可以讓你脫離 node 的環境，在純瀏覽器環境下，通過簡單的 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 進行預覽或開發。OpenSumi 支持通過模塊的方式對界面主題、內置命令、菜單等基礎能力進行定制，我們可以根據自己的需求去定制屬于自己的 IDE。

Git 倉庫：https://github.com/opensumi/core。

責任編輯：姜華來源： Github愛好者

VSCode 開源項目