This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

03. Installing the VSCode IDE

You will install a popular code editor, VSCode, in your Linux-ish environment.

You are getting the first edition of all these pages. Please let me know if you find an error!

The most useful tool for a software developer, other than the brain, is an integrated development environment (IDE). You may have used IDEs in your classes, such as IDLE (which is bundled with Python), PyCharm, IntelliJ, Visual Studio, or XCode. IDEs usually have the following capabilities at a minimum:

  • Text editing for writing source code
  • Running the code
  • Debugging (more on this in the future)
  • Browsing files
  • Searching through files
  • Navigating through code structures easily

Most IDEs have many more capabilities. Software developers develop a preference for an IDE based on its capabilities, its ease-of-use, and the programming languages it supports.

In this class, we will use Visual Studio Code or VSCode. VSCode is an open source IDE maintained by Microsoft. It has support for nearly all programming languages, is lightweight on system resources, and has many optional add-in “extensions” to provide even more useful capabilities.

Note: VSCode works in Windows, Mac, and graphical Linux-based operating systems. If you are using Windows, we want to run it from our Linux environment

Choose the section corresponding to your Linux environment for instructions on installing VSCode. Skip to 04. VSCode basics lab if already have VSCode set up in macOS, Ubuntu, or with WSL.

1 - for WSL

Instructions for installing VSCode to work with the Windows Subsystem for Linux

You are getting the first edition of all these pages. Please let me know if you find an error!

This lab is for those who are on Windows and have set up the Windows Subsystem for Linux (WSL) using Option 1 for Windows from this lab.

Installation

  1. Install Visual Studio Code on the Windows side (not in WSL).

    • When prompted to Select Additional Tasks during installation, be sure to check the Add to PATH option so you can easily open a folder in WSL using the code command. code will launch VSCode from the CLI.

  2. Run VSCode from the Windows side after installation is complete.

  3. Click on the Extensions button in the far left sidebar Extensions icon or press Ctrl+Shift+X.

  4. Type WSL in the search box under EXTENSIONS: MARKETPLACE. The top result should be WSL from Microsoft. Click the install button:

    WSL in the extensions marketplace

  5. Also search for Python in the Extensions marketplace and install it. The one you want is also from Microsoft.

With the WSL extension, if we open a directory in Ubuntu with Python files, VSCode will use the tools installed in Ubuntu when working with files inside Ubuntu. When working with files in Windows, VSCode will use programs installed on the Windows side.

You should now be good to go to develop Python code that lives in Linux from VSCode.

Test drive

We are going to create a sample project directory in Ubuntu on the WSL, then open VSCode and edit files in that Linux directory.

Launching VSCode from Ubuntu

  1. Start Ubuntu from Windows by selecting Ubuntu from the Windows run menu, or by opening an Ubuntu terminal.

  2. Run the following in the Ubuntu terminal:

    bash
    
cd       # make sure in your home directory
mkdir python-test  # make a directory to play in
cd python-test     # change to the new directory
code .   # launch VSCode in the current directory
    The code command launches the VSCode program. It was added when we installed the WSL extension. The command code . says launch code and have it open the current working directory. The symbol . always means the working directory. Sometimes it will be necessary to explicitly tell the CLI we are referring to the working directory; more on those situations as they arise.

  3. You will see a download take place. A new VSCode window will open after a moment on the Windows side.

  4. You may be asked if you “trust the authors of the files in this folder”. Click the checkbox and then pick “Yes, I trust the authors.”

  5. You should see something like the following when complete.

    VSCode running on an empty python directory

    The pane on the left is the Explorer pane. This is showing the directory python-test. There are not yet any files in the directory.

Creating a new file

