Eclipse Foundationがオープンソースで開発されている統合開発環境「Eclipse Theia 1.0」のリリースを発表しました。

www.publickey1.jp

Eclipse Theiaは、複数言語の開発環境であり、拡張可能なクラウド＆デスクトップの統合開発環境です。かなりVSCodeを意識しているようで、VSCodeの拡張機能を利用出来るらしい・・・。（詳しくは上記のリンク先を参照してもらえたらと）

ブラウザからコーディングができるIDEを社内で使用できないかと思い、Eclipse Cheをインストールしてみたりしたのですが、プロジェクトの依存関係で失敗したりとうまくいかず、挫折した経験があります。

この挫折経験から、このEclipse Theiaにはチョットキタイシテル。

ということで、早速インストールしてみます。インストール環境は、CentOS7です。

インストール手順は、公式ページを見ながら実施しました。

theia-ide.org

早速、インストールしてみる。

node.js のバージョン10とyarnをインストールする

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
$ . ~/.bashrc
$ nvm install 10
$ npm install -g yarn

python 2.X がインストールされていることを確認する

$ python --version
Python 2.7.5

空のディレクトリを作成、作成したディレクトリに移動する

$ mkdir my-app
$ cd my-app

package.jsonを作成し、以下の内容を記述する。

{
  "private": true,
  "dependencies": {
    "@theia/callhierarchy": "next",
    "@theia/file-search": "next",
    "@theia/git": "next",
    "@theia/json": "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"
  },
  "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-css": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix",
    "vscode-builtin-html": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix",
    "vscode-builtin-javascript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix",
    "vscode-builtin-json": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix",
    "vscode-builtin-markdown": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix",
    "vscode-builtin-npm": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/npm-1.39.1-prel.vsix",
    "vscode-builtin-scss": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/scss-1.39.1-prel.vsix",
    "vscode-builtin-typescript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-1.39.1-prel.vsix",
    "vscode-builtin-typescript-language-features": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/typescript-language-features-1.39.1-prel.vsix"
  }
}

依存関係をインストールし、ビルドする。

$ yarn
・・・
make: Entering directory `/home/vagrant/my-app/node_modules/nsfw/build'
  CXX(target) Release/obj.target/nsfw/src/NSFW.o
make: g++: Command not found
make: *** [Release/obj.target/nsfw/src/NSFW.o] Error 127
make: Leaving directory `/home/vagrant/my-app/node_modules/nsfw/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/vagrant/.nvm/versions/node/v10.19.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:191:23)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Linux 3.10.0-957.12.2.el7.x86_64
gyp ERR! command "/home/vagrant/.nvm/versions/node/v10.19.0/bin/node" "/home/vagrant/.nvm/versions/node/v10.19.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/vagrant/my-app/node_modules/nsfw

g++コマンドが見つからないとのエラーメッセージが出てたので、g++コマンドをyumコマンドでインストールする

yum install gcc-c++

yarn を再実行!!

$ yarn
・・・
Done in 94.83s.
yarn run v1.22.4
$ theia download:plugins
Downloading plugins...
Done in 0.80s.
Done in 240.05s.

ビルドを実行!!

$ yarn theia build
yarn run v1.22.4
$ /home/vagrant/my-app/node_modules/.bin/theia build
(node:5612) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

別のターミナルを起動し、起動コマンドを実行。ホストは、CentOS7のマシンのIPアドレス、ポート番号に8080を指定します。

$ yarn start /my-app --hostname 192.168.56.11 --port 8080
yarn run v1.22.4
$ theia start --plugins=local-dir:plugins /my-app --hostname 192.168.56.11 --port 8080
root WARN Backend Object.initialize is slow, took: 93.5 ms
root WARN Backend FileDownloadEndpoint.configure is slow, took: 62.9 ms
root INFO Configuring to accept webviews on '.+.webview..+' hostname.
root WARN The directory referenced by local-dir:/home/vagrant/.theia/plugins does not exist.
root WARN The directory referenced by local-dir:/home/vagrant/.theia/extensions does not exist.
root INFO Theia app listening on http://192.168.56.11:8080.
root INFO Deploy plugins list took: 91.6 ms

ブラウザから http://192.168.56.11:8080 にアクセスする。 f:id:kotapontan:20200403232211p:plain

デキタ!!

HTMLのコード補完も出来る。 f:id:kotapontan:20200403232239p:plain

まとめ

Eclipse Cheとは違って簡単にインストールすることが出来ました。見た目もかなりVSCodeを意識しているようで、というかほぼ一緒のような感じがします。 EclipseTheiaを使って、コーディングしてはいないので使い勝手は未知数ですが、まだチョットキタイシテル。明日にでも、Javaでコーディングしてみようと思います。

ヒトリ歩き

愚痴とかいろいろ書きます

Eclipse Theia 1.0 をインストールしてみた

早速、インストールしてみる。

まとめ