Windows 11: Installing Visual Studio Code

Overview

Visual Studio Code (a.k.a VS Code) is a popular source code editor that runs on Windows, Mac, and Linux. It features built-in support for a variety of software languages as well as extensions for languages such as Python.

Follow this guide to acquire, install, and configure VS Code as a Python source code editor. The guide assumes that you have previously installed Python 3.x.

1.0 Download and install Visual Studio Code

Visual Studio Code serves as the default source code editor for SI 506. The teaching team utilizes VS Code as a teaching tool during lectures, labs, demos, in-class exercises, etc. We recommend highly that you install it in order to synch your local development environment with that of the teaching team.

Alternative products exist in the marketplace. Besides Python’s own IDLE app, popular editors and integrated development environments (IDEs) include PyCharm, Sublime Text, and the Eclipse Theia cloud (i.e., in-browser) and desktop IDE. Note that to use Jet Brain’s PyCharm you must apply for a free student license.

❗ Atom users beware: the Github team retired the text editor on 15 December 2022 in favor of VS Code and Github Codespaces.

You may prefer to run a different source code editor than VS Code. You are free to do so. However, the teaching team will assume that you know how to install, configure, and maintain your preferred source code editor or IDE without the need of our assistance. Our focus is VS Code.

1.1 Download Visual Studio Code

1.2 Install Visual Studio Code

Once the VS Code installer *.exe file is downloaded click the “Open file” link. Then do the following:

1. Accept the license terms, then click the “Next” button.

2. Accept the destination folder, then click the “Next” button.

3. Accept the default start menu folder, then click the “Next” button.

4. Click on additional installation tasks. ❗ Do not uncheck “Add to PATH” checkbox.

5. Click the “Install” button on the review screen.

6. Click the “Finish” button on the setup wizard page.

If all goes well VS Code will start up and display its welcome page.

💡 VS Code’s user documentation is both helpful and friendly. Commence with the Getting Started section of the documentation, in particular the user interface overview. The VS Code team has also produced a set of introductory videos that are worth watching.

2.0 Extensions

VS Code is highly customizable. It features an extensions marketplace that allows users to install Microsoft extensions as well as third-party contributions to enhance the development environment. See the VS Code Extension Marketplace page for more information on how to search, install, and manage extensions.

2.1 Install select extensions (required)

On the left-side of the VS Code user interface is positioned a vertical activity bar containing the following icons arranged vertically from the top:

• File explorer (two layered docs icon)

• Search (magnifying glass icon)

• Source Control (three dots connected by 2 lines icon)

• Debugger (triangle overlayed with a bug)

• Extensions (three connected tiles and one disconnected tile)

Click the “Extensions” icon to open the extensions panel. In the search box type the name of the extension (e.g., “Python”). After the extension is retrieved, click the extension’s blue “Install” button. Repeat the search/install procedure to add the following extensions:

2.2 Disable/uninstall the code runner extension

Occasionally, a student installs the code runner extension. Doing so changes the behavior of VS Code’s terminal pane. When running a Python file in VS Code with the code runner extension enabled, the output tab rather than the terminal tab is privileged in the run pane. There is nothing wrong with this behavior; it results in a different run pane view than what the teaching team will display during lectures and office hours.

If the code runner extension is not required for another class, work or project we recommend that it be disabled or uninstalled. Be sure to restart VS Code after disabling or uninstalling the extension.

Otherwise, the workaround is to right-click on the Python file and select “Run Python File in Terminal”. A terminal session will be invoked, the file run, and the run pane will open to the Terminal tab.

3.0 Settings

3.1 Enable Execute in File Dir (required)

Later in the semester you will read from and write to files stored locally on your file system by running Python files from inside VS Code. In order to avoid triggering a FileNotFoundError you must enable VS Code’s “Execute in File Dir” terminal setting.

Do the following:

1. From the horizontal top menu select File > Preferences > Settings.

