1
00:00:00,380 --> 00:00:03,165
Before you can write your next magical line of code,

2
00:00:03,165 --> 00:00:06,418
you've got to get your cursor where that code should go.

3
00:00:06,418 --> 00:00:10,131
Let's look at some options to help you do that as efficiently

4
00:00:10,131 --> 00:00:10,874
as possible.

5
00:00:10,874 --> 00:00:15,57
You've already seen that using the explorer on the activity bar is an

6
00:00:15,57 --> 00:00:18,317
easy way to browse the files and folders in a project

7
00:00:18,317 --> 00:00:21,35
and quickly open the ones you want to work on.

8
00:00:21,35 --> 00:00:24,872
Another quick way to open a file, if you know the name of it,

9
00:00:24,872 --> 00:00:28,871
is to press "Ctrl P" to open a search box.

10
00:00:28,871 --> 00:00:32,840
You can then just start typing the name of a file.

11
00:00:32,840 --> 00:00:37,238
I know my project has a JavaScript file named menus.js,

12
00:00:37,238 --> 00:00:39,542
so I'll type menus.

13
00:00:39,542 --> 00:00:42,754
When you find the result you're looking for,

14
00:00:42,754 --> 00:00:45,817
just select it and press "Enter" to open it.

15
00:00:45,817 --> 00:00:50,38
Once you have several files open, you can move between them by

16
00:00:50,38 --> 00:00:53,359
clicking the tabs at the top of the editor group.

17
00:00:53,359 --> 00:00:56,620
Another option is to use the Ctrl tab

18
00:00:56,620 --> 00:00:59,953
keyboard shortcut. Command tab on a Mac.

19
00:00:59,953 --> 00:01:04,416
Holding down the Ctrl key and pressing "Tab" will open a small

20
00:01:04,416 --> 00:01:09,94
dropdown at the top of the editor showing you a list of currently

21
00:01:09,94 --> 00:01:13,413
open files listed in the order in which you last accessed them.

22
00:01:13,413 --> 00:01:17,180
The previous file you viewed will be highlighted by default.

23
00:01:17,180 --> 00:01:21,623
This makes it easy to quickly jump between the two files you might be

24
00:01:21,623 --> 00:01:23,453
working on at the same time.

25
00:01:23,453 --> 00:01:26,380
Once you've opened the file you need,

26
00:01:26,380 --> 00:01:30,803
there are also a few handy ways to move around inside it besides

27
00:01:30,803 --> 00:01:32,277
using the scrollbars.

28
00:01:32,277 --> 00:01:36,170
The first I want to show you are the so-called breadcrumbs that

29
00:01:36,170 --> 00:01:38,808
appear just above the contents of the file.

30
00:01:38,808 --> 00:01:42,995
The idea is that they provide you with a trail that runs from a

31
00:01:42,995 --> 00:01:46,776
specific location in the file back to the file's location

32
00:01:46,776 --> 00:01:48,127
inside your project.

33
00:01:48,127 --> 00:01:51,851
You can click on individual breadcrumbs to view sibling

34
00:01:51,851 --> 00:01:54,540
elements for that location in the trail.

35
00:01:54,540 --> 00:01:59,617
For instance, the rightmost breadcrumb currently is the

36
00:01:59,617 --> 00:02:03,113
enableMenus function inside this JavaScript file.

37
00:02:03,113 --> 00:02:04,840
If I click on it,

38
00:02:04,840 --> 00:02:08,913
I'm shown other symbols at the same level in the file.

39
00:02:08,913 --> 00:02:13,275
I'll click on the "CalculateDistance" function.

40
00:02:13,275 --> 00:02:16,864
That takes me to the definition of that function near the

41
00:02:16,864 --> 00:02:18,82
bottom of the file.

42
00:02:18,82 --> 00:02:22,581
One level up in the breadcrumb hierarchy is the menus.js

43
00:02:22,581 --> 00:02:23,854
file itself.

44
00:02:23,854 --> 00:02:28,402
Clicking on it shows me other files in the same project folder.

