1
00:00:00,310 --> 00:00:02,409
To efficiently write and edit code,

2
00:00:02,409 --> 00:00:05,990
you need to visually layout your environment to support the

3
00:00:05,990 --> 00:00:07,410
task you're working on.

4
00:00:07,410 --> 00:00:11,545
Visual Studio Code enables a near limitless number of ways to

5
00:00:11,545 --> 00:00:13,819
arrange its different components.

6
00:00:13,819 --> 00:00:16,560
Let's look at a few of the most common ones.

7
00:00:16,560 --> 00:00:21,419
I think the best way to get a sense of what's possible is to

8
00:00:21,419 --> 00:00:25,701
open the View menu and select the "Appearance" submenu.

9
00:00:25,701 --> 00:00:30,652
There's lots to explore here, but I'll quickly show you just a

10
00:00:30,652 --> 00:00:33,250
couple of the options available.

11
00:00:33,250 --> 00:00:36,643
If you're coming to VS Code from another editor that shows the

12
00:00:36,643 --> 00:00:39,591
files in your project on the right side of the screen,

13
00:00:39,591 --> 00:00:42,356
you might prefer that arrangement here as well.

14
00:00:42,356 --> 00:00:47,361
You can easily change that by selecting "Move Primary Side Bar

15
00:00:47,361 --> 00:00:49,567
Right."

16
00:00:49,567 --> 00:00:54,438
The activity bar is associated with the primary sidebar,

17
00:00:54,438 --> 00:00:56,979
so it moves to the right side of the screen.

18
00:00:56,979 --> 00:01:02,152
The different items on the activity bar will now open there.

19
00:01:02,152 --> 00:01:06,744
There are lots of different ways to make many of these changes.

20
00:01:06,744 --> 00:01:10,298
For instance, you can also move the primary sidebar by

21
00:01:10,298 --> 00:01:13,853
right-clicking on it and choosing to move it from the pop up menu.

22
00:01:13,853 --> 00:01:18,201
I'll move it back to the left.

23
00:01:18,201 --> 00:01:22,143
If you want to have multiple items from the activity bar

24
00:01:22,143 --> 00:01:23,75
open at once,

25
00:01:23,75 --> 00:01:25,600
you can add a secondary sidebar.

26
00:01:25,600 --> 00:01:34,935
I'll turn it on from the View menu.

27
00:01:34,935 --> 00:01:40,216
I can now drag views from the activity bar over to the

28
00:01:40,216 --> 00:01:42,10
secondary sidebar.

29
00:01:42,10 --> 00:01:50,584
I'll drag over the Source Control view and the Extensions view.

30
00:01:50,584 --> 00:01:53,966
You don't get a second activity bar,

31
00:01:53,966 --> 00:01:58,700
the different views you add are docked at the top.

32
00:01:58,700 --> 00:02:01,803
If you don't like this arrangement,

33
00:02:01,803 --> 00:02:06,92
you can just drag them back to the activity bar.

34
00:02:06,92 --> 00:02:15,70
Another component you'll use quite a bit is the panel.

35
00:02:15,70 --> 00:02:20,841
You can turn it on from the View menu or with the keyboard

36
00:02:20,841 --> 00:02:22,765
shortcut Ctrl J.

37
00:02:22,765 --> 00:02:29,279
It contains the built-in terminal as well as views for problems in

38
00:02:29,279 --> 00:02:32,886
your code output and a debug console.

39
00:02:32,886 --> 00:02:35,773
It can also be positioned wherever you'd like it.

40
00:02:35,773 --> 00:02:40,285
I'll go back to the View menu, choose "Appearance," and it has

41
00:02:40,285 --> 00:02:42,230
a panel position submenu.

42
00:02:42,230 --> 00:02:48,295
I'll move it to the right side of the screen.

43
00:02:48,295 --> 00:02:51,434
You might like this arrangement

44
00:02:51,434 --> 00:02:54,611
if you've got a really wide display and you want as much

45
00:02:54,611 --> 00:02:56,864
vertical room as possible for your code.

46
00:02:56,864 --> 00:03:00,448
In addition to the View menu and keyboard shortcuts,

47
00:03:00,448 --> 00:03:04,161
you can also use the command palette to move things around.

48
00:03:04,161 --> 00:03:10,522
I'll open it with Ctrl Shift P and then search for panel.

49
00:03:10,522 --> 00:03:16,741
I'll then choose "Move Panel To Bottom."