Let’s create a file on the Ubuntu side in our project directory. We should see it immediately in VSCode.

  1. Go back to your Ubuntu terminal and make sure you are in the python-test directory.
  2. Type the command touch hello.py to create an empty Python file.
  3. Go back to VSCode. You should see the file hello.py in the directory here. Click on it and it will open an empty editor pane. Viewing the new hello.py file in VSCode
  4. In the code editor, type print("Hello World"). Hit CTRL+S to save the file. You must explicitly save your changes in VSCode. adding text to hello.py
  5. Go back to the Ubuntu Terminal and type cat hello.py. You should see the code. output of cat hello.py in terminal

So you now have VSCode on the Windows side successfully editing files and interacting with directories inside Ubuntu.

You are now ready to code! Move on to 04. VSCode basics lab.

2 - for VirtualBox

Instructions for installing VSCode on Ubuntu running in VirtualBox

You are getting the first edition of all these pages. Please let me know if you find an error!

This lab is for those who are on Windows and are running Ubuntu inside VirtualBox using Option 2 for Windows from this lab.

Installation

  1. Open VirtualBox and start up your Ubuntu virtual machine (VM). Sign in to Ubuntu.

    • You may want to go full screen. Do this by selecting View -> Full Screen.
    • If the Full Screen is small, right-click on the Desktop -> Display Settings then change the Resolution to something larger, probably 1920x1080.
    • You exit full screen by hitting Right CTRL+F

  2. In Ubuntu, click the “App Center” icon in the left app bar.

    Ubuntu App Center icon

  3. Type visual studio code in the search bar of the App Center. Select the “code” result with the blue icon. Visual Studio Code search in Ubuntu’s App Center

  4. Click “Install” on the next screen.

  5. You will be prompted to enter your Ubuntu login password. VSCode will now take a few moments to install.

  6. You should see a green “Open” button when the installation finishes. Click “Open”. Visual Studio Code ready to open in app center

  7. VSCode will open and you will see a screen similar to this: Visual Studio Code welcome screen

  8. On the far left side of Ubuntu in the app bar (called Dash), you will now see the VSCode icon. Right-click it and select “Pin to Dash” to make it easy to launch VSCode from the Ubuntu desktop. Visual Studio Code pin to Dash

Configuring VSCode for Python

  1. Click on the Extensions button in the far left sidebar Extensions icon or press Ctrl+Shift+X.

  2. Type python in the search box under EXTENSIONS: MARKETPLACE. The top result should be Python from Microsoft. Click the Install button:

    Python in the extensions marketplace

You should now be good to go to develop Python code in Ubuntu.

Test drive

We are going to create a sample project directory in Ubuntu on the WSL, then open VSCode and edit files in that Linux directory.

Launching VSCode from the Terminal

  1. Start a Terminal in Ubuntu. Hit the Windows key and start typing terminal. Select the Terminal app.

    • You may also want to right-click the Terminal and “Pin to Dash” for easy startup!

  2. Run the following in the Ubuntu terminal:

    bash
    
cd       # make sure in your home directory
mkdir python-test  # make a directory to play in
cd python-test     # change to the new directory
code .   # launch VSCode in the current directory
    The code command launches the VSCode program. It was added when we installed the WSL extension. The command code . says launch code and have it open the current working directory. The symbol . always means the working directory. Sometimes it will be necessary to explicitly tell the CLI we are referring to the working directory; more on those situations as they arise.

  3. A VSCode window will open after a moment.

  4. You may be asked if you “trust the authors of the files in this folder”. Click the checkbox and then pick “Yes, I trust the authors.”

  5. You should see something like the following when complete.

    VSCode running on an empty python directory

    The pane on the left is the Explorer pane. This is showing the directory python-test. There are not yet any files in the directory.

Creating a new file

Let’s create a file in the Terminal in our project directory. We should see it immediately in VSCode.

  1. Go back to your Ubuntu terminal and make sure you are in the python-test directory.
  2. Type the command touch hello.py to create an empty Python file.
  3. Go back to VSCode. You should see the file hello.py in the directory here. Click on it and it will open an empty editor pane. Viewing the new hello.py file in VSCode
  4. In the code editor, type print("Hello World"). Hit CTRL+S to save the file. You must explicitly save your changes in VSCode. adding text to hello.py
  5. Go back to the Ubuntu Terminal and type cat hello.py. You should see the code. output of cat hello.py in terminal

