{"id":1092,"date":"2026-08-21T10:58:02","date_gmt":"2026-08-21T15:58:02","guid":{"rendered":"https:\/\/sts.doit.wisc.edu\/training-materials\/?post_type=activity&p=1092"},"modified":"2026-08-21T10:58:02","modified_gmt":"2026-08-21T15:58:02","slug":"vs-code","status":"publish","type":"activity","link":"https:\/\/sts.doit.wisc.edu\/training-materials\/activity\/vs-code\/","title":{"rendered":"VS Code"},"content":{"rendered":"\n
\n

Activity 1: Navigating VS Code & Using the Command Palette<\/h2>\n\n\n\n

Objective:<\/strong><\/h3>\n\n\n\n

Familiarize students with the VS Code interface<\/strong>, including the Explorer, Editor, Terminal, and Command Palette<\/strong>.<\/p>\n\n\n\n

1. Open VS Code and Create a New Project:<\/strong><\/h4>\n\n\n\n
    \n
  • Launch VS Code<\/strong> and open a new folder (File \u2192 Open Folder).<\/li>\n\n\n\n
  • Inside the folder, create a new file named index.html<\/strong>.<\/li>\n\n\n\n
  • Add the following basic structure:<\/li>\n<\/ul>\n\n\n\n

    <!DOCTYPE html><\/p>\n\n\n\n

    <html lang=”en”><\/p>\n\n\n\n

    <head><\/p>\n\n\n\n

        <meta charset=”UTF-8″><\/p>\n\n\n\n

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

        <title>VS Code Navigation<\/title><\/p>\n\n\n\n

    <\/head><\/p>\n\n\n\n

    <body><\/p>\n\n\n\n

        <h1>Welcome to VS Code!<\/h1><\/p>\n\n\n\n

    <\/body><\/p>\n\n\n\n

    <\/html><\/p>\n\n\n\n

    2. Use the Command Palette (<\/strong>Ctrl + Shift + P<\/strong> or<\/strong> Cmd + Shift + P<\/strong> on Mac)<\/strong><\/h4>\n\n\n\n
      \n
    • Open the Command Palette<\/strong> and search for:\n
        \n
      • \u201cChange Color Theme\u201d \u2192 Try switching themes.<\/li>\n\n\n\n
      • \u201cFormat Document\u201d \u2192 Use it to auto-format the HTML file.<\/li>\n\n\n\n
      • \u201cOpen Settings (JSON)\u201d \u2192 View and edit user settings.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

        3. Open the Integrated Terminal (<\/strong>Ctrl + ~<\/strong>)<\/strong><\/h4>\n\n\n\n
          \n
        • Navigate to the project folder using cd <folder-name>.<\/li>\n\n\n\n
        • Run the command code . to open the folder in VS Code.<\/li>\n<\/ul>\n\n\n\n

          Test the Setup:<\/strong><\/h3>\n\n\n\n
            \n
          • Try using keyboard shortcuts<\/strong> (Ctrl + B to toggle Explorer, Ctrl + J to toggle Terminal).<\/li>\n\n\n\n
          • Experiment with different VS Code themes<\/strong> and icon packs<\/strong>.<\/li>\n<\/ul>\n\n\n\n

            Extension Tasks:<\/strong><\/h3>\n\n\n\n
              \n
            • Install an Extension<\/strong> (Prettier, Live Server, or ESLint).<\/li>\n\n\n\n
            • Use Split View<\/strong> to open two files side by side.<\/li>\n<\/ul>\n<\/section>\n\n\n\n
              \n

              <\/h2>\n\n\n\n

              <\/p>\n<\/section>\n\n\n\n

              \n

              Activity 2: Working with Extensions & Customizing VS Code<\/h2>\n\n\n\n

              Objective:<\/strong><\/h3>\n\n\n\n

              Learn how to install, manage, and configure extensions<\/strong> in VS Code for a more efficient workflow.<\/p>\n\n\n\n

              1. Open the Extensions Marketplace (<\/strong>Ctrl + Shift + X<\/strong>)<\/strong><\/h4>\n\n\n\n
                \n
              • Search for and install the following extensions<\/strong>:\n
                  \n
                • Prettier \u2013 Code Formatter<\/strong><\/li>\n\n\n\n
                • Live Server<\/strong> (for running HTML files)<\/li>\n\n\n\n
                • Bracket Pair Colorizer<\/strong> (optional for better code readability)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                  2. Configure Settings for Extensions<\/strong><\/h4>\n\n\n\n
                    \n
                  • Open Settings (<\/strong>Ctrl + ,<\/strong>)<\/strong> and search for Prettier<\/strong>.<\/li>\n\n\n\n
                  • Enable Format on Save<\/strong> (Editor: Format On Save).<\/li>\n\n\n\n
                  • Save the settings and test auto-formatting<\/strong> by writing some messy code in a new script.js file.<\/li>\n<\/ul>\n\n\n\n

                    3. Test Live Server<\/strong><\/h4>\n\n\n\n
                      \n
                    • Open index.html<\/strong>, then click Go Live<\/strong> in the status bar.<\/li>\n\n\n\n
                    • Make a change in the file and see it auto-refresh in the browser.<\/li>\n<\/ul>\n\n\n\n

                      Test the Setup:<\/strong><\/h3>\n\n\n\n
                        \n
                      • Check if Prettier formats the code<\/strong> automatically when saving.<\/li>\n\n\n\n
                      • Open the Extensions Sidebar<\/strong> and disable\/enable an extension to observe the changes.<\/li>\n<\/ul>\n\n\n\n

                        Extension Tasks:<\/strong><\/h3>\n\n\n\n
                          \n
                        • Install an icon theme extension<\/strong> (e.g., Material Icon Theme<\/strong>).<\/li>\n\n\n\n
                        • Modify settings in settings.json<\/strong> to change default VS Code behaviors.<\/li>\n<\/ul>\n<\/section>\n\n\n\n
                          \n

                          Activity 3: Integrated Terminal & Debugging Basics<\/h2>\n\n\n\n

                          Objective:<\/strong><\/h3>\n\n\n\n

                          Learn how to use the Integrated Terminal<\/strong> and debug JavaScript<\/strong> inside VS Code.<\/p>\n\n\n\n

                          1. Open the Integrated Terminal (<\/strong>Ctrl + ~<\/strong>)<\/strong><\/h4>\n\n\n\n
                            \n
                          • Create a new JavaScript file (script.js) and add the following code:<\/li>\n<\/ul>\n\n\n\n

                            function greetUser(name) {<\/p>\n\n\n\n

                                return `Hello, ${name}!`;<\/p>\n\n\n\n

                            }<\/p>\n\n\n\n

                            console.log(greetUser(“VS Code”));<\/p>\n\n\n\n

                              \n
                            • Run the script using Node.js:<\/li>\n<\/ul>\n\n\n\n

                              node script.js<\/p>\n\n\n\n

                              2. Use the Debug Console<\/strong><\/h4>\n\n\n\n
                                \n
                              • Set a breakpoint<\/strong> by clicking next to a line number.<\/li>\n\n\n\n
                              • Open the Run & Debug Panel (<\/strong>Ctrl + Shift + D<\/strong>)<\/strong> and start debugging (F5).<\/li>\n\n\n\n
                              • Step through the code and inspect variable values.<\/li>\n<\/ul>\n\n\n\n

                                3. Modify the Debug Configuration (<\/strong>launch.json<\/strong>)<\/strong><\/h4>\n\n\n\n
                                  \n
                                • Click “Create a launch.json file”<\/strong> in the Debug Panel.<\/li>\n\n\n\n
                                • Select Node.js<\/strong> and modify the file to customize debugging options.<\/li>\n<\/ul>\n\n\n\n

                                  Test the Setup:<\/strong><\/h3>\n\n\n\n
                                    \n
                                  • Run the script in the terminal<\/strong> and check the output.<\/li>\n\n\n\n
                                  • Use breakpoints<\/strong> to pause execution and inspect variables.<\/li>\n<\/ul>\n\n\n\n

                                    Extension Tasks:<\/strong><\/h3>\n\n\n\n
                                      \n
                                    • Debug a Python or HTML\/CSS project<\/strong>.<\/li>\n\n\n\n
                                    • Add console logs<\/strong> to track program flow.<\/li>\n<\/ul>\n<\/section>\n\n\n\n
                                      \n

                                      Activity 4: Git and Version Control in VS Code<\/h2>\n\n\n\n

                                      Objective:<\/strong><\/h3>\n\n\n\n

                                      Learn how to use Git inside VS Code<\/strong> for version control.<\/p>\n\n\n\n

                                      1. Initialize a Git Repository<\/strong><\/h4>\n\n\n\n
                                        \n
                                      • Open a new VS Code project folder and run:<\/li>\n<\/ul>\n\n\n\n

                                        git init<\/p>\n\n\n\n

                                          \n
                                        • Create a file README.md<\/strong> and add some text.<\/li>\n<\/ul>\n\n\n\n

                                          2. Use Source Control Panel (<\/strong>Ctrl + Shift + G<\/strong>)<\/strong><\/h4>\n\n\n\n
                                            \n
                                          • Stage the changes (+ button).<\/li>\n\n\n\n
                                          • Add a commit message and commit the changes.<\/li>\n<\/ul>\n\n\n\n

                                            3. Connect to GitHub<\/strong><\/h4>\n\n\n\n
                                              \n
                                            • Open the Command Palette (<\/strong>Ctrl + Shift + P<\/strong>)<\/strong> and search for:\n
                                                \n
                                              • “Git: Clone” \u2192 Clone an existing repository.<\/li>\n\n\n\n
                                              • “Git: Push” \u2192 Push changes to GitHub.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                                                Test the Setup:<\/strong><\/h3>\n\n\n\n
                                                  \n
                                                • Check if commits appear in the Source Control Panel<\/strong>.<\/li>\n\n\n\n
                                                • Try undoing a commit<\/strong> using git reset.<\/li>\n<\/ul>\n\n\n\n

                                                  Extension Tasks:<\/strong><\/h3>\n\n\n\n
                                                    \n
                                                  • Create a new branch<\/strong> and switch to it.<\/li>\n\n\n\n
                                                  • Use GitLens extension<\/strong> to view commit history.<\/li>\n<\/ul>\n<\/section>\n\n\n\n
                                                    \n

                                                    Activity 5: Mini-Project \u2013 Productivity Boost with VS Code<\/h2>\n\n\n\n

                                                    Objective:<\/strong><\/h3>\n\n\n\n

                                                    Combine extensions, keyboard shortcuts, and terminal commands<\/strong> to create an efficient workflow.<\/p>\n\n\n\n

                                                    1. Set Up a New Project with a Starter Template<\/strong><\/h4>\n\n\n\n

                                                    mkdir my-project && cd my-project<\/p>\n\n\n\n

                                                    touch index.html style.css script.js<\/p>\n\n\n\n

                                                    2. Use Extensions for Efficiency<\/strong><\/h4>\n\n\n\n
                                                      \n
                                                    • Install and enable Emmet<\/strong> for faster HTML coding.<\/li>\n\n\n\n
                                                    • Use Multi-Cursor Editing (<\/strong>Alt + Click<\/strong>)<\/strong> to edit multiple lines simultaneously.<\/li>\n<\/ul>\n\n\n\n

                                                      3. Automate Tasks with a Task Runner<\/strong><\/h4>\n\n\n\n
                                                        \n
                                                      • Open the Command Palette (<\/strong>Ctrl + Shift + P<\/strong>)<\/strong> and select “Tasks: Configure Task”<\/strong>.<\/li>\n\n\n\n
                                                      • Choose “Create a task.json file from template”<\/strong> and set up a build task<\/strong>.<\/li>\n<\/ul>\n\n\n\n

                                                        4. Organize with Workspaces<\/strong><\/h4>\n\n\n\n
                                                          \n
                                                        • Save the current setup as a VS Code Workspace (<\/strong>File \u2192 Save Workspace As\u2026<\/strong>)<\/strong>.<\/li>\n<\/ul>\n\n\n\n

                                                          Test the Setup:<\/strong><\/h3>\n\n\n\n
                                                            \n
                                                          • Run the Task Runner<\/strong> (Ctrl + Shift + B) and check if it executes the commands.<\/li>\n\n\n\n
                                                          • Use workspace settings<\/strong> to customize VS Code for a specific project.<\/li>\n<\/ul>\n\n\n\n

                                                            Extension Tasks:<\/strong><\/h3>\n\n\n\n
                                                              \n
                                                            • Set up Prettier for auto-formatting<\/strong> on save.<\/li>\n\n\n\n
                                                            • Configure a Live Server workspace<\/strong> for frontend development.<\/li>\n<\/ul>\n<\/section>\n","protected":false},"featured_media":0,"template":"","class_list":["post-1092","activity","type-activity","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/activity\/1092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/activity"}],"about":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/types\/activity"}],"wp:attachment":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/media?parent=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}