Oct 19th 2017

Theia update - extensions, Git support & more

Sven EfftingeSven Efftinge

Back in May, we announced a new open-source IDE framework for build Desktop & Cloud IDEs implemented in TypeScript. Since then, Theia has become more mature and feature rich, approaching its BETA release on December 6.

During the last couple of months, the Theia developers (we count 19 contributors so far with two companies backing up the development) have been busy laying out important groundwork as well as implementing features. In this post, I want to give you an overview of the current state.

Parts of this post are outdated.

The features mentioned here are no longer supported directly by Theia, but are contributed via the VS Code extension API.

Extension system

Besides being able to run both a desktop and a cloud IDE from the same source code, an extendable platform has been one of the primary motivations for Theia. We had mainly two requirements:

  • Extensions should be first class citizens An extension should be able to contribute and change any aspect of a Theia-based application. The goal really is to allow developers to compose custom products from extensions. Therefore, in Theia, everything is an extension. So even in the core, we eat our own dog food. This is different to e.g. VS Code which runs extensions in an isolated sandbox with only a limited API exposed.
  • Discover and Install Extensions The other requirement was to allow users to change the set of installed extensions at runtime, by searching a registry/marketplace and installing/updating/removing extensions. This is very common, but e.g. Eclipse Che does not support such a feature yet.

The extension system has been one of the most important tasks, as it lays out how future development can scale and an eco-system can grow. Therefore another important goal was to make it as simple as possible and rely on existing knowledge and widely used concepts.

Theia extensions are regular Node.js packages which you publish to npmjs.or or another npm registry. To turn your package into a Theia extension, you only need to add minimal information to the package.json. At the core, we use dependency injection (InversifyJS) to wire the contributions from all extensions together. Theia comes with a CLI tool that makes it easy to create an application from a list of extensions.

The dynamic part that allows to install and uninstall extensions at runtime, really just changes the list of extensions and runs the CLI again. When an extension has been successfully installed it informs the user that the application has been updated and restarted. After a quick reload the new extensions is ready to be used.

Furthermore, for extension developers we’ve created a small Yeoman generator that gets you started with the initial project setup. You can find more detailed documentation here.

Extension manager in Theia

Watch a quick demo on YouTube

Git support

Another new extension is the Git extension, that supports the user to author commits and execute basic git commands. It is very similar to the git support in VS Code, so you can

  • see the list of local and staged changes,
  • open diff editors to see more details and
  • execute standard git operations.

Under the hood, the extension uses GitHub’s dugite library, which we extended a bit. Here’s a short screencast showing it in action:

Diff view in Theia

Watch a quick demo on YouTube

Language tooling

Intelligent support for languages is one of the main features an IDE absolutely needs to have. With Theia, we decided to primarily support the Language Server Protocol. By integrating the awesome Monaco editor, which also drives VS Code, we already have an excellent foundation. Today, Theia has full support for the LSP and we even have additional extensions for some languages. For instance, in Java one can navigate to files contained in jars.

All 46 available language servers will work fine in Theia, we just haven’t wrapped all of them in a Theia extension for easy consumption, yet. As of today, the following languages are supported:

  • Java
  • JavaScript / TypeScript
  • Python
  • C/C++ (Clangd in development)
  • Go
  • YANG

The list of features Theia supports includes:

  • content assist
  • find references
  • go to definition
  • diagnostics (incl. a problems-view listing all of them)
  • outline
  • quick outline
  • hover
  • signature help
  • formatting
  • rename refactoring
  • syntax coloring
  • folding
  • bracket matching
  • toggle comment
  • code lenses

There are many more important editing features, provided by Monaco, such as moving lines, multi cursor support and so on. Also, Theia has gained lots of other smaller nice goodies, like the quick command palette, preference support or the open file command.

Quick Open in Theia

Furthermore, the colleagues from Ericsson are actively working on managing processes, debugging support and other useful extensions.

Summary

Theia has advanced to a solid foundation for future browser and desktop IDEs. If you were looking for an easy-to-use, open-source framework to build extendable IDEs, you can consider Theia now. Have a look at the backlog to get an idea of what we want to accomplish in the next weeks. Besides using Theia for your own projects/products we are welcoming any kind of contribution. If you want to get involved with Theia, please ping us on GitHub or Gitter (or StackOverflow, Twitter, etc.). There are many fun things to work on and some are explicitly marked for starting contributors. Let us know what you think!

About the Author

Sven Efftinge

Sven Efftinge

Sven loves finding sweet spots in product development. Always keeping an eye on pragmatism and the real benefit for the end user, he has proven to be a creative source for many sucessful technologies. He is a co-founder of TypeFox, co-lead of Eclipse Theia and product manager of Gitpod.

Read more about this topic

read the article

Jan 3rd 2024

Article

Markus Rudolph

Add views to a Langium-powered VS Code extension

Markus gives a simple introduction about webviews in VS Code and how to interact with Langium.

read the article
read the article

Dec 13th 2023

Article

Dennis Hübner

Enhancing communication between extensions and webviews using VS Code Messenger

Dennis introduces the VS Code Messenger library and explains how to use it for a better intercommunication between VS Code extension and its webviews.

read the article
watch the videoOpen Video

Nov 16th 2023

Video

Mark Sujew

Embracing remote systems in local IDEs

Mark discusses remote development and collaborative editing. He introduces a new collaboration protocol to enable compatibility between IDEs.

watch the video
LOAD MORE