Project done for participation in applicating for internship at JetBrains at project "Roslyn Syntax Visualizer for Rider IDE".

SCOPE OF A PROJECT:

You are required to develop a UI application (WPF, Windows Forms, Avalinoa, …) that demonstrates the visualization of syntax trees using Roslyn API.

Functional Requirements:

• Develop a basic graphical user interface, provide a text box to input C# code.
• Use Roslyn API to generate the syntax tree for the provided code.
• Display the generated syntax tree in a visual format within the GUI.
• Implement a feature to highlight (and/or navigate) selected syntax tree nodes in the code editor.

This task will allow you to demonstrate your C# development skills, interaction with Roslyn API, and ability to create intuitive and functional user interfaces.

IMPLEMENTATION

To implement my project I chose Avalonia UI Framework. I was developing this project on MacOS Operating System so this cross-platform UI framework was a perfect match for me.

Project was done for .NET 8.0 as a target machine.

Before I explain the details here are required NuGet packages to run this program on your computer:

• Avalonia.AvaloniaEdit
• Avalonia.Desktop
• Avalonia.Diagnostics
• Avalonia.Fonts.Inter
• Avalonia.ReactiveUI
• Avalonia.Themes.Fluent
• Avalonia
• AvaloniaEdit.TextMate
• TextMateSharp.Grammars

I started with creating basic window in Avalonia UI. Here is what it looks like:

Then I focused on creating Code editor for a user with syntax highlighting. For this particular functionality I chose the AvaloniaEdit control: TextEditor. Then I applied C# syntax checking and highlighting in it and this is how it looks like:

It also checks for basic syntax errors (missing variable identifier here):

Next part was getting familiar with Roslyn API and generating syntax tree. For this functionality I chose printing Roslyn Syntax tree of a code in a basic TextBox in form of a tree. To create a tree I am traversing a tree with a DFS algorithm and adding strings to TextBox text. To generate a syntax tree you simply click "Visualize Code" button. This is how to tree looks like after generating it from source code:

I know it doesn't look great, but for now, it is what it is.

The last part was navigating and exploring source code based on Node or Token in a tree. Each line is connected to a SyntaxNodeOrToken object in a dictionary, and based on that I can say about which Node or Token is the current line. You navigate the tree by simply double cllicking the Node or Token line, and then in the Code Editor you can see which piece of code this Node or Token text is about. Here is how it works:

Example 1 - double clicked NamespaceDeclaration node:

Example 2 - double clicked MethodDeclaration node:

Example 3 - double clicked Argument node:

IMPORTANT

If you change the code, you have to generate new tree to avoid errors!

Further info

I also tried implementing code completion, but I didn't make it work.

All the process of creating this program should be readable through commits.

The whole program logic lies in MainWindow.axaml.cs file.

I am aware of the fact that a lot of things could be done better in this project, but I am happy that I implemented features that I described.