Javascript is required
·
3 min read
·
1214 views

My First Visual Code Extension

My First Visual Code Extension Image

I am a big fan of Visual Code and use it as my main IDE for software development. The available selection of extensions (see the Extension Marketplace) is amazing.

As I started using Visual Code I found every extension I was looking for. Last week I stumbled upon a feature for which I could not find an extension. So I decided to write my first VS code extension and let you know about my experiences during the development.

The problem I wanted to solve

Currently, I am doing a lot of Angular development and therefore use Jasmine for unit tests. My first IDE, which I used for web development was WebStorm which is based on IntelliJ IDEA. In WebStorm, I often used and liked the plugin ddescriber for Jasmine tests:

Intellij plugin to quickly transform a JavaScript test block from describe() to ddescribe() and a test it() into iit()

This is a nice feature, but I often used the plugin to list all available specs and then jump to a certain describe() or it() block:

Just type Ctrl + Shift + D (Command + Shift + D on a Mac) to launch a dialog that lets you choose which suites or unit tests you want to include or exclude.

This is useful in large unit tests which includes many describe() or it() blocks.

As I could not find a VS code extension that solves this problem, I decided to write my first own VS code extension.

What the extension should handle

The first version of the extension should be able to:

  • List all describe() or it() blocks as dropdown in an opened file in the editor
  • If a block is selected, move the cursor to this block

How to start?

Big applause to the VS code team for the amazing documentation on how to build your own VS code extension.

It is straightforward to grab one of the example projects or create a new one using Extension Generator and get started. Additionally, it is very easy to run and debug your new extension.

Searching through the Extension API documentation I found this method

showQuickPick<T extends QuickPickItem>(items: T[] | Thenable<T[]>, options?: QuickPickOptions, token?: CancellationToken): Thenable<T | undefined>

which functionality is described as:

Shows a selection list allowing multiple selections.

It looks this way in VS code if it is called:

VS Code Quick Pick Screenshot

So this sounded like an excellent opportunity to list all test blocks and provide a way to receive the selected value.

So basically, I had to implement these steps:

  • Grab all strings in the opened editor, which include it( or describe( and the corresponding line number of this string.
  • Pass them to showQuickPick method.
  • Receive the selection and move the cursor to the corresponding line number.

The final output for a Jasmine test file looks like this:

VS Code Jasmine Test Selector Screenshot

Publishing the extension

Another lovely experience was the straightforward publishing process for VS code extensions. Basically, I followed the official documentation, which requires a Visual Studio Team Services account.

The published extension is available in the Visual Studio Code Marketplace.

Conclusion

In summary, it made a lot of fun to develop a VS code experience. The documentation and examples are excellent, and I am thrilled that I added a functionality to my favorite code editor, which I've been missing.

I will never share any of your personal data. You can unsubscribe at any time.

If you found this article helpful.You will love these ones as well.
Use Nitro as Mock Server Image

Use Nitro as Mock Server

Unlocking the Power of v-for Loops in Vue With These Useful Tips Image

Unlocking the Power of v-for Loops in Vue With These Useful Tips

Focus & Code Diff in Nuxt Content Code Blocks Image

Focus & Code Diff in Nuxt Content Code Blocks

Lazy Load Vue Component When It Becomes Visible Image

Lazy Load Vue Component When It Becomes Visible