VS Code: An Overview and the Interface

Every cowboy needs a horse, every Batman needs a Robin, and every DevOps professional needs a great code editor. DevOps revolves around code. When you work with code every day, you must have a go-to code editor. For many DevOps ninjas out there, Visual Studio (VS) Code is their editor of choice.

VS Code is the new popular kid on the block and has quickly gained adoptions by millions of developers. It is a complete integrated development environment (IDE) but isn’t nearly as bloated as its counterpart Visual Studio has become. VS Code is meant to keep you in a single application through all development efforts yet it does not overwhelm you with options.

If you’re still using notepad, PowerShell ISE, or any other simplified code editor, it’s time to step up your game and learn VS Code. In this chapter, you’re going to do just that. We’ll cover the basics of VS Code to get you writing and committing code in Git repositories in no time.

VS Code: An overview

Before you can begin using VS Code, it’s important you first understand the basics. If you’ve been using VS Code for a while already, you can skip to the chapter project. Otherwise, keep reading to get a jumpstart on what VS Code is and the various features it has to make you more productive.

VS Code is simple to download and install. If you’ve never used VS Code before, you can easily install it, quickly open up a new tab, and start coding away immediately. But you’d be coding the hard way and putting up with a lot of necessary BS. In this course, we’re all about the “No-BS” way.

To ensure you endure the least amount of BS, let’s first cover the foundational stuff you need to get going. This chapter will not cover everything VS Code provides, but it will give you just enough of a jumpstart to dive into the chapter project and know enough to get around.

The interface

When you open up VS Code for the first time, you will see a user interface that looks like the following screenshot. You’ll see that VS Code has a few main areas you’ll be staring at day in and day out.

• Editor Window (Tabs/Groups): The editor window is where you’ll be doing the majority of your work. This pane is where you will view and edit all of the code you’re working on. Whenever you open a new file or edit an existing file, the editor window is where the code will show up. VS Code has tabs in this editor pane that allows you to open up multiple files at once, along with editor groups that group together various tabs.

• Workspace: The workspace will be the next most common part of the UI you’ll be using. The workspace is where any files that you have open in tabs will show up. Here, you’ll commonly open entire folders too in order to see all files in a particular folder at once.

• Sidebar: As a DevOps pro (hopefully) in Git, the sidebar is where you’ll see information on the Git repo you have open, such as the name of the branch you’re working under and the ability to push Git changes to a remote repo.

• Panels: The panels section is the “output” section. Under this pane, you will find various “tabs” with information returned by VS Code and its extensions. Here is where you will also find the handy integrated terminal. The integrated terminal is a built-in Bash terminal (with other shells included via extensions) that allows you to run code directly in VS Code without having to open a separate shell.

• Status Bar: The status bar provides information about the open editor tab. The status bar shows cursor position, encoding, and the format VS Code that recognizes the file format to be, among other things. The status bar is where VS Code and its extensions will also display information as they run.

Try it yourself

We have already configured an environment for you to practice. Simple, press the Run button and try it yourself!