From the course: Visual Studio Code for Web Developers

The VS Code UI - Visual Studio Tutorial

From the course: Visual Studio Code for Web Developers

Start my 1-month free trial

The VS Code UI

- [Instructor] Once you have VS Code installed, open the app. You can do this by either double-clicking the app icon, or by typing the command code from a terminal window. If you navigate to a particular project folder in your terminal, you can open it in VS Code by typing code and then a period, or by giving it a full path. Or you can drag and drop a folder of code into the app, and I'll do that from my Exercise Files folder. I'll make the window a little bit bigger. Okay, let's get started by taking a quick tour of the user interface. On the left-hand side of the app, you'll see a vertical list of icons. This is called the view bar. The view bar lets you switch between views, and gives you additional context-specific indicators, like how many of the installed extensions need to be updated, or how many of the open editors have been modified. The top icon switches to the Explorer view, and you can also select this view by typing Control, or Command + Shift + E. This view displays the files and folders for the current project along with any currently open editors. It also shows how many files have been modified and not yet saved. The magnifying glass icon represents the Search view, which you can also activate with Control or Command + Shift + S. In this view you can search for and optionally replace content within the current editor or across multiple files. The next view is the integrated Git view, which you can activate with Control + Shift + G, and it's the same on both platforms. If you use Git for source control, and open a project that is a Git repo, then this view will show the relevant Git-related information. You can see how many files have been changed, which files have been changed and staged, and even commit your changes right from this view. Next is the Debugger view which you can activate with Control or Command + Shift + D, and then finally there's the Extensions view which you can activate with Control or Command + Shift + X. This view lists all of the installed extensions. You can also disable or uninstall extensions, search for new ones in the marketplace, and configure each one. This view will also show you which extensions need to be updated, and let you update them right from this view. Along the bottom of the window is the status bar. The status bar shows information about the current project and files that are open in the workspace. The application menus contain many of the most common editing, and workspace commands, but there are other ways to access them. One way is by using the command palette, which will look familiar to you if you've used an app like Sublime Text before. The Command Palette is invoked by typing Control or Command on the Mac, Shift + P. The command palette provides access to all of VS Code's commands. You can execute editor commands, open files, search for symbols, and much more. You can see here it's a pretty lengthy list, and as I start typing the name of a command, the list narrows down. The command palette works with more than just the app's built-in commands though. It also works with any commands that have been added by extensions, which we'll get to a little bit later. It's a really handy way to get to all of the features of code without your hands having to leave the keyboard. One last feature I want to point out before we move on is Zen Mode. Sometimes you just want to concentrate on writing code without any distractions. Zen Mode lets you focus on just the file that you're working on, so to enter Zen Mode, you can either select Toggle Zen Mode from the View menu, or type Command or Control + K, and then Z. So I'm going to select a file. And I'm going to do this, I'm going to type Command + K + Z, and you can see that when I do this, everything in the UI disappears, except for the file that I'm working on. Now I still have access to the command palette if I want it of course, but the rest of the UI is hidden. So to leave Zen Mode, you just type the command key again. So I'll type in Command + K + Z, and I'm now out of Zen Mode. All right so that's a quick introduction to some of Visual Studio Code's UI. Take a few minutes to familiarize yourself with it, and then we'll move on.

Contents