Moment 4: Your Professional Code Editor: Visual Studio Code

Reading time: approx. 10 min

You have installed VS Code, created a Python project and even version controlled it with Git. Now it's time to tie everything together and get to know the program where you will spend most of your time: your code editor. Visual Studio Code is much more than a glorified text editor. It is a complete hub for your development work.

Learning to work efficiently in VS Code is crucial. In this moment we go through its interface, the powerful integrated terminal and how you customize the program with extensions to suit your needs.

What You Will Learn

After this moment you will be able to:

• Navigate VS Code's main parts: the Activity Bar, the Side Bar and the Panel.
• Open and work with an entire project folder, which is the professional way of working.
• Use the integrated terminal to run commands without switching windows.
• Find and install important extensions that improve your productivity.

The Basics: The Anatomy of VS Code

When you open VS Code you are met by an interface that can be divided into five main areas:

1. Activity Bar: The outermost left column with icons. Each icon represents a main view, e.g. the Explorer, Search, Git (Source Control) and Extensions.
2. Side Bar: The larger panel to the left that shows the content for the view you selected in the Activity Bar. Most often you see your project folder's file structure here.
3. Editor Group: The largest area in the middle where your open files are displayed in tabs.
4. Panel: A panel at the bottom that can show different things, most commonly the integrated terminal, but also error messages (Problems) and output (Output).
5. Status Bar: The thin bar at the very bottom. It shows useful information like which Git branch you are on, any errors and what language the current file is written in.

Practical Examples: An Efficient Workflow

Open an Entire Project

The best way to work in VS Code is to open an entire folder, not just individual files. Then you get an overview of the whole project.

1. Open your regular terminal (not the one in VS Code yet).
2. Navigate to your project folder, e.g. my_project_2.
3. Type the following command and press Enter:

   code .
   

   The command code is a shortcut for VS Code, and . means "the current folder". Your entire project now opens in a new VS Code window.

The Integrated Terminal

One of the best features in VS Code is the built-in terminal.

• Open it: Press Ctrl + (the control key plus the backtick key, which is often to the left of the number 1) or go via the menu Terminal > New Terminal.
• The advantage: You never need to switch windows to run commands! You can activate your Python environment, run git status or start your program, all while you see your code in the window above.

The Command Palette: Your Superpower

VS Code has a tool for finding and running all of its commands: the Command Palette.

• Open it: Press Ctrl + Shift + P.
• Use it: Start typing what you want to do, e.g. "change theme" or "git clone". The palette shows you all matching commands. This is the fastest way to find features you don't know the keyboard shortcut for.

Load Your Toolbox: Important Extensions

Extensions are what make VS Code so incredibly powerful.

1. Click on the puzzle piece icon in the Activity Bar to open the Extensions view.
2. Here you can search for and install extensions. Here are some you should install right away:

• Python (from Microsoft): Absolutely necessary for Python development. Gives you features like error checking (linting), code completion (IntelliSense), debugging and much more.
• GitLens: Turbocharges the Git integration. You can see who wrote each line of code (git blame), easily see file history and much more, directly in the editor.
• Prettier - Code formatter: A tool that automatically reformats your code so it follows a consistent and clean style every time you save. Perfect for learning and maintaining good code hygiene.

Exercise: Configure Your Editor

Now we put it all together.

1. Make sure you have navigated to your project folder my_project_2 in your regular system terminal.
2. Open the entire project in VS Code with the command code .
3. Open the integrated terminal in VS Code (Ctrl + ).
4. Activate your virtual Python environment directly in the integrated terminal with source .venv/bin/activate. Notice how (.venv) appears in the terminal.
5. Go to the Extensions view in the Activity Bar.
6. Search for and install the official Python extension from Microsoft.
7. Search for and install GitLens.

Next Steps

Perfect! You now have a fully configured, professional code editor. Your workflow is efficient and you are ready to tackle real projects. In the next moment, The World of the Web: HTML, CSS & JavaScript, we use our new environment to build and preview a simple, local website.