So you now have VSCode successfully editing files and interacting with directories inside Ubuntu.

You are now ready to code! Move on to 04. VSCode basics lab.

3 - for Mac

Instructions for installing VSCode on Mac

You are getting the first edition of all these pages. Please let me know if you find an error!

This lab is for those who are installing Visual Studio Code on Mac machines.

Installation

Instructions in this section are taken from https://code.visualstudio.com/docs/setup/mac.

  1. Download Visual Studio Code for macOS.
  2. Open the browser’s download list and locate the downloaded app or archive.
  3. If archive, extract the archive contents. Use double-click for some browsers or select the ‘magnifying glass’ icon with Safari.
  4. Drag Visual Studio Code.app to the Applications folder, making it available in the macOS Launchpad.
  5. Open VS Code from the Applications folder by double clicking the icon.
  6. Add VS Code to your Dock by right-clicking on the icon, located in the Dock, to bring up the context menu and choosing Options, Keep in Dock.

Enable launching VSCode from the CLI

You can also run VS Code from the terminal by typing code after adding it to the path:

  • Launch VS Code.
  • Open the Command Palette (Cmd+Shift+P) and type ‘shell command’ to find the Shell Command: Install ‘code’ command in PATH command. Select this. Shell command in VSCode
  • You will need to restart any open Terminal windows for the change to take effect. You’ll be able to type code . in any folder to start editing files in that folder.

Configuring VSCode for Python

  1. Click on the Extensions button in the far left sidebar Extensions icon or press Ctrl+Shift+X.

  2. Type python in the search box under EXTENSIONS: MARKETPLACE. The top result should be Python from Microsoft. Click the Install button:

    Python in the extensions marketplace

You should now be good to go to develop Python code with VSCode on Mac.

Test drive

We are going to create a sample project directory in the Terminal, then open VSCode and edit files in that directory.

Launching VSCode from the Terminal

  1. Start a Terminal in Ubuntu. Hit the Windows key and start typing terminal. Select the Terminal app.

    • You may also want to right-click the Terminal and “Pin to Dash” for easy startup!

  2. Run the following in the Ubuntu terminal:

    bash
    
cd       # make sure in your home directory
mkdir python-test  # make a directory to play in
cd python-test     # change to the new directory
code .   # launch VSCode in the current directory
    The code command launches the VSCode program. It was added when we installed the WSL extension. The command code . says launch code and have it open the current working directory. The symbol . always means the working directory. Sometimes it will be necessary to explicitly tell the CLI we are referring to the working directory; more on those situations as they arise.

  3. A VSCode window will open after a moment.

  4. You may be asked if you “trust the authors of the files in this folder”. Click the checkbox and then pick “Yes, I trust the authors.”

  5. You should see something like the following when complete.

    VSCode running on an empty python directory

    The pane on the left is the Explorer pane. This is showing the directory python-test. There are not yet any files in the directory.

Creating a new file

Let’s create a file in the Terminal in our project directory. We should see it immediately in VSCode.

  1. Go back to your Terminal and make sure you are in the python-test directory.

  2. Type the command touch hello.py to create an empty Python file.

  3. Go back to VSCode. You should see the file hello.py in the directory here. Click on it and it will open an empty editor pane.

    Viewing the new hello.py file in VSCode

  4. In the code editor, type print("Hello World"). Hit CTRL+S to save the file. You must explicitly save your changes in VSCode.

    adding text to hello.py

  5. Go back to the Terminal and type cat hello.py. You should see the code.

    output of cat hello.py in terminal

So you now have VSCode successfully editing files and interacting with directories inside Ubuntu.

You are now ready to code! Move on to 04. VSCode basics lab.