50
00:03:16,741 --> 00:03:21,73
I'll then press "Ctrl J" again to hide it.

51
00:03:21,73 --> 00:03:26,369
Arranging your code files in VS Code is just as flexible.

52
00:03:26,369 --> 00:03:31,463
I'll press "Ctrl P" to view a list of some files I recently opened.

53
00:03:31,463 --> 00:03:34,705
I'll open the first one in the list.

54
00:03:34,705 --> 00:03:39,945
Right now, I have a single file open in a single editor group.

55
00:03:39,945 --> 00:03:44,40
Editor groups contain their own list of tabbed code files that you

56
00:03:44,40 --> 00:03:47,442
can move to different positions inside the application.

57
00:03:47,442 --> 00:03:52,198
Probably the quickest way to add a second editor group is to click

58
00:03:52,198 --> 00:03:56,808
the "Split Editor" button in the upper right corner of the screen.

59
00:03:56,808 --> 00:04:00,326
I now have two editor groups with the same file open

60
00:04:00,326 --> 00:04:01,430
in each of them.

61
00:04:01,430 --> 00:04:05,747
Opening a new file at this point will open it in whichever editor

62
00:04:05,747 --> 00:04:07,501
group is currently active.

63
00:04:07,501 --> 00:04:12,915
I'll open the project explorer and click on another file.

64
00:04:12,915 --> 00:04:16,931
You can see it opens in the new editor group since it's

65
00:04:16,931 --> 00:04:18,195
currently active.

66
00:04:18,195 --> 00:04:25,635
However, I can also drag a file to any editor group I wish.

67
00:04:25,635 --> 00:04:29,950
If I close all the files in a particular group,

68
00:04:29,950 --> 00:04:34,213
it effectively closes the group.

69
00:04:34,213 --> 00:04:37,990
I'm now back to a single editor group.

70
00:04:37,990 --> 00:04:41,565
You can lay out your editor groups in lots of different ways.

71
00:04:41,565 --> 00:04:45,582
The best way to browse some of the most common options is to, again,

72
00:04:45,582 --> 00:04:50,623
open the View menu and choose "Editor Layout."

73
00:04:50,623 --> 00:04:54,725
There are options here to split the current editor in

74
00:04:54,725 --> 00:04:55,908
different ways

75
00:04:55,908 --> 00:04:59,441
and quickly create multiple editor groups with different

76
00:04:59,441 --> 00:05:00,405
configurations.

77
00:05:00,405 --> 00:05:05,834
I'll choose the grid option to show you one of the more

78
00:05:05,834 --> 00:05:07,543
extreme examples.

79
00:05:07,543 --> 00:05:10,220
I now have four different editor groups,

80
00:05:10,220 --> 00:05:13,65
three of which don't have any files open in them yet.

81
00:05:13,65 --> 00:05:19,574
I'll quickly drag a file from the file explorer into each of them.

82
00:05:19,574 --> 00:05:23,641
If you've got a large display and need to see the contents of

83
00:05:23,641 --> 00:05:27,369
multiple files at once, this might be a good arrangement

84
00:05:27,369 --> 00:05:27,911
for you.

85
00:05:27,911 --> 00:05:31,964
You can also easily resize these groups with your mouse.

86
00:05:31,964 --> 00:05:35,403
I'll move mine to the center where the four groups meet and

87
00:05:35,403 --> 00:05:36,787
the borders of them

88
00:05:36,787 --> 00:05:40,632
turn blue.

89
00:05:40,632 --> 00:05:46,113
I can now click and drag my mouse to resize all four groups at once.

90
00:05:46,113 --> 00:05:49,784
When I'm ready to return to a more basic layout,

91
00:05:49,784 --> 00:05:58,757
I can go back to the Editor Layout submenu and choose "Single."

92
00:05:58,757 --> 00:06:02,940
All of my open files remain open.

93
00:06:02,940 --> 00:06:06,311
They're just now in a single editor group.

94
00:06:06,311 --> 00:06:10,190
I haven't shown you every possible option for arranging your editors,

95
00:06:10,190 --> 00:06:13,602
but I hope you've seen that VS Code is very flexible,

96
00:06:13,602 --> 00:06:16,420
and with a little tinkering, I'm sure you can find an

97
00:06:16,420 --> 00:06:18,100
arrangement that works for you.

98
00:06:18,100 --> 00:06:21,685
Up next, we'll look at some ways you can quickly navigate the

99
00:06:21,685 --> 00:06:23,00
code in your projects.