Computer Science

VS Code

Visual Studio Code is a free, open source, cross-platform, text editor distributed by Microsoft.

Installing VS Code

To download and install VS Code:

  1. On your Mac or PC, use a browser to go to https://code.visualstudio.com .
  2. Click the Download button to get the version of VS Code for your computer. An installation package will be downloaded on to your computer, probably in the Downloads folder of your computer.
  3. Go to the Downloads folder to find that installer, double-click on the installer, and answer the various questions to allow the software to be installed on your computer.
  4. Once the software has been installed you can start the program by launching "Visual Studio Code" from your Applications, or searching for "VS Code," or even just "code" and launching from there. The first time you start the program it may take you to the Internet for an introduction to the software. Feel free to look around if you like.

Installing Extensions

VS Code is an enormously powerful editor that can be configured in a wide variety of ways, primarily by

  1. installing extensions
  2. setting configurations in the editors configuration file.

Make the following modifications to your VS Code installation:

  1. Select Code > Preferences > Extensions and install:
    1. Python, by Microsoft (ms-python.python)
    2. Language Support for Java (TM) by Redhat (redhat.java)
    3. Java Extension Support by Microsoft (vscjava.vscode-java-pack)
  2. Select Code > Preferences > Settings and:
    1. Search for word wrap and set it to on Once you've done, this, you'll see a colored line on the left side of the setting, indicating that it has been changed from its default value.
    2. Search for tab, find the setting for Editor: Insert Spaces and check the box there. (If you're programming in Python, that language doesn't work well with tabs. This setting allows you to use the Tab key, and converts the Tab to spaces instead.)
      Also, set Editor: Tab Size to 4 spaces (the standard in Python).
  3. Ultimately, you want to change a number of settings that might otherwise interfere with your work in VS Code. To manually change settings, select View > Command Palette... and search for Open User Settings (JSON). This reveals a JavaScript Object Notation (JSON)-formatted file that you can use to change settings manually.

    JSON settings file for Poly classes
    {
        "editor.wordWrap": "on",
        "editor.minimap.enabled": false,
        "editor.autoClosingBrackets": "never",
        "editor.parameterHints.enabled": false,
        "editor.codeLens": false,
        "editor.hover.enabled": false,
        "editor.quickSuggestions": {
            "comments": "off",
            "strings": "off",
            "other": "off"
        },
        "editor.autoClosingQuotes": "never",
        "editor.suggest.showMethods": false,
        "editor.suggest.showClasses": false,
        "editor.suggest.showColors": false,
        "editor.suggest.showConstants": false,
        "editor.suggest.showConstructors": false,
        "editor.suggest.showCustomcolors": false,
        "editor.suggest.showEnumMembers": false,
        "editor.suggest.showEnums": false,
        "editor.suggest.showEvents": false,
        "editor.suggest.showFields": false,
        "editor.suggest.showFiles": false,
        "editor.suggest.showFolders": false,
        "editor.suggest.showFunctions": false,
        "editor.suggest.showIcons": false,
        "editor.suggest.showInterfaces": false,
        "editor.suggest.showKeywords": false,
        "editor.suggest.showModules": false,
        "editor.suggest.showOperators": false,
        "editor.suggest.showProperties": false,
        "editor.suggestOnTriggerCharacters": false,
        "editor.suggest.snippetsPreventQuickSuggestions": false,
        "editor.suggest.showWords": false,
        "editor.suggest.showValues": false,
        "editor.suggest.showVariables": false,
        "editor.suggest.showUnits": false,
        "editor.suggest.showTypeParameters": false,
        "editor.suggest.showStructs": false,
        "editor.suggest.showSnippets": false,
        "editor.suggest.showReferences": false,
        "java.inlayHints.parameterNames.enabled": "none",
        
    }
    You'll notice that most of the editor's auto-suggestions are turned off—at this stage, these hints are more annoying than helpful. At early stages in your programming career, one benefits from having to remember to write one's own code.

Using VS Code

Developers use VS Code in different ways. It is suggested for this course that you use the following system.

  1. Working on a project
    If you have a folder that holds a number of files that you are working on for a project, open that folder in VSCode. The files will appear down the left side of the screen (in the "Explorer") and you can quickly select one or multiple files for working on.
  2. Running a program
    There are a number of ways that you can run a program that you're working on, depending on the type of file that you're working on and the extensions that you've downloaded.
    There's an integrated terminal that you can use to run programs. This terminal will pop up when invoked by an extension that is trying to run the program.
  3. VSCode's internal Terminal
    I've occasionally had trouble getting the internal Terminal to work well—interacting with the correct Python environment, for example—but it can be convenient for many students. (Note that the Terminal app on your computer is much faster than the VSCode Terminal.)
    If you are going to use the VSCode Terminal, the default location for that pane is at the bottom of the screen. You should configure the Terminal to appear on the side—there's more room on a landscape computer screen horizontally than there is vertically, and this allows you to see more code. You can configure this by ctrl-clicking or right-clicking on a Terminal menu bar and selecting "Move Panel Right".)