View ROOT Files directly in VS Code!(11 March 2021)
Before diving into the details, let us just quickly see the extension in action. Although the saying goes like:
An image is worth a thousand words
I think that a GIF will serve us better this time:
After seeing this, who would still want to open a terminal, launch ROOT, and create a
TBrowser instead? And I haven’t even mentioned yet that for this extension to work no local installation of ROOT is required!
If you just want to install the extension already and have a good time opening all your ROOT Files, you can do so by:
- Launching VS Code’s
Ctrl + P), pasting
ext install albertopdrf.root-file-viewer, and pressing enter
- or searching
ROOT File Viewerdirectly within VS Code’s
Ctrl + Shift + Xor click on the
Extensionsicon in the
- or running
code --install-extension albertopdrf.root-file-viewerfrom the command line
- or… well, many other options!
And if you want to know more, just keep reading!
Visual Studio Code
In the case of the ROOT File Viewer extension, the Custom Editor API is leveraged to handle ROOT Files. The custom editor requires two parts: a view and a document model. The view of the file is implemented through the Webview API, and the document model is a custom
RootFileDocument class which we will keep simple by implementing a
RootFileEditorProvider. We could go deep into details here, but that is probably outside of the scope of this post.
ROOT File Viewer makes use of the
HierarchyPainter object to do all the heavy lifting regarding the handling of the ROOT files and the drawing of the objects stored in it. It is configured with the
tabs layout and it gets passed the user’s VS Code theme background color so it integrates better with the editor.
The implementation of the extension boils down to how to glue the two awesome tools mentioned above together and, in all honesty, I tried to keep everything as simple as possible in order to have a proof of concept up and running quickly. All the magic happens on the
rootFileEditor.ts file, which contains both the implementation of the custom document and the webview.
RootFileDocument custom document is the object that gets created each time that a user opens a ROOT File document. For what it concerns us, it stores the path to the file that we want to create a view for.
RootFileEditorProvider is were all the functionality is implemented, which can be summarized in:
- Letting VS Code know which view type is supporting
- Creating a custom document for each ROOT File that gets opened
- Managing all the webviews associated to a custom document
- In our case, we only allow a webview per file
- Providing the actual content that is displayed on the webviews
If you would like, you can check out (and even contribute to) the source code on ROOT File Viewer’s GitHub repository. And, of course, you also can (and are encouraged to) open an issue if a bug arises or you have a feature suggestion!
VS Code extensions receive automatic updates, so rest assured that you won’t miss any cool future features that may come!
To wrap everything up, with ROOT File Viewer I wanted to solve a pain point that I believe exists for more people than just me. I hope that glancing over the contents of a ROOT File is quicker and more practical now that this extension exists.
And, lastly, I would like to thank you for dedicating the time to read this post and everyone who has shown their support after the launch of ROOT File Viewer!