SOFTWARE TRAINING for STUDENTS @ UNIVERSITY of WISCONSIN-MADISON
< Back to all Training Materials

Hand's On Activities: VS Code

Activity 1: Navigating VS Code & Using the Command Palette

Objective:

Familiarize students with the VS Code interface, including the Explorer, Editor, Terminal, and Command Palette.

1. Open VS Code and Create a New Project:

  • Launch VS Code and open a new folder (File → Open Folder).
  • Inside the folder, create a new file named index.html.
  • Add the following basic structure:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>VS Code Navigation</title>

</head>

<body>

    <h1>Welcome to VS Code!</h1>

</body>

</html>

2. Use the Command Palette (Ctrl + Shift + P or Cmd + Shift + P on Mac)

  • Open the Command Palette and search for:
    • “Change Color Theme” → Try switching themes.
    • “Format Document” → Use it to auto-format the HTML file.
    • “Open Settings (JSON)” → View and edit user settings.

3. Open the Integrated Terminal (Ctrl + ~)

  • Navigate to the project folder using cd <folder-name>.
  • Run the command code . to open the folder in VS Code.

Test the Setup:

  • Try using keyboard shortcuts (Ctrl + B to toggle Explorer, Ctrl + J to toggle Terminal).
  • Experiment with different VS Code themes and icon packs.

Extension Tasks:

  • Install an Extension (Prettier, Live Server, or ESLint).
  • Use Split View to open two files side by side.

Activity 2: Working with Extensions & Customizing VS Code

Objective:

Learn how to install, manage, and configure extensions in VS Code for a more efficient workflow.

1. Open the Extensions Marketplace (Ctrl + Shift + X)

  • Search for and install the following extensions:
    • Prettier – Code Formatter
    • Live Server (for running HTML files)
    • Bracket Pair Colorizer (optional for better code readability)

2. Configure Settings for Extensions

  • Open Settings (Ctrl + ,) and search for Prettier.
  • Enable Format on Save (Editor: Format On Save).
  • Save the settings and test auto-formatting by writing some messy code in a new script.js file.

3. Test Live Server

  • Open index.html, then click Go Live in the status bar.
  • Make a change in the file and see it auto-refresh in the browser.

Test the Setup:

  • Check if Prettier formats the code automatically when saving.
  • Open the Extensions Sidebar and disable/enable an extension to observe the changes.

Extension Tasks:

  • Install an icon theme extension (e.g., Material Icon Theme).
  • Modify settings in settings.json to change default VS Code behaviors.

Activity 3: Integrated Terminal & Debugging Basics

Objective:

Learn how to use the Integrated Terminal and debug JavaScript inside VS Code.

1. Open the Integrated Terminal (Ctrl + ~)

  • Create a new JavaScript file (script.js) and add the following code:

function greetUser(name) {

    return `Hello, ${name}!`;

}

console.log(greetUser(“VS Code”));

  • Run the script using Node.js:

node script.js

2. Use the Debug Console

  • Set a breakpoint by clicking next to a line number.
  • Open the Run & Debug Panel (Ctrl + Shift + D) and start debugging (F5).
  • Step through the code and inspect variable values.

3. Modify the Debug Configuration (launch.json)

  • Click “Create a launch.json file” in the Debug Panel.
  • Select Node.js and modify the file to customize debugging options.

Test the Setup:

  • Run the script in the terminal and check the output.
  • Use breakpoints to pause execution and inspect variables.

Extension Tasks:

  • Debug a Python or HTML/CSS project.
  • Add console logs to track program flow.

Activity 4: Git and Version Control in VS Code

Objective:

Learn how to use Git inside VS Code for version control.

1. Initialize a Git Repository

  • Open a new VS Code project folder and run:

git init

  • Create a file README.md and add some text.

2. Use Source Control Panel (Ctrl + Shift + G)

  • Stage the changes (+ button).
  • Add a commit message and commit the changes.

3. Connect to GitHub

  • Open the Command Palette (Ctrl + Shift + P) and search for:
    • “Git: Clone” → Clone an existing repository.
    • “Git: Push” → Push changes to GitHub.

Test the Setup:

  • Check if commits appear in the Source Control Panel.
  • Try undoing a commit using git reset.

Extension Tasks:

  • Create a new branch and switch to it.
  • Use GitLens extension to view commit history.

Activity 5: Mini-Project – Productivity Boost with VS Code

Objective:

Combine extensions, keyboard shortcuts, and terminal commands to create an efficient workflow.

1. Set Up a New Project with a Starter Template

mkdir my-project && cd my-project

touch index.html style.css script.js

2. Use Extensions for Efficiency

  • Install and enable Emmet for faster HTML coding.
  • Use Multi-Cursor Editing (Alt + Click) to edit multiple lines simultaneously.

3. Automate Tasks with a Task Runner

  • Open the Command Palette (Ctrl + Shift + P) and select “Tasks: Configure Task”.
  • Choose “Create a task.json file from template” and set up a build task.

4. Organize with Workspaces

  • Save the current setup as a VS Code Workspace (File → Save Workspace As…).

Test the Setup:

  • Run the Task Runner (Ctrl + Shift + B) and check if it executes the commands.
  • Use workspace settings to customize VS Code for a specific project.

Extension Tasks:

  • Set up Prettier for auto-formatting on save.
  • Configure a Live Server workspace for frontend development.