From the course: Learning Visual Studio Code

Understanding the default layout - Visual Studio Code Tutorial

From the course: Learning Visual Studio Code

Start my 1-month free trial Buy for my team

Understanding the default layout

“

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.

Contents