DEV Community

Grzegorz Ziemonski
Grzegorz Ziemonski

Posted on

 

My First Visual Studio Code Extension

Some two days ago, I was thinking about how to optimize my way of navigating code through keybindings and I got this idea: what if I could just "point" the editor to the right place, without necessarily figuring out how to get there?

My first idea was to divide the visible editor's area into a grid in which every cell would have an assigned keybinding. In case there's more precision needed, there could be a second, smaller grid, made just of the cell that you selected before.

As I played with this idea in my mind, I decided that it's not really that great and not that easy to implement in a usable way. But then something else came to my mind...

Some months ago, when I was all about keyboard navigation and keybindings, I used a browser extension that allowed me to click on stuff based on 1-3 letter codes, popping up whenever I want to go somewhere.

This way of navigating resonated much more with my inner dev and seemed much easier to implement for a complete noob such as me.

Of course, I started off by trying to find something like this implemented by someone else already, but I didn't really know what exactly should I search for, so after a few tries I've given up.

And so, yesterday and today, I've coded furiously, spending way too much time on this, but I have the basic idea working:

You simply press Alt+A and a list of "combinations" pops up in different places of your code. Once you type a character combination, you will be taken to the desired place in the code. While in "navigation mode", you can also scroll up and down using f and j keys respectively.

I have to admit that the code is far from perfect and it probably doesn't always work right. Still, at the same time, I'm super curious what other people (i.e. you!) think about it and I'm realistic enough to know that it will probably never be perfect.

So here it is, my first Visual Studio Code extension:
https://github.com/goyozi/visual-nav

Let me know what you guys think!

Top comments (1)

Collapse
 
deciduously profile image
Ben Lovy

Very cool - not unlike EasyMotion for Vim. Going to give this a try later today, congrats on publishing!

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!