VSCode

What do you do for fun? A Visual Studio Code extension

The pandemic has come and gone (?), as most working for tech companies I worked exclusively from home for over two years and even if our offices have been technically open for about three months, I and most of my colleagues are still working from home at least a couple of days a week (and some, hired during the pandemic, have not even seen our offices yet).

At the height of the pandemic, during summer of 2020 (before vaccines where available, most public places closed or with entrance restrictions, masks mandates for indoor activities… I’m sure you remember) I had a bit of free time in my hands and decided to learn something that could hopefully also be useful. I have been using Visual Studio Code since the very first release and always been curios about how to write and extension. I had already created a simple color theme (Hogwarts colors for VSCode) but this time I also wanted a relatively simple project to learn Typescript; I thought an extension to help working with text (conversions, manipulations, sorting, that kind of things) could be useful for working with log files and parsing command line output (I use those a lot). Luckily there is good documentation about how to get started with a new extension in VSCode and there are already a few good extensions in the Marketplace I could use as examples to get started: I would probably get what I wanted installing a number of those extensions (I could not find one with all the capabilities I wanted) but that was not the point, was it? šŸ™‚

The getting started doc is pretty good, I was able to setup a project with basic functionality in no time. After that, being a complete newbie with Typescript (and Javascript) I took a bit of time to experiment with the language and figure out how to perform basic operation and interact with the VSCode window and its elements; the API reference, Contribution Points and extension samples where all very helpful. It is also useful to be able to learn from other similar extensions, most of which are available in GitHub.

After wrapping my head around Promises and some Javascript/Typescript specific concepts (for example I found using array.map() is usually more efficient than a foreach loop) I wanted to properly test the extension and its interaction with VSCode documents: enter Mocha. With the extension I had in mind I wanted to work with decorations and do things like opening a selection in a new document (vscode.workspace.TextEditor) so I could not (or did not want to) only test those functions but I also wanted to see how VSCode behaved in those situations. I got some interesting learnings out of that (I’ll go over them in a new post) and finally got it running is I wanted.

Long story short, the result is Text Toolbox, an extension to help working with text: parsing, filtering, sorting, formatting, cleaning text or log files (or anything with text it in, really); it detects and optionally remove control characters (“bad”, hidden Unicode characters that can mess up with text parsing), fix and format Json and add random text and values (not just the standard Lorem Ipsum) once can use to create test data files.

This was just the first extension I came up with, shortly after I released Text Toolbox to the Marketplace I started working on a second one (again, material for a future post), in the meantime, if you are curious and want to give them a try (and leave feedback or feature requests) you can take a look at my extensions (four, so far). Of course, development on these exceptions is slow, it comes out of my free time so please be patient if you have a request or find a bug and it takes me a bit of time to fix it (pull requests are welcome, by the way šŸ˜).


You only live once, but if you do it right, once is enough – Mae West

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.