基于eclipse-theia开发ide

浪羽
512 阅读9分钟

基于eclipse-theia开发ide

项目框架

基于theia-blueprint作为基础框架开发，通过插件扩展ide功能，通过docker部署云端，或打包electron桌面端。 github.com/eclipse-the…

安装好基础环境，github.com/eclipse-the… 。

运行theia-blueprint

yarn && yarn build:dev && yarn download:plugins

yarn browser start

插件

插件架构几个核心点：

  • 基座框架中可通过npm包或git submodule的方式引入插件。
  • 插件框架通过官方脚手架创建，创建widget时，可以把react前端逻辑全部抽到render下，将前端页面封装为单一入口，实现前端页面逻辑与theia框架api逻辑分离。
  • 插件中@theia/core相关版本需和基座框架相同，版本号固定死，否则报错Cannot apply @injectable decorator multiple times.

theia开发基础环境

简单介绍，具体参考官方文档

Mac

安装gcc

brew install gcc

安装pkg-config

brew install pkg-config

Mac项目环境相关错误

python3安装，如果报错“# distutils not found when running npm install”

  • python3 -m pip install setuptools
  • brew install python-setuptools

错误：RequestError: connect ETIMEDOUT 20.205.243.166:443，或puppeteer安装错误

yarn过程中相关node_modules/electron的错误查看自己npm config和yarn config中是否有registry配置有问题，导致包下载有问题。

yarn start:browser启动项目时报错，升级或降级node版本，比如最新theia版本，官方要求18。

安装脚手架框架 Yeoman

文档：Yeoman 起步 | Yeoman 中文网

> sudo npm install -g yo

theia 插件

1.  安装插件脚手架 `@theia/plugin`

```
> sudo npm install -g @theia/generator-plugin
```

2.  根据脚手架创建插件开发工程

```
# 创建 插件 目录
> mkdir theia-plugin-demo
> cd theia-plugin-demo
> yo @theia/plugin
```

3.  运行下面的命令，打开浏览器 输入 http://localhost:3000

```
yarn watch && yarn start:browser
```

4.  修改保存后刷新浏览器可以更新

安装 theia extension 脚手架 generator-theia-extension

1.  安装 拓展 脚手架 `generator-theia-extension`

```
sudo npm install -g generator-theia-extension
```

2.  创建 extension 工程

```
# 创建 extension 工程目录
> mkdir theia-extension-demo
> cd theia-extension-demo
> yo theia-extension
```

3.  运行下面的命令，打开浏览器 输入 http://localhost:3000

```
yarn watch && yarn start:browser
```

在 package.json 文件内指定 拓展 包，·

{
    dependencies: {
        "拓展包名": "拓展包地址：可以是本地包路径，也可以是npm发布后，或者 git 地址"
    }
}

theia-blueprint指定的 @theia-core 版本和拓展包的 @theia-core 的版本最好设置为相同版本，避免出现加载失败的问题

如果安装错误，配置一下版本锁定：

"resolutions": {

    "**/@theia/application-manager": "1.50.1",

    "**/@theia/application-package": "1.50.1",

    "**/@theia/callhierarchy": "1.50.1",

    "**/@theia/cli": "1.50.1",

    "**/@theia/console": "1.50.1",

    "**/@theia/core": "1.50.1",

    "**/@theia/debug": "1.50.1",

    "**/@theia/editor": "1.50.1",

    "**/@theia/file-search": "1.50.1",

    "**/@theia/filesystem": "1.50.1",

    "**/@theia/git": "1.50.1",

    "**/@theia/keymaps": "1.50.1",

    "**/@theia/markers": "1.50.1",

    "**/@theia/messages": "1.50.1",

    "**/@theia/mini-browser": "1.50.1",

    "**/@theia/monaco": "1.50.1",

    "**/@theia/navigator": "1.50.1",

    "**/@theia/outline-view": "1.50.1",

    "**/@theia/output": "1.50.1",

    "**/@theia/plugin-dev": "1.50.1",

    "**/@theia/plugin-ext": "1.50.1",

    "**/@theia/plugin-ext-vscode": "1.50.1",

    "**/@theia/plugin-metrics": "1.50.1",

    "**/@theia/preferences": "1.50.1",

    "**/@theia/process": "1.50.1",

    "**/@theia/scm": "1.50.1",

    "**/@theia/scm-extra": "1.50.1",

    "**/@theia/search-in-workspace": "1.50.1",

    "**/@theia/task": "1.50.1",

    "**/@theia/terminal": "1.50.1",

    "**/@theia/typehierarchy": "1.50.1",

    "**/@theia/userstorage": "1.50.1",

    "**/@theia/variable-resolver": "1.50.1",

    "**/@theia/vsx-registry": "1.50.1",

    "**/@theia/workspace": "1.50.1",

    "**/@theia/electron": "1.50.1",

    "**/@eclipse-glsp/client": "1.1.0-next.7ff1b00.184",

    "**/@eclipse-glsp/protocol": "1.1.0-next.7ff1b00.184",

    "**/@eclipse-glsp/theia-integration": "1.1.0-next.7f1c788.133",

    "**/@eclipse-emfcloud/modelserver-client": "0.8.0-next.f8faca93",

    "**/@eclipse-emfcloud/modelserver-theia": "0.8.0-next.f8faca93",

    "**/@eclipse-emfcloud/theia-tree-editor": "0.7.0-next.4b9e870",

    "**/sprotty": "0.12.0",

    "**/sprotty-protocol": "0.12.0",

    "**/sprotty-theia": "0.12.0",

    "**/react": "^18.2.0",

    "**/react-dom": "^18.2.0",

    "**/@jsonforms/core": "3.0.0",

    "**/@jsonforms/react": "3.0.0",

    "**/@jsonforms/vanilla-renderers": "3.0.0",

    "**/theia-toolbar-extension": "0.1.4"

  }