2. In search box type: “Terminal: execute”.

3. Check the settings under Extensions > Python.

4. Enable the Python > Terminal: Execute In File Dir setting by clicking on the checkbox.

5. Close the settings tab

   

3.2 Change Ruff Linter/Formatter line length

The Ruff team defaults to a maximum line length of 88 characters for linting and formatting. Many developers, including Team 506, prefer a line length of 100 characters. This preference requires that you override the Ruff extension’s default line length.

❗ SI 506 auto graders will test your code assuming a line length of 100 characters.

Ruff default settings can be overridden using a TOML config file named either pyproject.toml,ruff.toml or .ruff.toml. You can find the SI 506 pyproject.toml file in the Canvas Files config/ directory. Download pyproject.toml locally and place it in your “root” SI506/ directory.

💡 During the first day of class we will have you create the following directory structure using Git Bash (win) and select Unix commands.

Documents/
  umich/
    courses/
      SI506/
        assignments/
        lessons/
        pyproject.toml        <--- locate file here
        SI506.code-workspace

3.3 Enable Bracket Pair Colorization

This useful setting colorizes matching brackets and braces as an aid to identification.

⚠️ This setting was formerly a community-provided extension. If you previously installed this extension it has now been deprecated and should be uninstalled in favor of enabling the new setting as described below.

Do the following:

1. From the horizontal top menu select File > Preferences > Settings.

2. In search box type: “Bracket Pair”.

3. Check the settings under Text Editor.

4. Enable the Editor > Bracket Pair Colorization: Enabled setting by clicking on the checkbox.

5. Close the settings tab

   

4.0 Download and install Git for Windows

Git for Windows provides a set of tools that permit Windows users to utilize Git, a distributed version control system. The SI 506 teaching team utilizes Git and the social computing platform Github to maintain a full version history of our code and docs in the cloud.

For SI 506 we want Windows users to learn how to use a Unix-style Bash terminal. Our immediate interest in Git for Windows is the Bash shell it provides. It’s called Git Bash and VS Code can be configured easily to use it. But first you must download and install Git for Windows.

💡 If you don’t have a Github account I encourage you to sign up for one (it’s free). While you don’t need to know Git or how to use Github for SI 506 you will likely need a Github account at some point in your programming future so creating one today is a good idea.

4.1 Download Git for Windows

Visit Git for Windows and click on the blue “Download” button to start the install process.

💡 Some students have acquired Git for Windows from the Git site. The Git for Windows team does not produce Windows installers; instead they simply point their links to the Git for Windows site.

4.2 Install Git for Windows

Once the gitforwindows installer *.exe file is downloaded click the “Open file” link to commence the install process. Click the “Yes” button to allow the installer app to make changes to your system.

After the installer opens:

1. Information: click the “Next” button to accept the license terms.

2. Select Destination Location: click the “Next” button to accept the default C:\Program Files\Git install location.

3. Select Components: click the “Next” button to accept the default selection of components to be installed.

   Recommended

   • Click the checkbox “Check daily for Git for Windows updates” if you want to be alerted about updates.

   • If you are running the Windows Terminal click the checkbox “Add a Git Bash Profile to Windows Terminal”

4. Select Start Menu Folder: click the “Next” button to accept the default Git start menu folder.

5. Choosing the default editor used by Git: Click the dropdown and select the “Use Visual Studio Code as Git’s default editor” option as Git’s default editor. Then click the “Next” button.

   

6. Adjusting the name of the initial branch in new repositories: select the “Override the default branch name for new repositories” option.

   ❗ Accept the suggested the branch name “main” (the old “master” branch name has been retired in favor of “main”).

7. Adjusting your PATH environment: click the “Next” button to accept the recommended “Git from the command line and also from third-party software” configuration option.

8. Choosing the SSH executable: click the “Next” button to accept the default “Use bundled OpenSSH” option.

