VSCode-Pharo with GTK support

I spent this year writing my Ph.D., obtaining it, migrating several applications @Berger-Levrault, and… Playing with VSCode and Pharo

When I started the project of connecting VSCode with Pharo, I wanted language support and basic debugging functions. Then, I talked to friends, and I decided to implement the support of Notebook.

Ok… We did more than expected… So, what is the next step? Why not use the UI of Pharo for specific actions I need when developing an app from VSCode?

• For Users
  • Install Pharo Language Plugin
  • Configure the plugin
  • Analyse with Moosebook
• For developers

For Users

Install Pharo Language Plugin

The installation of the Pharo Language plugin is straightforward. Once you have installed VSCode, go to the extension panel, search for Pharo, select Pharo Language Support, and install the extension.

Configure the plugin

Three steps are required to set up the plugin.

1. Install a Pharo Image with the Pharo LanguageServer project installed. You can find a pre-built image in my GitHub repository.
2. Download a corresponding VM.

   Since we are going to use GTK backend. The VM installation requires more steps in Windows. Please, refer to the GTK backend project to download a VM in window

3. In VSCode settings, update the path to image and path to vm according to the downloaded files.

Analyse with Moosebook

Once everything is configured, it is possible to use VSCode to perform any analysis within a notebook. To do so, first, create a new file in VSCode that ends with the .moosebook extension.

I use moosebook as an extension because I am first a Moose developer, and I use this plugin to analyze software systems from VSCode.

A notebook appears in which you can add markdown and Pharo cells. Write some Pharo code (for example, 1+1) and execute it. Pharo executes the code in the backend server, and the result is displayed in the result part of the notebook cell.

OK, it is nice, but I want a GTK backend…

Using the GTK backend to visualize the result is super easy, you have to select the code you want to execute, then right-click, and you can perform Show the result of selected lines. The result will be shown in a GTK window containing the Pharo Inspector. From this window, you can explore the object, have a look at Roassal visualization, etc.

Several demo visualisations exist for Roassal. You only have to remove the open keyword at the end of each example.

For developers

I created the VSCode extension using the Language Server Protocol (LSP). It allows one to add support for its language across several tools such as VSCode, Vim, Eclipse, etc.

I wanted to add other nice features to improve the external tools with super cool Pharo features such as the Inspector. But… How to benefit from most of the greatest Pharo features without the UI already existing in Pharo. I mean… I do not want to redevelop an inspector in VSCode and other IDEs, but I still want to see if it is possible to offer it to my plugin.

So, instead of redeveloping the UI, I decided to bring the Pharo UI as an extension of the developers’ IDE. Since embedding the Pharo Image UI inside the editor looks bad to me, I decided to use the Spec-Gtk backend project.

This project allows one to run Spec UI using the GTK binding. To use it, I needed to load the project when loading the Pharo Language Server (PLS) project. So I added GTK binding project in the PLS baseline.

Then, I added to the default LSP a new command that takes as a parameter a string (the selected lines of code), executes it, and inspects it using the GTK backend.

Thus, when a user performs Show the result of selected lines, the PLS plugin sends a specific command to the pharo language server backend, that in turn executes the code and opens the GTK backend.