Getting started with any new piece of software can feel disorienting
at first.
It likely won't look like similar tools you've used.
You might not know how to get started,
and you may find it difficult to imagine yourself liking or even
being productive with it.
Let's quickly address and move beyond each of those issues
in this first movie.
I'm going to show you how the Visual Studio Code interface is
organized,
and how it's designed to support a very natural software development
workflow.
I've got the application running here,
and the default welcome screen is already open.
There's a checkbox at the bottom to let you decide if this screen
appears each time you open VS Code or not.
It's great for new users, but also functional enough to keep
using even as you gain more experience.
The Start section on the left has the options you need to
get right to work.
Create a new code file,
open an existing file or folder, clone a Git repository,
or connect to other remote development workspaces.
Once you've used VS Code a few times,
you'll see options below to quickly open recent projects
you've worked on.
The right side of the welcome screen has some links to learning
materials inside the application to also help you get
productive quickly.
VS Code uses a familiar tabbed interface for the files currently
open in the editor.
The Welcome page itself appears
here is the only tab open right now.
I'll close that so we can focus on some of the important UI elements
surrounding the main editor area.
At the top left of the screen is a fairly standard menu system.
At the bottom of the screen is a status bar that will present small
bits of information relative to what you're doing in the
application at any given moment.
The more interesting, useful, and probably unfamiliar parts of
the UI are the activity bar that runs along the left side
of the screen and this giant search bar that
appears at the top of the screen.
Let's first look at the activity bar.
Clicking any of the icons opens that pane of the activity bar.
They each focus on a different part of the software development
process you'll likely follow when using VS Code,
even though they don't appear in the natural order.
At the bottom, is the extensions panel.
From here, you can configure VS Code with extensions to support
the programming languages and other development tools you plan
to use on your project.
With the environment configured, you're ready to write some code.
The icon at the top opens the explorer panel.
Use it to view and open the files and folders in your project.
The icon below lets you search the code in your project.
When you think you're done developing a new feature,
you can click on the run and debug icon.
From here, you can run your program and debug it using
familiar tools like watches and breakpoints.
When you're shiny, new code is bug free,
you can click on the icon below to commit your code to your Git
source code repository.
We're going to dive deeper into the items on the activity bar as
we move through the course, but I think it's a useful tool
that supports a very common software development process.
Lastly, I want to point out the giant search box at the
top of the screen
that is so much more than just a search box.
Commonly referred to as the command palette.
This box lets you quickly search for and open files
in your project,
but you can also search for and execute just about any command
supported by VS Code.
It's a very handy tool.
In fact, it's so handy. I'll dedicate an entire upcoming movie
to showing you how to use it.
I hope this quick tour of the user interface already has you a little
more comfortable with the application,
and has helped you envision how you might use some of its unique
features to be more productive.