常见错误处理

Error: module did not self-register while starting browser or electron app

image.png

修改browser-app和electron-app下"rebuild"为 "theia rebuild:electron --cacheRoot .."，参考github.com/eclipse-the…

Looks like the issue comes from the fact that the cacheRoot argument for theia rebuild:browser and theia rebuild:electron needs to point to the same folder. Currently it does not (in the theia blueprint repo), which means that the following happens:

  • theia rebuild:electron backs up native modules inside electron-app folder and writes into workspace root node_modules folder
  • subsequently calling theia rebuild:browser in the browser-app folder. It looks for the backups inside the specified cacheRoot directory (browser-app in this case) and cannot find it since its been saved inside the electron-app folder. Thus it performs the rebuild without restoring.
  • build and start the browser app: theia build && theia start. Now it is broken.

A quick workaround would be modifying the yarn rebuild script target to point cacheRoot to a common location like application folder in theia blueprint. Regardless, I think the cacheRoot argument need a better description in the theia cli. What's currently written there doesn't make a lot of sense.

Puppetter 安装错误

ERROR: Failed to download Chromium r722234! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

puppetter安装就踩坑-解决篇 - 掘金

方案一：设置下载镜像

puppeteer_download_host = https://npm.taobao.org/mirrors

方案二：官方建议设置环境变量 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 忽略浏览器的下载

export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

Electron的包下载失败

export electron_mirror="https://npm.taobao.org/mirrors/electron/"

Theia-blueprint 工程 electron-chromedriver@9.0.0下载失败，错误404

该库的 9.0.0 的发布版本包找不到，升级到最新版本可以解决

插件或者拓展运行失败的原因

1.  端口被占用

```
> lsof -i:3000
> kill -9 占用端口的进程
```

2.

【mac环境】theia-blueprint运行错误：yarn electron package:preview报错

cannot execute  cause=exit status 1
                    out=$ node scripts/install.js
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

                    errorOut=gyp info it worked if it ends with ok
    gyp info using node-gyp@9.0.0
    gyp info using node@16.15.0 | darwin | x64
    gyp info find Python using Python version 3.8.9 found at "/Applications/Xcode.app/Contents/Developer/usr/bin/python3"
    gyp http GET https://electronjs.org/headers/v15.5.2/node-v15.5.2-headers.tar.gz
    gyp WARN install got an error, rolling back install
    gyp ERR! configure error 
    gyp ERR! stack FetchError: request to https://www.electronjs.org/headers/v15.5.2/node-v15.5.2-headers.tar.gz failed, reason: connect ETIMEDOUT 151.101.73.41:443
    gyp ERR! stack     at ClientRequest.<anonymous> (/Users/xiedong/.nvm/versions/node/v16.15.0/lib/node_modules/npm/node_modules/minipass-fetch/lib/index.js:130:14)
    gyp ERR! stack     at ClientRequest.emit (node:events:527:28)
    gyp ERR! stack     at TLSSocket.socketErrorListener (node:_http_client:454:9)
    gyp ERR! stack     at TLSSocket.emit (node:events:539:35)
    gyp ERR! stack     at emitErrorNT (node:internal/streams/destroy:157:8)
    gyp ERR! stack     at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
    gyp ERR! System Darwin 21.5.0
    gyp ERR! command "/Users/xiedong/.nvm/versions/node/v16.15.0/bin/node" "/Users/xiedong/.nvm/versions/node/v16.15.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
    gyp ERR! cwd /Users/xiedong/theia/theia-blueprint/node_modules/node-pty
    gyp ERR! node -v v16.15.0
    gyp ERR! node-gyp -v v9.0.0
    gyp ERR! not ok 
    error Command failed with exit code 1.
    
                    command=/Users/xiedong/.nvm/versions/node/v16.15.0/bin/node /Users/xiedong/.nvm/versions/node/v16.15.0/lib/node_modules/yarn/bin/yarn.js run install
                    workingDir=/Users/xiedong/theia/theia-blueprint/node_modules/node-pty
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解决办法：重装本地xcode commandline tool

删除及重新安装

sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install

问题：通过 yo @theia/plugin 创建 插件后报错

解决方案：

typescript 版本和 node版本不匹配的原因，修改package.json里的typescript版本改为latest

展开

