Setting Up VS Code and Claude Code

Note: This handout is very detailed and many of those details are important. If you don’t read carefully, you will accidentally set things up incorrectly and have a very hard time correcting the mistakes.

Contents

Part 1: Setting Up Python

This course uses Python 3.14. If you already have a Python 3.14.x version installed, you can skip this part.

  1. Download the most recent version of the Python 3.14 installer.

  2. Windows: The first page of the Python installer has a checkbox labeled ‘Add python.exe to PATH’. Select it.

    Installer checkboxes: “Add python.exe to PATH”

  3. After the installation finishes, restart your computer.

Part 2: Setting Up VS Code

  1. Download VS Code from here and install it.

  2. Start VS Code. There is no need to sign in at this time.

  3. Click the ‘Extensions’ tab on the left toolbar.

    VS Code Extensions icon

  4. Type ‘Python’ into the search bar and install the extension by Microsoft named simply ‘Python’.

    • Note: You might see slight differences from this screenshot (colors, icons, etc.).

    The Python extension by Microsoft in the Extensions marketplace

  5. Type ‘multi-command’ into the search bar and install the multi-command extension.

    The multi-command extension by ryuta46

  6. Create a new folder named “15-112” anywhere on your desktop.

    1. Note: To create a folder, open “Finder” (Mac) or “File Explorer” (Windows) and go to “Desktop”. Press cmd+shift+n (Mac) or ctrl+shift+n (Windows) to create a new folder, type “15-112”, and press “Enter”.

Part 3: Setting Up cmu_graphics

  1. In VS Code, choose the “Terminal” menu from the top menu bar and select “New Terminal”.

  2. Windows: In the terminal that appears at the bottom of the screen, type pip install cmu-graphics and press “Enter”.

  3. Mac: In the terminal that appears at the bottom of the screen, type pip3 install cmu-graphics and press “Enter”.

Part 4: Setting Up helloWorld

  1. Going back to VS Code, click “File” on the menu bar at the top of the screen.

    1. Click “Open Folder”, navigate to your new 15-112 folder, and open it.

  2. Click the “Explorer” icon on the left-hand side (the two-page icon). This opens a pane showing all the folders and files in the folder you currently have open.

    VS Code Explorer icon

  3. Create a new blank file called helloWorld.py in your 15-112 folder.

    1. To create a new file within your project, right-click anywhere within the highlighted region below, select “New File”, type “helloWorld.py”, and press “Enter”.
    2. Alternatively, click the “New File” icon in the top right of this section.

    VS Code Explorer pane with the file-list area outlined in red

    1. Note: In general, end your file names with “.py” so that they are treated as Python files.

  4. Copy and paste this Python program, which displays “Hello World” using cmu_graphics, into helloWorld.py.

  5. Look at the status bar at the bottom of the window for the Python version VS Code is using. If it says ‘Python 3.14’, you’re set! If not, click on that text. When the dropdown appears, select the version starting with “Python 3.14”.

  6. Press cmd+shift+p (Mac) or ctrl+shift+p (Windows) to open the ‘Command Palette’.

    VS Code Command Palette

  7. Type ‘settings’, then click ‘Preferences: Open User Settings (JSON)’ (or ‘Preferences: Open Settings (JSON)’ if you see that instead).

  8. Paste these settings into the page that opens (replacing any settings already there) and save.

    1. To save, choose File → Save in the top left, or press cmd+s (Mac) or ctrl+s (Windows).
    {
    "window.zoomLevel": 0,
    "editor.fontSize": 18,
    "terminal.integrated.fontSize": 18,
    "python.terminal.executeInFileDir": true,
    "python.terminal.launchArgs": ["-i"],
    "python.linting.pylintEnabled": false,
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": false
    },
    "editor.acceptSuggestionOnEnter": "off",
    "editor.quickSuggestionsDelay": 10,
    "editor.wordBasedSuggestions": "off",
    "editor.parameterHints.enabled": false,
    "editor.rulers": [80]
}

  9. Press cmd+shift+p (Mac) or ctrl+shift+p (Windows) to open the ‘Command Palette’ again, type ‘Keyboard Shortcuts’, and click ‘Preferences: Open Keyboard Shortcuts (JSON)’. (Be careful here: do not choose the option about default keyboard shortcuts.)

  10. Paste these settings into the page that opens (replacing any settings already there) and save.

    • To save, choose File → Save in the top left, or press cmd+s (Mac) or ctrl+s (Windows).
    [
    {
        "key": "cmd+b",
        "command": "runCommands",
        "args": {
            "commands": [
                "workbench.action.terminal.kill",
                "python.execInTerminal"
            ]
        }
    },
    {
        "key": "ctrl+b",
        "command": "runCommands",
        "args": {
            "commands": [
                "workbench.action.terminal.kill",
                "python.execInTerminal"
            ]
        }
    }
]

  11. Now re-open helloWorld.py in your editor window and press ctrl+b to run it. (From now on, use ctrl+b to run your Python programs.)

Part 5: Setting Up Claude Code

  1. Open the Extensions view in VS Code again.

  2. Search for ‘Claude Code’. Select the extension published by Anthropic, then click Install.

  3. With your 15-112 folder open, open a Python file. Click the Claude spark icon (top right or in the Activity Bar).

    Extensions search results for “Claude Code”

    The Claude Code for VS Code extension page

    The Claude spark icon in the top-right of the editor

  4. Click “Claude.ai Subscription” and complete the browser sign-in.

    Claude Code sign-in panel

Part 6: Setting Claude Code to Manual Mode

For your term project, it is very important that you understand every line of code that Claude writes for you. The best way to do that is to inspect every change it proposes and accept each one manually.

  1. In the Claude Code panel, find the permission-mode label below the chat input.

  2. Click the mode label. From the list, select Manual.

    Claude Code Manual Selection

  3. Do not select ‘Edit automatically’, ‘Accept edits’, ‘Auto’, or ‘Bypass permissions’. Those modes do not pause for your approval before each edit.

  4. Before you send a prompt, check that the mode below the text box says Manual. Repeat this check in every new session.

Part 7: Reviewing a Claude Code Edit

  1. Open helloWorld.py and make sure you can run it before asking Claude to edit it.
  2. Ask Claude: ‘In helloWorld.py, add a print line that says Setup complete.’
  3. Claude should show a side-by-side diff. Read the old and proposed code carefully before taking any action.
  4. Choose Accept if the edit is correct, or Reject if it is not. Then run the file again to check the result.

Part 8: Setting Up Git

  1. Visit GitHub and sign up for an account if you don’t already have one.

  2. If you haven’t already done so, submit your GitHub username using this Google Form. Double-check the spelling: the course staff uses it to give you access to your repository.

  3. Windows: Visit the Git download page, choose the Standalone Installer, and install it. (During installation, use all the default options.)

  4. Mac: In VS Code, choose Terminal → New Terminal, then enter xcode-select --install in the terminal that appears at the bottom of the screen.

  5. Close VS Code, then re-open it.

  6. Press cmd+shift+p (Mac) or ctrl+shift+p (Windows) to open the ‘Command Palette’ again, type git, and choose Git: Clone. On the next menu, choose Clone from GitHub.

  7. VS Code will ask you to sign in to your GitHub account. Do so.

  8. When VS Code asks which repository to clone, enter https://github.com/15-112-Fall-2026-Qatar/lab-sample.

  9. Choose a local folder to hold the cloned files.

  10. After the clone completes, choose Open when VS Code asks whether to open the cloned repository.

  11. Run the file labSample.py using ctrl+b.