To efficiently write and edit code,
you need to visually layout your environment to support the
task you're working on.
Visual Studio Code enables a near limitless number of ways to
arrange its different components.
Let's look at a few of the most common ones.
I think the best way to get a sense of what's possible is to
open the View menu and select the "Appearance" submenu.
There's lots to explore here, but I'll quickly show you just a
couple of the options available.
If you're coming to VS Code from another editor that shows the
files in your project on the right side of the screen,
you might prefer that arrangement here as well.
You can easily change that by selecting "Move Primary Side Bar
Right."
The activity bar is associated with the primary sidebar,
so it moves to the right side of the screen.
The different items on the activity bar will now open there.
There are lots of different ways to make many of these changes.
For instance, you can also move the primary sidebar by
right-clicking on it and choosing to move it from the pop up menu.
I'll move it back to the left.
If you want to have multiple items from the activity bar
open at once,
you can add a secondary sidebar.
I'll turn it on from the View menu.
I can now drag views from the activity bar over to the
secondary sidebar.
I'll drag over the Source Control view and the Extensions view.
You don't get a second activity bar,
the different views you add are docked at the top.
If you don't like this arrangement,
you can just drag them back to the activity bar.
Another component you'll use quite a bit is the panel.
You can turn it on from the View menu or with the keyboard
shortcut Ctrl J.
It contains the built-in terminal as well as views for problems in
your code output and a debug console.
It can also be positioned wherever you'd like it.
I'll go back to the View menu, choose "Appearance," and it has
a panel position submenu.
I'll move it to the right side of the screen.
You might like this arrangement
if you've got a really wide display and you want as much
vertical room as possible for your code.
In addition to the View menu and keyboard shortcuts,
you can also use the command palette to move things around.
I'll open it with Ctrl Shift P and then search for panel.
I'll then choose "Move Panel To Bottom."
I'll then press "Ctrl J" again to hide it.
Arranging your code files in VS Code is just as flexible.
I'll press "Ctrl P" to view a list of some files I recently opened.
I'll open the first one in the list.
Right now, I have a single file open in a single editor group.
Editor groups contain their own list of tabbed code files that you
can move to different positions inside the application.
Probably the quickest way to add a second editor group is to click
the "Split Editor" button in the upper right corner of the screen.
I now have two editor groups with the same file open
in each of them.
Opening a new file at this point will open it in whichever editor
group is currently active.
I'll open the project explorer and click on another file.
You can see it opens in the new editor group since it's
currently active.
However, I can also drag a file to any editor group I wish.
If I close all the files in a particular group,
it effectively closes the group.
I'm now back to a single editor group.
You can lay out your editor groups in lots of different ways.
The best way to browse some of the most common options is to, again,
open the View menu and choose "Editor Layout."
There are options here to split the current editor in
different ways
and quickly create multiple editor groups with different
configurations.
I'll choose the grid option to show you one of the more
extreme examples.
I now have four different editor groups,
three of which don't have any files open in them yet.
I'll quickly drag a file from the file explorer into each of them.
If you've got a large display and need to see the contents of
multiple files at once, this might be a good arrangement
for you.
You can also easily resize these groups with your mouse.
I'll move mine to the center where the four groups meet and
the borders of them
turn blue.
I can now click and drag my mouse to resize all four groups at once.
When I'm ready to return to a more basic layout,
I can go back to the Editor Layout submenu and choose "Single."
All of my open files remain open.
They're just now in a single editor group.
I haven't shown you every possible option for arranging your editors,
but I hope you've seen that VS Code is very flexible,
and with a little tinkering, I'm sure you can find an
arrangement that works for you.
Up next, we'll look at some ways you can quickly navigate the
code in your projects.