45
00:02:28,402 --> 00:02:31,665
Clicking on one of them would open that file.

46
00:02:31,665 --> 00:02:36,362
The final level in this particular hierarchy is the project folder

47
00:02:36,362 --> 00:02:37,807
containing the file.

48
00:02:37,807 --> 00:02:42,318
Clicking on it effectively reveals the root of my project,

49
00:02:42,318 --> 00:02:45,731
which is the same view I have when using the explorer on

50
00:02:45,731 --> 00:02:46,786
the activity bar.

51
00:02:46,786 --> 00:02:51,859
Another helpful way to move around inside files is to quickly jump

52
00:02:51,859 --> 00:02:53,576
to symbol definitions.

53
00:02:53,576 --> 00:02:58,766
As an example, I'll put my cursor here on Line 43 of this file where

54
00:02:58,766 --> 00:03:01,399
it calls the enableMenus function.

55
00:03:01,399 --> 00:03:04,951
Maybe I'm reading this code and now I want to see what the code

56
00:03:04,951 --> 00:03:06,440
inside this function does.

57
00:03:06,440 --> 00:03:11,75
I can quickly jump to the function definition by pressing "F12."

58
00:03:11,75 --> 00:03:15,457
That moves me up to Line 4, where the enableMenus

59
00:03:15,457 --> 00:03:17,142
function is defined.

60
00:03:17,142 --> 00:03:22,637
Another way to jump to different symbols inside a file is with the

61
00:03:22,637 --> 00:03:27,540
keyboard shortcut, Ctrl shift O. Command shift O on a Mac.

62
00:03:27,540 --> 00:03:32,777
That effectively opens the command palette and places an at sign as

63
00:03:32,777 --> 00:03:35,475
the first character in the search.

64
00:03:35,475 --> 00:03:38,717
That's the character that initiates a symbol search

65
00:03:38,717 --> 00:03:39,560
in this file.

66
00:03:39,560 --> 00:03:44,204
I'll go back to the resize callback function I was looking

67
00:03:44,204 --> 00:03:45,508
at a moment ago.

68
00:03:45,508 --> 00:03:49,376
I just showed you how to jump to the definition of this

69
00:03:49,376 --> 00:03:50,312
enableMenus function.

70
00:03:50,312 --> 00:03:54,334
But let's imagine I really just want to take a quick peek at it

71
00:03:54,334 --> 00:03:57,967
without actually leaving my current location in the file.

72
00:03:57,967 --> 00:04:03,574
VS Code has a feature called Peek that lets me do just that. With my

73
00:04:03,574 --> 00:04:05,990
cursor on the function call,

74
00:04:05,990 --> 00:04:09,175
I can just press "Alt F12."

75
00:04:09,175 --> 00:04:14,550
That opens up a little preview of the function on top of my current

76
00:04:14,550 --> 00:04:16,260
location in the file.

77
00:04:16,260 --> 00:04:20,405
I can scroll around and look at more information and even make

78
00:04:20,405 --> 00:04:22,240
changes to it if I want to.

79
00:04:22,240 --> 00:04:26,65
Double-clicking on this code would close this view and take

80
00:04:26,65 --> 00:04:29,230
me to the function, or I can just press "Escape" to

81
00:04:29,230 --> 00:04:33,516
close this peek in return to the code I was previously working on.

82
00:04:33,516 --> 00:04:37,463
There are lots of ways to navigate around the code in your project

83
00:04:37,463 --> 00:04:40,196
that are often quicker than clicking on a file

84
00:04:40,196 --> 00:04:41,168
in the explorer

85
00:04:41,168 --> 00:04:44,730
and then scrolling until you find the code you're looking for.

86
00:04:44,730 --> 00:04:47,979
I think if you commit a few of these techniques to memory,

87
00:04:47,979 --> 00:04:51,356
you'll find yourself more efficiently moving around

88
00:04:51,356 --> 00:04:52,301
your projects.

89
00:04:52,301 --> 00:04:56,249
Let's now turn our attention to IntelliSense and how you can be

90
00:04:56,249 --> 00:04:59,00
more efficient when writing code.