04. VSCode basics

• 1: Keyboard shortcuts
• 2: Managing files
• 3: Editing code
• 4: Running code and the integrated terminal

1 - Keyboard shortcuts

Keyboard shortcuts

Everything you can do with a menu and a mouse has a keyboard shortcut. Menu+mouse is easier to learn, but keyboard shortcuts will make you about 30% more productive once you master them.

Rule of thumb: If you use the same mouse+menu commands over and over, learn the keyboard shortcut instead. Try to learn a shortcut or two each week.

I’ve highlighted my most-used keyboard shortcuts in the official cheatsheets from VSCode:

• Cheatsheet for Mac
• Cheatsheet for Windows if using WSL.
• Cheatsheet for Linux if using VirtualBox.

When you see, e.g., Ctrl+X, that means hold down the Control key and then press X.

2 - Managing files

Organizing and opening projects

The last thing we did in Lab 03. Installing the VSCode IDE was to open the python-test directory in VSCode.

Rule #1: Keep each project, assignment, and lab in its own directory. It is fine to aggregate those files under a single directory, like so:

~/seng-201
├── assignment1
├── assignment2
├── lab01
├── lab02
└── python-test
    ├── fib.py
    ├── hello.py
    └── hello2.py

Rule #2: Open the specific project directory in VSCode, not the parent directory. Suppose you want to work on assignment1, then you need to open the assignment1 folder. You open a folder in VSCode in two ways:

1. Use your Terminal/CLI to cd into the project folder, then type code .
2. Open VSCode first, then do File > Open Folder and descend inside the project folder, then click Open.

The folder you open serves as the working directory for VSCode. If you open the parent folder seng-201, you can still edit project files, but you will add complexity to running the projects. Don’t do it.

Explorer pane

The Explorer pane is where you browse and manage files. Open it by clicking on the Explorer icon on the main left sidebar:

Things you can do in the Explorer:

• Create new files and subdirectories.
• Double-click files to open.
• Right click files and directories for a variety of tools, like renaming and deleting.

Exercise

1. Click on the python-test folder name. You created this folder at the end of the 03. Installing the VSCode IDE lab

2. Click the New File icon. Type hello.py in the box and hit Enter.

   

3. You will see an editor tab pop open on the right with the name hello.py at the top.

Knowledge check:

• Question: (True/False) Each coding project should have its own directory on the filesystem?
• Question: (True/False) It’s okay to open the parent directory holding multiple projects in VSCode?
• Question: How do you open VSCode from the current directory from the CLI?

3 - Editing code

Editing

An Editor pane will automatically open every time you open a file. Things to know about the Editor windows:

1. You must explicitly save files you have edited. Do this with Ctrl+S (Windows, Linux) or Cmd+S (Mac)
2. The line numbers on the left side are used to identify individual lines of code in error messages and elsewhere.
3. Familiar text editing features like Cut and Paste are available in the Edit menu at the top or Right-Clicking in an editor window. Learn those keyboard shortcuts!
4. CMD+/ (Mac) and Ctrl+/ (Windows, Linux) toggles comments on the current line or selected lines. This is one of my favorite keyboard shortcuts!
5. Suppose your code calls a function defined elsewhere. Hold down Cmd (Mac) or Ctrl(Windows, Linux) and hover over the function call. It will turn blue like a link. Left click the link and the function definition in the editor. Very handy! Look up the Go back keyboard shortcut to return your cursor to where you were.
6. Not happy with a variable or function name? Right-click it > Rename Symbol It will be renamed everywhere in scope!
7. Use the arrow keys to move the cursor one character at a time. Hold down Alt (Windows, Linux) or Option (Mac) while tapping the left- or right-arrows. You will skip entire “words”. Again, very handy. Hold down Shift as well to select those words!

Exercise

Create a new file called fib.py in your python-test folder and paste in the following code:

def fibonacci(n):
    """
    Computes and returns the Fibonacci sequence of length n.
    Assumes n >= 1
    """
    if n == 1:
        return [1]
    if n == 2:
        return [1, 1]

    result = [1, 1]
    for i in range(2,n):
        result.append(result[i-1] + result[i-2])
    return result


