As I started using Visual Code I found every extension I was looking for. Last week I stumbled upon a feature where I could not find an extension for. So I decided to write my first VS code extension and let you know about my experiences during the development.
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:
This is a nice feature but I often used the plugin to list all available specs and then jump to certain
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
As I could not find a VS code extension which solves this problem, I decided to write my first own VS code extension.
The first version of the extension should be able to:
- List all
it()blocks as dropdown in an opened file in the editor
- If a block is selected, move the cursor to this block
Big applause to the VS code team for the amazing documentation on how to build your own VS code 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:
So this sounded like a good 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
describe(and the corresponding line number of this string
- Pass them to
- Receive the selection and move the cursor the corresponding line number
The final output for a Jasmine test file looks like this:
Another very nice experience was the very easy publishing process for VS code extensions. Basically I had just to follow the official documentation which requires an Visual Studio Team Services account.
The published extension is available in the Visual Studio Code Marketplace.
In summary, it made a lot of fun to develop a VS code experience. The documentation and the provided examples are very good and I am very happy to have added a functionality to my favorite code editor which I have been missing.
Du hast einen Fehler in diesem Artikel gefunden? Du möchtest gerne etwas klarstellen, aktualisieren oder hinzufügen?
Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!Ändern auf Github
Senior Frontend Developer (Freelancer) aus München mit Fokus auf Vue.js