Before you can write your next magical line of code,
you've got to get your cursor where that code should go.
Let's look at some options to help you do that as efficiently
as possible.
You've already seen that using the explorer on the activity bar is an
easy way to browse the files and folders in a project
and quickly open the ones you want to work on.
Another quick way to open a file, if you know the name of it,
is to press "Ctrl P" to open a search box.
You can then just start typing the name of a file.
I know my project has a JavaScript file named menus.js,
so I'll type menus.
When you find the result you're looking for,
just select it and press "Enter" to open it.
Once you have several files open, you can move between them by
clicking the tabs at the top of the editor group.
Another option is to use the Ctrl tab
keyboard shortcut. Command tab on a Mac.
Holding down the Ctrl key and pressing "Tab" will open a small
dropdown at the top of the editor showing you a list of currently
open files listed in the order in which you last accessed them.
The previous file you viewed will be highlighted by default.
This makes it easy to quickly jump between the two files you might be
working on at the same time.
Once you've opened the file you need,
there are also a few handy ways to move around inside it besides
using the scrollbars.
The first I want to show you are the so-called breadcrumbs that
appear just above the contents of the file.
The idea is that they provide you with a trail that runs from a
specific location in the file back to the file's location
inside your project.
You can click on individual breadcrumbs to view sibling
elements for that location in the trail.
For instance, the rightmost breadcrumb currently is the
enableMenus function inside this JavaScript file.
If I click on it,
I'm shown other symbols at the same level in the file.
I'll click on the "CalculateDistance" function.
That takes me to the definition of that function near the
bottom of the file.
One level up in the breadcrumb hierarchy is the menus.js
file itself.
Clicking on it shows me other files in the same project folder.
Clicking on one of them would open that file.
The final level in this particular hierarchy is the project folder
containing the file.
Clicking on it effectively reveals the root of my project,
which is the same view I have when using the explorer on
the activity bar.
Another helpful way to move around inside files is to quickly jump
to symbol definitions.
As an example, I'll put my cursor here on Line 43 of this file where
it calls the enableMenus function.
Maybe I'm reading this code and now I want to see what the code
inside this function does.
I can quickly jump to the function definition by pressing "F12."
That moves me up to Line 4, where the enableMenus
function is defined.
Another way to jump to different symbols inside a file is with the
keyboard shortcut, Ctrl shift O. Command shift O on a Mac.
That effectively opens the command palette and places an at sign as
the first character in the search.
That's the character that initiates a symbol search
in this file.
I'll go back to the resize callback function I was looking
at a moment ago.
I just showed you how to jump to the definition of this
enableMenus function.
But let's imagine I really just want to take a quick peek at it
without actually leaving my current location in the file.
VS Code has a feature called Peek that lets me do just that. With my
cursor on the function call,
I can just press "Alt F12."
That opens up a little preview of the function on top of my current
location in the file.
I can scroll around and look at more information and even make
changes to it if I want to.
Double-clicking on this code would close this view and take
me to the function, or I can just press "Escape" to
close this peek in return to the code I was previously working on.
There are lots of ways to navigate around the code in your project
that are often quicker than clicking on a file
in the explorer
and then scrolling until you find the code you're looking for.
I think if you commit a few of these techniques to memory,
you'll find yourself more efficiently moving around
your projects.
Let's now turn our attention to IntelliSense and how you can be
more efficient when writing code.