Slight Detour

It’s been a couple of months since my last post as a number of things have happened that meant I didn’t have time to deal with this blog. Now that things are starting to get back to normal I’ve got a bit more time on my hands again and have been thinking about my next blog post.

I need to pick up on the AngularJS in TypeScript series and add the next article but in the last couple of weeks I’ve been sidetracked on to another project.

Navigation

I do a lot of my development work in Visual Studio and use a number of extensions to get the environment working in a way that I feel makes me most productive. One of these tools is CodeMaid which has some excellent code formatting tools but it’s the code digging functionality (via the CodeMaid Spade tool window). This tool displays a structural view of C# code that allows you to easily find methods, properties etc. and navigate to them by double clicking on them. I used it a lot but as I do a lot of coding in JavaScript and TypeScript I wanted a tool to do the same thing for those languages too.

I did look for existing extensions and found a JavaScript Parser extension, which works well for JavaScript but doesn’t handle TypeScript. In light of this I decided to start writing my own extension.

Code Trees

The first thing I had to consider was how to get a syntax tree for TypeScript and the first thing that sprung to mind was that the TypeScript compiler was open source so why not look into that? Thankfully it wasn’t too difficult to get the TypeScript source code and then found that TypeScript has a Parser class which return a StyntaxTree – exactly what I needed. The code to run the parser is as follows:

  var syntaxTree = TypeScript.Parser.parse( 'dummy.ts', codeToParse, false, options );

So now I had some JavaScript code that could generate a syntax tree for TypeScript files but I needed to be able to trigger this and deal with the results from within my Visual Studio extension (C# .NET code). After a bit more research I stumbled across the ClearScript project which sounded like it would fit the bill perfectly.

I added ClearScript to my project (via a NuGet package) and then was able to trigger some JavaScript and retrieve the results all from within my C# code. It needed a lot work, particularly around deciding what processing would be done in JavaScript and what would then be picked up from the C# code, but the seeds were there.

Another advantage to using the TypeScript parser is that it has to handle JavaScript parsing as well, since TypeScript is a superset of JavaScript, so I should be able to use the same process for generating code structures for TypeScript and JavaScript files.

Different Languages

As the only real objective for my extension is to allow simple structural navigation of code files then it makes sense to cater for as many file types as possible. The initial code was written to cater for TypeScript and JavaScript files but since Visual Studio already provides information about the code structure for C# and C++ files then it makes sense to handle those as well.

In future it should be possible to also handle XML files, html files and other structured code blocks so the model has to be simple enough and adaptable enough to handle such additions.

Progress

As it currently stands I have a (mostly) functional extension which currently handles TypeScript, JavaScript, C# and C++ files. It’s not quite ready for wider release as I need to tidy up the handling of some elements (delegates for one) but I am aiming to release it in the coming months and, once I’ve tidied the code, I hope to make it open source and see where it goes from there.

KodeTree extension

I also intend to post further articles which may discuss some of the more detailed design decisions and hurdles that I have encountered (and will encounter) during this development.

Until then…