print(fibonacci(1))
print(fibonacci(2))
print(fibonacci(6))
print(fibonacci(10))

2. Hold down Cmd (Mac) or Ctrl (Windows, Linux) and mouse over one of the fibonacci() calls at the bottom. Click the link and watch the cursor jump.
3. Using the keyboard shortcut, comment out the first three print(...) calls at the bottom all at once.
4. Hit Ctrl+S to save the file.
5. Now uncomment them all at once.
6. Right-click a fibonnaci() call and rename the symbol. Where does it change in the code?
7. Hit Ctrl+Z or Cmd+Z to undo the rename.

Knowledge check:

• Question: How do you comment/uncomment a block of code with your keyboard?
• Question: What is the keyboard shortcut for saving your edits to a file?
• Question: What does holding down Cmd or Ctrl + left-clicking on a name in the editor window do?

4 - Running code and the integrated terminal

VSCode itself does not know how to run Python code or any other language. VSCode instead uses tools installed on your computer to run programs, e.g., the Python tools you downloaded from https://python.org. So if you want to use VSCode to develop, e.g., Java or Javascript programs, you need to have the necessary tools installed on your system.

VSCode will automatically find language tools on your file system if they are installed in a “standard” location.

Running code

There are three ways to run a program file:

1. Select the Run menu at the top, then Start Debugging
   • If necessary, select the Python Debugger popup, and select default options of subsequent pop-ups until you see the program run in the interactive Terminal at the bottom.
   • We will discuss the difference between Start Debugging and Run Without Debugging in the future.
2. In the editor window, Right-click anywhere in the code to open the context menu, then select Run Python > Run Python File in Terminal.
3. Press the F5 hotkey to start debugging.

By default, VSCode will run the file in the active editor. Alternately, you can right-click a different file in the Explorer and run it.

Exercise

1. Create hello.py in the python-test directory if needed and add print("Hello World")
2. Run hello.py using the Run menu
3. Run it using the editor context window
4. Use the F5 key. If your F5 key is missing or hard to work with, use Google to research “how to reassign keyboard shortcuts in VSCode”. Reassigning it to the shortcut Cmd+R or Ctrl+R is a solid option.

The Integrated Terminal

When you ran your hello.py program, you should have seen a flurry of output in the Integrated Terminal window at the bottom. What just happened?

1. VSCode opened a Terminal CLI, like you did in the Launching a Terminal lab, except this one is embedded in VSCode.
2. VSCode issued the CLI command python with your file as an argument.
3. python runs in the Terminal and prints output.

Your Terminal contents will different, however, you should see Hello World in there.

Remember, VSCode doesn’t run Python code itself – it uses the tools installed on your computer to do it.

Important note: The Terminal in VSCode is an embedded version of the Terminal we used in Intro to the CLI. You can use the same CLI commands like cd, ls, mkdir, etc.

You may find it convenient to use this integrated Terminal rather than switching to a separate windows. Or you may prefer to keep them separate. Do what works for you.

You can always open the Terminal in VSCode by clicking the Terminal pane (highlighted red in the figure above), or by selecting the Terminal menu at the top.

Exercise

1. List directory contents in the integrated Terminal using the ls command.
2. Type cd ~ in the integrated Terminal to switch to your home directory. Notice how the Explorer pane does not change. You are only changing the working directory in the Terminal.
3. Run hello.py again using VSCode. What happens in the Terminal?
4. Use the Terminal to navigate to your python-test directory using cd commands.
5. Run the command touch hello2.py. Does it appear in the Explorer pane?
6. Run the command rm hello2.py. What happened? What happened in the Explorer pane?

Knowledge check:

• Question: What is the keyboard shortcut for debugging/running your program?
• Question: How do you open an integrated Terminal without running a Python program?
• Question: How can you print the name of the current working directory in the integrated Terminal?
• Question: If you have a runaway process in the integrated Terminal, how do you cancel/kill it? (The answer is the same as for the regular Terminal.)