Theia 深度潜水,第 2 部分:掌握定制化

这是一篇关于自定义 Theia IDE 的文章,主要内容如下:

  • 基本设置:在第一部分中,设置了 Theia 的基本功能,使其能在浏览器中运行、插件工作、加载主题和图标,还添加了启动画面,得到了一个功能性的 IDE,但仍较接近原始状态。
  • 移除默认贡献:通过创建contribution-filters.ts文件和RemoveFromUIFilterContribution类,利用 Theia 的内置机制过滤不需要的贡献,如测试相关的贡献等,并在index.ts中调用registerFilters注册过滤器,移除不需要的功能后需运行Reset Workbench Layout命令。
  • 添加和移除命令与菜单:创建commands-contribution.ts文件和MyCommandsContribution类,注册新的命令和菜单,如删除一些与工作区相关的命令、移除帮助菜单等,并在index.ts中调用initCommands注册命令和菜单贡献,以清理不需要的功能并按喜好重新排列操作和菜单项。
  • 禁用打开编辑器部件:通过创建navigator-widget-factory.ts文件和NavigatorWidgetFactory类,覆盖createWidget方法,注释掉创建打开编辑器部件的代码,只保留文件浏览器部件,并使用 InversifyJS 替换 Theia 的NavigatorWidgetFactory,还对文件浏览器部件的标题设置进行了修改,以防止其从操作栏中删除,并防止用户看到服务器上的临时文件夹名称。
  • 移除输出中的不必要操作:创建output-toolbar-contribution.ts文件和OutputToolbarContribution类,覆盖registerToolbarItems方法,移除输出部件右侧的清除和锁定图标,并覆盖closable标志,防止输出部件的标题栏关闭。
  • 禁止面板移动:创建application-shell.ts文件和ApplicationShell类,在init方法中重置右侧和底部面板的参数,防止其被拖动和调整大小,重写getInsertionOptions方法将右侧替换为左侧,在handleEvent方法中拦截和阻止侧边面板之间的拖放事件,在restrictDragging方法中防止从底部面板拖动和放下部件,并在commands-contribution.ts文件中禁用垂直拆分命令,以完全禁止除水平方向外的拆分功能。
  • 设置默认外壳参数:创建ShellInitContribution类,在openDefaultLayout方法中强制创建并放置浏览器、搜索和输出部件到正确的位置,并在onStart方法中等待编辑器加载完成后添加theia-app-ready类,以用于后续的 CSS 管理。
  • 移除左侧面板:通过创建side-panel.less文件和修改SidePanelHandler类,将侧边栏移动到顶部,防止移动图标,禁用折叠功能,并创建新的容器布局,包含标题面板、工具栏和停靠面板,以实现更简洁的界面设计。
  • 实现多岛风格:在ApplicationShell类的createLayout方法中添加创建自定义布局的代码,通过设置间距创建面板之间的缩进,并创建application-shell.less文件设置全局背景、边框和样式,以实现类似 IntelliJ IDEA 的新 beta UI 风格。

最终得到了一个干净、简约且现代的云 IDE 界面,并提供了一个CodeSandbox 演示和相关的 Theia GitHub 仓库讨论区供参考和提问。

阅读 29
0 条评论