VSCodeは宇宙で最も強力なIDEと謳われており、通常はローカルクライアントとして利用しています。では、Web IDEの選択肢はあるのでしょうか？実は、VSCodeバージョン1.40以降では、Web版のVSCodeをコンパイルできるようになりました。VSCodeの公式ウェブサイト（https://vscode.dev/）でもオンラインIDEを提供しています。

オリジナルのVSCodeコードをベースにしたWebサービスの構築と実行以外にも、VSCodeをベースにした優れたWeb IDEプロジェクトがいくつかあります。次は、それらを見ていきましょう。

1. コードサーバー

code-serverは、Coder (https://coder.com/) のVSCodeをベースにしたオープンソースプロジェクトです。ユーザーはブラウザ経由でリモートサーバー上のVSCodeにアクセスできます。ブラウザ上で管理されたWebサービスとして動作するように特別に設計・最適化されています。

コード サーバーの使用には多くの利点があります。

• いつでもどこでもコードを書ける：タブレットやノートパソコンでも、一貫した開発環境を使ってコードをセットアップできます。Linuxコンピューターで開発し、Webブラウザ経由であらゆるデバイスからアクセスできます。
• クラウド サーバー サポート: 大規模なクラウド サーバーを活用して、テスト、コンパイル、ダウンロードなどのプロセスを高速化します。

code-server を実行するための最小サーバー要件は、1GB のメモリと 2 つの CPU を搭載した Linux マシンです。

code-server のインストールも非常に簡単です。次のスクリプト コマンドを実行するだけでワンクリックでインストールできます。

 curl -fsSL https://code-server.dev/install.sh | sh

ただし、一般的には、デプロイメントには Docker または Kubernetes を使用することをお勧めします。

 # これにより、コードサーバーコンテナーが起動され、 http : //127.0.0.1:8080 で公開されます。
 # 現在のディレクトリもコンテナに` / home / coder / project` としてマウントされます
# そして、 すべてのファイルシステム操作が外部のユーザーとして実行されるようにUID / GID を転送します。
 # コンテナ。
 #
 # $ HOME / . config はコンテナ内の$ HOME / . config にマウントされ、
 # $ HOME /.config/code-server/config.json にあるコードサーバー構成に簡単にアクセス/ 変更できます​ ​ ​ ​
 # コンテナの外側。
 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 / コード- サーバー: 最新

Git リポジトリ: https://github.com/coder/code-server。

2. エクリプス・テイア

Theiaは、最新のWebテクノロジーを活用した多言語クラウドおよびデスクトップIDEを開発するためのスケーラブルなプラットフォームです。比較的新しいTheiaは、VSCodeからいくつかの設計原則を借用しており、Eclipse Foundationの支援を受けた活発なコミュニティへと発展しました。デスクトップとクラウドの両方で動作するように最初から設計されたTheiaは、IDE製品を構築するためのモジュール式のアプローチを提供し、モジュールによるカスタマイズとほとんどのVSCodeプラグインとの互換性を実現します。

Theiaの使い方は非常に簡単です。以下のように、ニーズに合わせてカスタムファイルを作成できます。

 mkidr my - app && cd my - app

ディレクトリに次の内容を含む package.json という名前のファイルを作成します。

 JSON
 {
 「プライベート」 ： true
 「依存関係」 : {
 "@theia/callhierarchy" : "次へ" 、
 "@theia/file-search" : "次へ" ,
 "@theia/git" : "次へ" 、
 "@theia/markers" : "次へ" 、
 "@theia/messages" : "次へ" ,
 "@theia/ミニブラウザ" : "次へ" ,
 "@theia/navigator" : "次へ" ,
 "@theia/outline-view" : "次へ" ,
 "@theia/plugin-ext-vscode" : "次へ" 、
 "@theia/preferences" : "次へ" 、
 "@theia/preview" : "次へ" 、
 "@theia/ワークスペース内検索" : "次へ" ,
 "@theia/terminal" : "次へ"
 },
 「devDependencies」 : {
 「@theia/cli」 ： 「次へ」
 }
 }

Theiaアプリケーションと拡張機能はNode.jsパッケージです。上記のファイルには、パッケージの名前、バージョン、ランタイムおよびビルド時の依存関係などのメタデータが表示されます。アプリケーションの一部として、以下に示すようにVSCode拡張機能も使用できます。

 JSON
 {
 「プライベート」 ： true
 「依存関係」 : {
 "@theia/callhierarchy" : "次へ" 、
 "@theia/file-search" : "次へ" ,
 "@theia/git" : "次へ" 、
 "@theia/markers" : "次へ" 、
 "@theia/messages" : "次へ" ,
 "@theia/navigator" : "次へ" ,
 "@theia/outline-view" : "次へ" ,
 "@theia/plugin-ext-vscode" : "次へ" 、
 "@theia/preferences" : "次へ" 、
 "@theia/preview" : "次へ" 、
 "@theia/ワークスペース内検索" : "次へ" ,
 "@theia/terminal" : "次へ" 、
 「@theia/vsx-registry」 : 「次へ」
 },
 「devDependencies」 : {
 「@theia/cli」 ： 「次へ」
 },
 「スクリプト」 : {
 「準備」 : 「yarn run clean && yarn build && yarn run download:plugins」 、
 「クリーン」 ： 「theia clean」
 「ビルド」 : 「theia ビルド --mode 開発」 、
 「開始」 : 「theia 開始 --plugins=local-dir:plugins」 、
 「ダウンロード:プラグイン」 : 「theia ダウンロード:プラグイン」
 },
 "theiaPluginsDir" : "プラグイン" ,
 「theiaプラグイン」 : {
 「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.拡張機能編集」
 「vscode.git」 、
 「vscode.git-ui」 、
 「vscode.github」
 「vscode.markdown-言語機能」 、
 「vscode.microsoft-認証」
 ]
 }

次に、`yarn` コマンドを直接使用して関連する依存関係をインストールし、`Theia` コマンドを使用してビルドします。

 ヤーン・テイア・ビルド

ビルド後、次のコマンドを使用してアプリケーションを起動できます。

 yarn theia start --plugins = local - dir : plugins

もちろん、Docker を使用してワンクリックで起動することもできます。

 docker run -it --init -p 3000 : 3000 -v "$(pwd):/home/project: cached " theiaide / theia - full : 最新

Git リポジトリ: https://github.com/eclipse-theia/theia。

3. オープンスミ

OpenSumiは、AlibabaとAnt Financialが共同開発したオープンソースのIDE開発フレームワークです。TypeScriptとReactをベースとし、リソースマネージャー、エディター、デバッガー、Gitパネル、検索パネルなどのコア機能モジュールを実装しています。開発者はシンプルな設定で、ローカルまたはクラウドベースの独自のIDE製品を迅速に構築できます。Theiaと同様に、OpenSumiはVS Codeプラグインエコシステムと互換性があり、ほとんどのVS CodeプラグインはOpenSumiベースのIDEでシームレスに動作します。

OpenSumi フレームワークは、Alibaba エコシステム内での IDE 製品の冗長開発の問題を解決し、より垂直的なシナリオでの IDE のカスタマイズ ニーズを満たし、Web クライアントとローカル クライアントが同じ基礎レイヤーを共有できるようにすることで、IDE 開発を初期の「原始的」時代から「機械化された大量生産」時代へと移行させることを目的としています。

OpenSumiは、Web、Electron、そして純粋なフロントエンドの3つのモードをサポートしています。例えば、OpenSumiの純粋なフロントエンドバージョンでは、Node.js環境外での操作が可能で、純粋なブラウザ環境におけるシンプルなB/Sアーキテクチャを通じて、比較的包括的なIDE機能を提供します。

同様に、Docker を使用してワンクリック起動を行うこともできます。

 # プルミラー
docker pull ghcr .io / opensumi / opensumi - web : 最新

#実行
docker run --rm -d -p 8080 : 8000 / tcp ghcr .io / opensumi / opensumi - web : 最新​

次に、ブラウザで http://127.0.0.1:8080 を開いてプレビューまたは開発を行ってください。OpenSumi は、インターフェーステーマ、組み込みコマンド、メニューなどの基本機能をモジュールを通じてカスタマイズできるため、ニーズに合わせて独自の IDE をカスタマイズできます。

Git リポジトリ: https://github.com/opensumi/core。