angular visual studio code vs visual studio

#ANGULAR VISUAL STUDIO CODE VS VISUAL STUDIO HOW TO#

This internal graph is then passed to the second part that is a vscode webview used for rendering the component hierarchy graph using the vis.js JavaScript library.

This class analyzes all *.component.ts files in the open workspace and generates an internal graph of the component hierarchy. It is implemented in two parts, one being a typescript class that is executed when you start the extension command from the Command Palette. The main feature of the extension is the 'Show a graph of the component hierarchy' command. The green nodes are the components not used by any other component, the root nodes of the graph.

#ANGULAR VISUAL STUDIO CODE VS VISUAL STUDIO HOW TO#

But I have not been able to find an extension that could visualize an Angular application like the DGML viewer can in Microsoft Visual Studio.Ĭovid19 hit us all, it got colder as winter approached so more time inside where I found the time to figure out how to create an extension for Visual Studio Code.īelow is an animation showing the main feature of the AngularTools extension. I think Visual Studio Code is awesome and there are so many brilliant extensions out there that make it a very powerful code editor. It worked pretty good and you can have a look at the code here. So I automated the task by creating a python script for analyzing the Angular application and generating a DGML file showing the component hierarchy. It was tedious and took a long time and of course the project changed frequently making my documentation obsolete very fast.

I started using the DGML editor in Microsoft Visual Studio to draw the component hierarchy. Then a while back when I started on a team that worked on an Angular application, I needed to get an overview of how all the components in the project was using each other. I have experienced this every time I started in a new team. Joining a new team or starting a new job can be a pretty stressful experience with a steep learning curve on getting to know the codebase that the team is working on. I have just released my first Visual Studio Extension AngularTools, to the vs-code marketplace and I think it is pretty cool and could help some of you out there.

Angular visual studio code vs visual studio