The VS Code interface

Let's go over the VS Code interface. In the following screenshot, you can see five distinctive sections:

Section 1 of VS Code has six icons (more will appear after installing certain plugins). The last one at the bottom of the toolbar, which is a gear symbol, represents the settings. All the others represent different modes, from top to bottom:

  1. Explorer mode, which allows us to look for the files that are open in the given workspace
  2. Search mode, which allows us to look for a particular text element throughout the whole workplace
  1. A built-in Git client (more on that in Chapter 3, Functions)
  2. Debugger mode, which halts and inspects code in the middle of the execution in order to understand what's happening under the hood
  3. VS Code's plugin marketplace

Every mode changes the content of section 2. This is as an area that is dedicated to working with the workspace as a whole, which includes adding new files, removing existing ones, working with the workspace, or traversing through variables in debugging sessions.

Section 3 is the main one. Here, we actually write and read the code. You can have multiple tabs or even split this window into many: vertically, horizontally, or both. Most of the time, each tab represents one file in the workspace.

If you don't have section 4 open, then go to View | Terminal or use the Ctrl + ` shortcut. You can also drag this section out from the upper edge of section 5 using your mouse, if you prefer.

Section 5 has four subsections. In PROBLEMS, VS Code will point you to some potential issues in the code. The OUTPUT and DEBUG CONSOLE tabs' roles are self-explanatory, and we won't use them much. The most important tab here is Terminal: it duplicates the Terminal built into your OS (hence, it does not directly relate to VS Code itself). Terminals allow us to run system-wide commands, create folders, write to files, execute Python scripts, and run any software, which is essentially everything you can do via your OS graphical interface, but done just using code. We will cover the Terminal in more depth in Chapter 9, Shell, Git, Conda, and More – at Your Command. Conveniently, VS Code's Terminals open in the root directory of the workspace, which is a feature we will constantly utilize throughout the book.

Lastly, section 5 is an information bar that shows the current properties of the workspace, including the interpreter's name, Git repository and branch names (more on that in Chapter 3, Functions), and cursor position. Most of those elements are interactive!

One more feature that is hidden from the newcomers, but is an extremely powerful feature of VS Code, is its command palette, as shown in the following screenshot:

You can open the command palette using the Ctrl (command on macOS) + Shift + P shortcut. The command palette allows you to type in, select, and execute practically any feature of the application, from switching the color theme to searching for a word, to almost anything else. This feature allows programmers to avoid using a mouse or trackpad, and once mastered, it drastically increases productivity.

For example, let's create a new file (Ctrl/command + N) and type Hello Python!. Now, in order to switch that text to uppercase, all we need is to do the following:

  1. Select all of the text by using Ctrl/command + A.
  2. Open the command palette (Ctrl/command + Shift + P) and type Upper. Select the Transform to Uppercase command (note that the command palette also shows shortcuts).

Spend some time learning VS Code's features! One great place for that is the Interactive Playground: you can jump straight into it by typing the name into the command palette.

Another great feature of VS Code is that it can use the key bindings that you use in other editors, including Vim, Sublime, and Atom. If you're used to their bindings, then switch to them, as they will save you a lot of time and frustration.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset