Visual Studio Code Starter: MetaGo

Celý článek

I'm a big believer in spending time to learn tools to make us more efficient in our code editors. VS Code is amazing because of all the productivity features it has and all the extensions that are available.

In this post let's take a look at a way we can navigate around our code even faster.

MetaGo is a way to move your cursor to a position quickly and without using your mouse/trackpad.

Here's a quick preview to see what MetaGo can do:

Installing MetaGo

You can install MetaGo from VS Code's extension panel (cmd + shift + x) and searching for MetaGo.

Using MetaGo

It can take some time to get used to using MetaGo. I like to think of it as similar to the learning curve when using vim.

We have some code

Let's say we have the following code:

Let's try navigating to the <JobTitle />. There's a lot of React components here that start with j.

MetaGo helps us navigate directly to the letter that we want.

Opening MetaGo with alt+j

Hit alt + j to activate MetaGo.

# open metago
alt + ;

You'll be prompted with an input to type the character you want to go to.

Navigating to the Letter

Type in j and you'll see an overlay on all the j letters in your editor!

Last step is to hit the letter of where you want to go!

MetaGo Bookmarks

In addition to character teleporting, MetaGo let's us set bookmarks throughout our file.

MetaGo character teleporting only works with the characters that are on your screen at the time. If you want to save a spot in the bottom of the file and jump to it quickly, then use MetaGo bookmarks.

Creating a MetaGo Bookmark

We can create a bookmark by typing alt + '. The character is convenient because it's right next to the other MetaGo keyboard shortcut.

Once you create a bookmark, you'll see the blue bookmark icon in the gutter:

Navigating to MetaGo Bookmarks

To navigate, we just have to type alt + /. This will bring up a panel that shows us our bookmarks.

Bookmarks from all your files will show! Not just the file you are currently in.

And More!

The MetaGo extension has much more like quick navigation.

Check out the docs for more goodies like line navigation:

Scroll line to the screen center/top

• alt + m: scroll current line to screen center
• alt + t: scroll current line to screen top
• alt + b: scroll current line to screen bottom

Conclusion

You can even style the overlays by going into settings and adjusting:

• background color
• opacity
• font color
• font family
• and more settings

I always look for ways to make your development easier and more efficient. MetaGo certainly fits the bill!