Table of Contents
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:
You can install MetaGo from VS Code's extension panel (
x) and searching for 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:
BeginnerTailwind.com Learn Tailwind CSS from Scratch
Let's try navigating to the
<JobTitle />. There's a lot of React components here that start with
MetaGo helps us navigate directly to the letter that we want.
Opening MetaGo with alt+j
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
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!
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
'. 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
/. 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.
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
m: scroll current line to screen center
t: scroll current line to screen top
b: scroll current line to screen bottom
You can even style the overlays by going into settings and adjusting:
- background color
- 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!
Like this article? Follow @chris__sev on Twitter