The Eclipse Theia IDE is an open source platform to build web- and cloud-based tools, as an alternative to VS Code. However, Theia is compatible to VS Code in terms of extensions. In this article, we describe how to install and use VS Code plugins in the Eclipse Theia IDE and Eclipse Che (which uses Theia as the default IDE).
In case you are wondering what Eclipse Theia is, please see here for an introduction to Theia, our FaQ about Theia, here for a comparison between Eclipse Theia and VS Code and here for the relationship between Eclipse Theia and Che.
Let us dive right into the first question in the following section.
What is the relationship between VS Code plugins and Eclipse Theia/Che?
Theia provides two mechanisms to add new features to it: extensions and plugins (see here for the difference and more details on Eclipse Theia extensions and plugins). The API available to plugins in Theia is actually the same as the one VS Code provides for its extensions. As a consequence you can install and use many VS Code plugins in Theia without any modification! This is a major advantage, as it allows to use the huge ecosystem of VS Code extensions in Eclipse Theia, too. This leads us to the next topic.
How to install VS Code extension/plugins into Theia
In this section, we will provide details on how to install VS Code extension into Theia at runtime. VS Code extensions can be installed from openVSX, aka as “Theia extension marketplace” or “Theia Registry”.
If you use Theia Blueprint or a tool based on Theia, please see this documentation on how to install VS Code extensions from the “Theia marketplace”.
Please note that the creators of your Theia-based tool must have enabled this option, see here for more details.
Please note that you also directly let Theia install VS Code extensions by default and on start up. Those “built-in” extensions are also shown in the VSX UI, as you can see above. Please see this article on more details on how to add extensions and plugins to Theia.
So now that we have covered VS Code extension in Theia, let us move on to Che.
How to install VS Code extensions/plugins into Che
If you run Theia within Che, you can actually use the same mechanism as described above. Additionally, Che provides a “Che plugin view” in Theia, which features a more comprehensive UI for the management of plugins. It allows you to select from a precompiled list of plugins from a Che specific plugin registry. Further it allows to add custom registries, e.g. company specific ones.
However VS Code extension often requires underlying tools to be available. As an example the ESLint extension requires ESLint to be installed via npm first. Vanilla Theia will not do that for you. If you use Theia within Eclipse Che, you can alternatively use the Eclipse Che plugin mechanism (see here for more details on Eclipse Che-Theia plugins). As Che plugins can also contain runtime components, they typically bundle everything you need in order to use a certain tool into a single Che plugin. The advantage is that you don’t have to install anything else other than the Che plugin. The disadvantage is that you can only use what is explicitly provided as a Theia-Che plugin and not any plugin from any marketplace or registry. However, the list of Theia-Che plugins in continuously growing and the team welcomes contributions too. Additionally, you can define your own plugin registry and add any available VS Code extension with its runtime dependencies. Please see here for more details on VS Code extensions in Eclipse Che. Please note that you can also add plugins when configuring a workspace, before you launch it:
The ability to install VS Code extensions in Eclipse Theia and Che is a very powerful enabler. It allows users of Theia to access the comprehensive ecosystem around VS Code. Please note that there are probably a few VS Code extensions which don’t work out of the box. The main challenge is to test as many VS Code extensions with Theia as possible. This is where you can help the team and provide feedback. So if you are interested in using a VS Code extension in Theia, please follow this guide on how to test them and how to create feedback.
If you need support in making your favorite VS Code extension work in Eclipse Theia, or you want to create your own VS Code extension which is compatible with Theia, want to provide a custom product based on Eclipse Theia or Che, need general support and advice on Eclipse Theia, then have a look at our consulting and service offering for Eclipse Theia, for Eclipse Che for web-based tools or tools in general and please get in contact with us!
Finally, if you are interested in future articles on the topic, e.g. how to extend Eclipse Theia and how to customize it, please follow us on Twitter, we will publish the next parts of this article series soon.