1
00:00:00,400 --> 00:00:04,838
The command palette is one of the most powerful and useful tools in

2
00:00:04,838 --> 00:00:06,721
Visual Studio Code. Learning

3
00:00:06,721 --> 00:00:10,969
just a couple of basic keyboard shortcuts can help you take full

4
00:00:10,969 --> 00:00:13,733
advantage of it and work more efficiently.

5
00:00:13,733 --> 00:00:17,12
As I mentioned earlier, the command palette is the giant

6
00:00:17,12 --> 00:00:19,99
search box at the top of the screen.

7
00:00:19,99 --> 00:00:21,901
You can use it to search for an open files,

8
00:00:21,901 --> 00:00:26,731
navigate within files, and execute any command available

9
00:00:26,731 --> 00:00:28,48
within VS Code.

10
00:00:28,48 --> 00:00:32,213
Clicking on it with your mouse opens it and shows you some of the

11
00:00:32,213 --> 00:00:33,970
most common ways to use it.

12
00:00:33,970 --> 00:00:37,56
I think the two most useful options are the first

13
00:00:37,56 --> 00:00:38,149
two in this list;

14
00:00:38,149 --> 00:00:42,41
Go to File, which you can activate with the keyboard shortcut,

15
00:00:42,41 --> 00:00:42,690
Ctrl P,

16
00:00:42,690 --> 00:00:47,254
command P on a Mac, and Show and Run Commands,

17
00:00:47,254 --> 00:00:50,273
which you can activate with Ctrl Shift P.

18
00:00:50,273 --> 00:00:53,698
Let's use it to open some files first.

19
00:00:53,698 --> 00:00:58,355
I'll press "Ctrl P" on my keyboard and the search box is activated.

20
00:00:58,355 --> 00:01:01,753
And I'm shown a list of some files I recently had open.

21
00:01:01,753 --> 00:01:07,421
I'll start typing the word tour, and VS Code searches my entire

22
00:01:07,421 --> 00:01:11,105
project for files with that in the name.

23
00:01:11,105 --> 00:01:15,229
Notice that it also searches for files with that combination

24
00:01:15,229 --> 00:01:16,907
of letters in any order.

25
00:01:16,907 --> 00:01:19,579
So even if I misspell what I'm looking for,

26
00:01:19,579 --> 00:01:21,677
I'm still likely to find it.

27
00:01:21,677 --> 00:01:25,720
I can now just press "Enter" to open tours.htm.

28
00:01:25,720 --> 00:01:30,120
You can also open files and automatically position your cursor

29
00:01:30,120 --> 00:01:32,573
at specific locations in the file.

30
00:01:32,573 --> 00:01:38,316
I'll press "Ctrl P" again and this time search for menu.

31
00:01:38,316 --> 00:01:44,117
The first file on the results is the menus.js_javascript file.

32
00:01:44,117 --> 00:01:48,05
With that highlighted, I can now add the at symbol to

33
00:01:48,05 --> 00:01:49,949
the end of my search text.

34
00:01:49,949 --> 00:01:54,87
Now the search results are showing me a list of symbols contained

35
00:01:54,87 --> 00:01:54,928
in that file.

36
00:01:54,928 --> 00:01:57,460
Symbols can be things like functions,

37
00:01:57,460 --> 00:01:59,666
class names, and variables.

38
00:01:59,666 --> 00:02:02,811
Not all file types are going to contain symbols,

39
00:02:02,811 --> 00:02:05,991
but for those that do like this JavaScript file,

40
00:02:05,991 --> 00:02:10,819
you can search for them within the file to open it at that location.

41
00:02:10,819 --> 00:02:15,383
I'll type the word "show" and it finds the ShowDiscountOffer

42
00:02:15,383 --> 00:02:17,07
function in the file.

43
00:02:17,07 --> 00:02:21,935
I'll press "Enter" and it opens the file and places my cursor on the

44
00:02:21,935 --> 00:02:23,755
line with that function.

45
00:02:23,755 --> 00:02:27,190
I can now quickly get started implementing this function.

46
00:02:27,190 --> 00:02:31,410
You can also open files at particular line numbers.

47
00:02:31,410 --> 00:02:34,762
This time, I'll search for index.

48
00:02:34,762 --> 00:02:38,571
Once the index.html file is highlighted,