9. Choosing HTTPS transport backend: click the “Next” button to accept the default “Use the OpenSSL library” option.

10. Configuring the line ending conversions: click the “Next” button to accept the default “Checkout Windows-Style, commit Unix-Style endings” option.

11. Configuring the terminal emulator to use with Git Bash: click the “Next” button to accept the default “Use MinTTY (the default MSYS2 terminal)”.

12. Choose the default behavior of ‘git pull’: click the “Next” button to accept the default “fast-forward or merge” option.

13. Choose a credential helper: click the “Next” button to accept the default “Git Credential Manager” option.

14. Configuring extra options: click the “Next” button to accept the default “Enable file system caching” option.

15. Configuring experimental options: Ignore the experimental options checkbox (leave unchecked) and click the “Install” button.

16. Completing the Git Setup Wizard: click the “Finish” button to accept the default “Yes, restart the computer now” option.

4.3 Configure Visual Studio Code to use Git Bash

Now switch VS Code’s default terminal to Git Bash.

1. Start up or return to Visual Studio Code.

2. Press Ctrl + Shift + P to reveal the searchable Command Palette.

3. Start typing “Terminal: Select Default Profile” in the command menu search box.

4. The search action will return “Terminal: Select Default Profile”

   

5. You will be prompted to select your preferred terminal emulator.

6. Select the GitBash option in the dropdown list.

   

7. If you are currently running a terminal session, click the delete icon (garbage can) in the terminal pane to terminate the current session.

   From the taskbar menu click Terminal > New Terminal to start a new terminal session. You can also type Ctrl + Shift + ’ (yes, the keyboard shortcut includes a trailing single quotation mark (’)) to start a new terminal session. The terminal pane should open with Git Bash running displaying green, magenta, and yellow text before the cursor.

   

   Congratulations. VS Code is now running the Git Bash shell in the terminal pane.

5.0 Check the installation

On the “Get Started” page under “Start” click the “New file” link.

Do the following:

1. Select the dropdown “Text File” option.

2. Click the “Select a language” link.

3. Select the dropdown “Python” option (requires scrolling)

4. Write the following line of code:

   print('I just installed VS Code and Git for Windows.')
   

5. From the taskbar select File > Save As…

6. Name the file “scratch.py” and save it to your /Documents directory. 💡 The extension .py indicates that this is a Python file.

7. Click the triangle run button (top right of editor pane) to run scratch.py. VS Code will start a terminal session, run your file, and print the string “I just installed VS Code and Git for Windows” in the terminal pane.

   

Appendix A. Managing extensions

VS Code makes it easy to manage your extensions. You can install, disable, update, and uninstall extensions through the activity bar extensions view, the Command Palette (commands have the Extensions: prefix) or command-line switches.

A.1 View installed extensions

Click on the activity bar extensions icon. The extensions view will be displayed. Click on the three dots ("…") to the right of the “EXTENSIONS” heading. Select “Show Enabled Extensions.” The extension(s) that you have installed will be listed.

A.2 Recommended/Popular extensions

Again click on the three dots ("…") to the right of the Extensions heading, and select “Show Recommended Extensions.” You will be presented with a number of recommended extensions which you can install once you become more familiar with VS Code, Git, Github and other technologies and platforms.

A.3 Uninstall/Disable extensions

To uninstall an extension, click the extensions icon in the activity bar. Scan your “enabled” extensions and then click the gear icon to the right of the extension entry. Choose “Uninstall” from the drop-down menu. This will uninstall the extension and prompt you to reload VS Code.

If you don’t want to permanently remove an extension, you can instead disable it temporarily by clicking the gear icon and selecting “Disable”. You can disable an extension either globally or just for the current workspace. You will be prompted to reload VS Code after you disable an extension.

If you need to disable all installed extensions, click on the three dots ("…") to the right of the Extensions heading and select “Disable All Installed Extensions”. Extensions remain disabled for all VS Code sessions until you re-enable them.