Using VS Code extensions in Eclipse Theia and Che

Using VS Code extensions in Eclipse Theia and Che

In this article series we provide an overview on how to get started with Eclipse Theia and Che. In this particular article, we describe how to install and use VS Code extensions/plugins in the Eclipse Theia IDE and Che.

In case you are wondering what Eclipse Theia is, please see here for an introduction to Theia and here for the relationship between 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. “The same” means that this is still work-in-progress. The Theia plugin API does miss some features compared to VS code, but the coverage is already pretty good and progressing well. As a consequence you can install and use many VS Code plugins in Theia without any modification! This leads us to the next topic.

How to install VS Code extension/plugins into Theia

As an example, let us install one of the most popular VS Code extensions into Eclipse Theia: Language Support for Java(TM) by Red Hat. To enable plugins in general and VS Code plugins in particular, you first need to add two extensions to your Eclipse Theia instance, which are listed below (please see this article for more details on how to add extensions to Theia).

{
  "private": true,
  "dependencies": {
    "...": "...",
    "@theia/plugin-ext": "latest",
    “@theia/plugin-ext-vscode”: “latest”

  }

After you have activated these extensions, you can use the command bar in Theia to install plugins. As described in this article, there are several sources, such as the file system or GitHub, the “plugin-ext-vscode” extension adds another source: the VS Code Marketplace. To install something from the Marketplace into Eclipse Theia, you could use the prefix “vscode:extension/” followed by the ID of the VS Code extension. This ID can be found in the marketplace. E.g. for the “Language Support for Java” plugin, the ID is “redhat.java” (see here). The following command would install the ESLint extension into Theia (although you should not do this, see below):

F1 = > Plugin: Deploy Plugin by Id
vscode:extension/redhat.java

However, this way of installing an extension from the VS Code marketplace is currently forbidden by its terms of use, which only allow to install content from the marketplace into VS Code. As a work around, you can get the respective VS Code extensions from its original source and install it from a custom location, i.e. the file system or a http location.

As depicted below, this will activate “Language Support for Java” in Eclipse Theia:

Install a VS Code extension into the Eclipse Theia IDE

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.

Install a VS Code extension into the Eclipse Che

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:

Install a Che-Theia plugin into the Eclipse Che

Conclusion

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 these features are still early access, so 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 service offering for web-based tools or tools in general and please get in contact with us!

Finally, if you are interested in future parts of this series, e.g. how to extend Eclipse Theia and how to customize, please follow us on Twitter, we will publish the next parts of this article series soon.

No Comments

Post a Comment

Comment
Name
Email
Website

By publishing a comment, you accept the Terms of Use and the Privacy Policy

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.