49
00:02:38,571 --> 00:02:42,477
I'll type a colon and then the number 25.

50
00:02:42,477 --> 00:02:47,814
I'll press "Enter" and it opens the file and places my cursor

51
00:02:47,814 --> 00:02:48,826
on Line 25.

52
00:02:48,826 --> 00:02:53,938
Let's now use the command palette to execute actual commands.

53
00:02:53,938 --> 00:02:58,875
To do that, I'll use the keyboard shortcut Ctrl Shift P. That

54
00:02:58,875 --> 00:03:03,95
opens the command palette, shows some recent commands,

55
00:03:03,95 --> 00:03:06,295
and I can now start searching for the command I want to run.

56
00:03:06,295 --> 00:03:11,330
However, I want to first point out that the only difference between

57
00:03:11,330 --> 00:03:14,840
the Ctrl P shortcut and the Ctrl Shift P

58
00:03:14,840 --> 00:03:19,37
is that Ctrl Shift P adds a greater than symbol at the

59
00:03:19,37 --> 00:03:23,983
beginning of the search box. That signals the VS Code that we want to

60
00:03:23,983 --> 00:03:26,831
search for a command instead of a file.

61
00:03:26,831 --> 00:03:30,422
If I now just backspace over that symbol,

62
00:03:30,422 --> 00:03:34,154
I'm back to searching for files just like I did a minute ago.

63
00:03:34,154 --> 00:03:36,690
I can just type the greater than symbol again

64
00:03:36,690 --> 00:03:39,275
and I'm back to searching for commands.

65
00:03:39,275 --> 00:03:43,192
Searching for commands is great, because you only need to have a

66
00:03:43,192 --> 00:03:45,369
vague notion of what you want to do,

67
00:03:45,369 --> 00:03:49,535
and VS Code will help you find the specific command you really need.

68
00:03:49,535 --> 00:03:53,720
For instance, I'll type terminal.

69
00:03:53,720 --> 00:03:58,514
And VS Code is now showing me all the commands related to using

70
00:03:58,514 --> 00:04:00,215
its built-in terminal.

71
00:04:00,215 --> 00:04:06,585
I'll further refine my search by typing JavaScript.

72
00:04:06,585 --> 00:04:10,836
That highlights the command to open the JavaScript

73
00:04:10,836 --> 00:04:12,137
debug terminal.

74
00:04:12,137 --> 00:04:16,83
I can now just press "Enter" to execute the command.

75
00:04:16,83 --> 00:04:20,05
I'll close that for now just to get it out of the way.

76
00:04:20,05 --> 00:04:22,329
I'll show you another quick example

77
00:04:22,329 --> 00:04:26,710
because I know developers like to tweak the theme of their editors.

78
00:04:26,710 --> 00:04:32,185
I'll open the command palette again and type theme. With the

79
00:04:32,185 --> 00:04:34,923
color theme command selected,

80
00:04:34,923 --> 00:04:36,777
I'll press "Enter."

81
00:04:36,777 --> 00:04:39,930
I'm now shown a list of themes to choose from.

82
00:04:39,930 --> 00:04:43,973
I'll use my arrow keys to move over them and see a quick preview

83
00:04:43,973 --> 00:04:45,256
of how they'll look.

84
00:04:45,256 --> 00:04:50,654
I'm going to stick with the default light theme for now.

85
00:04:50,654 --> 00:04:53,752
I strongly encourage you to experiment with the

86
00:04:53,752 --> 00:04:54,830
command palette.

87
00:04:54,830 --> 00:04:58,712
It's a great way to quickly find the command you want to execute,

88
00:04:58,712 --> 00:05:02,537
as well as discover new commands you may not have ever

89
00:05:02,537 --> 00:05:03,548
known existed.

90
00:05:03,548 --> 00:05:08,141
It will almost certainly make your editing experience more efficient.

91
00:05:08,141 --> 00:05:12,05
Okay. I just showed you how to change the theme in your editor.

92
00:05:12,05 --> 00:05:15,605
However, that's just the tip of the iceberg when it comes

93
00:05:15,605 --> 00:05:16,891
to VS Code settings.

94
00:05:16,891 --> 00:05:20,233
In the next movie, I'll show you how to discover and

95
00:05:20,233 --> 00:05:25,00
change lots more options to fit your preferences and workflow.