问题：【mac环境】theia-blueprint运行错误：yarn electron package报错

 • building        target=macOS zip arch=x64 file=dist/TheiaBlueprint-1.26.0-mac.zip
  • building embedded block map  file=dist/TheiaBlueprint-1.26.0-mac.zip
  ⨯ Exit code: ENOENT. spawn /usr/bin/python ENOENT  stackTrace=
                            Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT
                            at /Users/roy/study/theia/theia-blueprint/node_modules/builder-util/src/util.ts:129:16
                            at exithandler (node:child_process:406:5)
                            at ChildProcess.errorhandler (node:child_process:418:5)
                            at ChildProcess.emit (node:events:527:28)
                            at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
                            at onErrorNT (node:internal/child_process:478:16)
                            at processTicksAndRejections (node:internal/process/task_queues:83:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解决方案：

修改python环境变量

修改electron-builder版本为23.0.2,后重新拉取依赖再打包。

Error: No matching bindings found for serviceIdentifier: LocalizationProvider

原因：项目内引入了原生模块，需要重新编译一遍

cd applications/electron
# 或者 cd applications/browser

electron-rebuild

参考

inversifyJS

IoC和DI的基本概念及InversifyJS入门 - 掘金

Theia

Eclipse Theia学习(一):如何设计一款借鉴Theia的插件扩展功能的Electron桌面应用程序? - 掘金

带你学习inversify.js系列 - inversify基础知识学习

VScode 插件中package.json 文件中 Contribution 字段配置详解 - 掘金

Windows环境下的环境搭建部分介绍

windows建议使用windows 10系统，11上安装可能有问题。

此windows下的环境安装总体参考GitHub下的*Building on Windows*。

安装scoop

打开PowerShell，并输入如下命令；

iwr -useb get.scoop.sh | iex
或者 
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

需要注意的是，如果当前用户是Windows的administrator账户，会提示报错，需要用户新建一个新的账户（可以是本地管理员账户）；

中途遇到需要修改PowerShell的安全策略或其他问题，可参考*此文档*；

如果需要安装aria2请参考*此文档* ；

安装nvm

使用scoop安装nvm;

scoop install nvm

安装node.js

使用nvm安装node.js;

在这里可能会遇到安装好nvm后node生效但npm无效的问题，我采用的方法是卸载掉之前的安装，重新去node官网下载安装，问题解决；

安装yarn

使用scoop安装yarn；

scoop install yarn

在安装yarn后以管理员身份运行PowerShell并复制以下命令运行；

npm --add-python-to-path install --global --production windows-build-tools

安装其他

在上一步的windows-build-tools安装中，实际上是安装的python、Visual Studio`` Build Tools 和.net framework 4.5.1（在较新的node版本中也自带一些跨语言支持），但是其安装的版本可能和theia需要的版本不一致，按照theia文档，其需要的环境为：

  • Python 3.6 or higher
  • Visual Studio ``build tools`` 17

你可以检查一下你的环境中，对应程序的版本是否符合上述条件，这里给出Visual Studio ``build tools`` 17安装包（Visual Studio中会集成此环境，但我们可能不需要Visual Studio，轻量化安装 Visual Studio ``build tools即可），可以按需下载安装，python则去官网直接下载合适版本即可；

同样，如果你的环境中有多个python版本或 Visual Studio ``build tools版本，可以使用

npm config set python /path/to/executable/python --global

npm config set msvs_version 2017 --global

来配置合适的版本；

scoop安装git

问题及其他

如果你在安装过程中遇到任何问题，都可以将其记录在此：

问题：在安装scoop时，PowerShell提示报错，如下：

使用“1”个参数调用“DownloadString”时发生异常:“无法连接到远程服务器”
所在位置 行:1 字符: 1
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
  + CategoryInfo          : NotSpecified: (:) [], MethodInvocationException
  + FullyQualifiedErrorId : WebException

解决方法：使用gtee和搭桥的方法

iex (new-object net.webclient).downloadstring('https://gitee.com/RubyKids/scoop-cn/raw/master/install.ps1')

此时又出现一个提示，如下

PowerShell requires an execution policy in [Unrestricted, RemoteSigned, ByPass] to run Scoop.
For example, to set the execution policy to 'RemoteSigned' please run :
'Set-ExecutionPolicy RemoteSigned -scope CurrentUser'

这时需要修改PowerShell的安全策略，执行如下语法：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

随后输入Y确认，此时环境已经被改了

接下来在执行

iex (new-object net.webclient).downloadstring('https://gitee.com/RubyKids/scoop-cn/raw/master/install.ps1')

就开始安装scoop了

验证，在powershell输入scoop help，可以查看scoop相关内容

其他解决办法，借鉴 这里

error TS1005: '?' expected

在安装依赖时出现以下或类似的类型错误

node_modules/@types/lodash/common/object.d.ts(1026,46): error TS1005: '?' expected

主要考虑是依赖的类型定义文件版本和typescript的版本不一致导致的，或更新依赖版本或更新Typescript版本，Theia可能不止一个依赖有这个问题，推荐更新Typescript版本。在package.json文件中加入

{
...,
"devDependencies": {
    ...,
    "typescript": "~5.3.2"
  },
}
avatar
文章
阅读
粉丝