{"id":801,"date":"2026-08-21T10:59:43","date_gmt":"2026-08-21T15:59:43","guid":{"rendered":"https:\/\/sts.doit.wisc.edu\/training-materials\/?post_type=manual&p=801"},"modified":"2026-08-21T10:59:44","modified_gmt":"2026-08-21T15:59:44","slug":"vs-code-a-hands-on-introduction-to-the-developers-editor","status":"publish","type":"manual","link":"https:\/\/sts.doit.wisc.edu\/training-materials\/manual\/vs-code-a-hands-on-introduction-to-the-developers-editor\/","title":{"rendered":"VS Code: A Hands-On Introduction to the Developer\u2019s Editor"},"content":{"rendered":"\n
\"The<\/figure>\n\n\n\n
\n

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

Text Editors and IDEs<\/h3>\n\n\n\n

What They Are:<\/strong><\/p>\n\n\n\n

Applications used for writing, editing, and managing code efficiently. VS Code<\/strong> is a lightweight yet powerful code editor with built-in features for development.<\/p>\n\n\n\n

Popular Options:<\/strong><\/p>\n\n\n\n

\n
\n
    \n
  • VS Code<\/strong> \u2013 Lightweight, extensible, with integrated Git, debugging, and vast extension support.<\/li>\n\n\n\n
  • Sublime Text<\/strong> \u2013 Fast and minimalist editor with great performance.<\/li>\n\n\n\n
  • JetBrains WebStorm<\/strong> \u2013 A full-fledged IDE designed specifically for JavaScript and front-end development.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

    Why It’s Helpful:<\/strong><\/p>\n\n\n\n

    These tools offer syntax highlighting, code completion, debugging capabilities, and integrations<\/strong> that enhance productivity and improve code quality.<\/p>\n\n\n\n

    Version Control with Git & GitHub<\/h3>\n\n\n\n

    What It Is:<\/strong><\/p>\n\n\n\n

    Built-in Git support<\/strong> in VS Code allows users to manage version control directly from the editor.<\/p>\n\n\n\n

    Key Features:<\/strong><\/p>\n\n\n\n

    \n
    \n
      \n
    • Source Control Panel (Ctrl + Shift + G<\/code>)<\/strong> \u2013 Stage, commit, and push changes easily.<\/li>\n\n\n\n
    • GitLens Extension<\/strong> \u2013 Provides deeper Git insights, such as commit history and blame annotations.<\/li>\n\n\n\n
    • Command Line Git (git init<\/code>, git add .<\/code>, git commit -m "message"<\/code>)<\/strong> \u2013 Run Git commands directly from the Integrated Terminal (Ctrl + ~<\/code>)<\/strong>.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

      Why It’s Helpful:<\/strong><\/p>\n\n\n\n

      Tracks changes, facilitates collaboration, and allows rollbacks to previous versions.<\/p>\n\n\n\n

      Integrated Terminal<\/h3>\n\n\n\n

      What It Is:<\/strong><\/p>\n\n\n\n

      A built-in command-line interface<\/strong> within VS Code for running shell commands, Git operations, and package managers.<\/p>\n\n\n\n

      Key Features:<\/strong><\/p>\n\n\n\n

      \n
      \n
        \n
      • Open the Terminal (Ctrl + ~<\/code>)<\/strong> to execute commands without leaving VS Code.<\/li>\n\n\n\n
      • Supports multiple shells<\/strong> (PowerShell, Bash, Zsh, CMD).<\/li>\n\n\n\n
      • Run scripts, package managers (npm, yarn), and Git commands<\/strong> directly.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

        Why It’s Helpful:<\/strong><\/p>\n\n\n\n

        Eliminates the need for switching between external terminals, increasing workflow efficiency.<\/p>\n\n\n\n

        Debugger<\/h3>\n\n\n\n

        What It Is:<\/strong><\/p>\n\n\n\n

        A tool to set breakpoints<\/strong>, inspect variables, and troubleshoot issues in JavaScript, Python, and other languages.<\/p>\n\n\n\n

        Key Features:<\/strong><\/p>\n\n\n\n

        \n
        \n
          \n
        • Run & Debug Panel (Ctrl + Shift + D<\/code>)<\/strong> \u2013 Manage debugging sessions.<\/li>\n\n\n\n
        • Breakpoints<\/strong> \u2013 Pause execution at specific lines for inspection.<\/li>\n\n\n\n
        • Call Stack View<\/strong> \u2013 Track execution flow through function calls.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

          Why It’s Helpful:<\/strong><\/p>\n\n\n\n

          Identifies and resolves errors efficiently without relying solely on console.log()<\/code>.<\/p>\n<\/section>\n\n\n\n

          \n

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

          Efficient File Navigation<\/h3>\n\n\n\n

          What It Is:<\/strong><\/p>\n\n\n\n

          Quickly accessing and managing files inside VS Code using shortcuts and search tools<\/strong>.<\/p>\n\n\n\n

          Common Methods:<\/strong><\/p>\n\n\n\n

          \n
          \n
            \n
          • Quick File Search (Ctrl + P<\/code>)<\/strong> \u2013 Instantly open files by name.<\/li>\n\n\n\n
          • Explorer Panel (Ctrl + B<\/code>)<\/strong> \u2013 Browse project structure and manage files.<\/li>\n\n\n\n
          • Split View (Ctrl + \\<\/code>)<\/strong> \u2013 Edit multiple files side by side.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

            Why It’s Helpful:<\/strong><\/p>\n\n\n\n

            Boosts efficiency<\/strong> by reducing the time spent searching for files.<\/p>\n\n\n\n

            Code Formatting & Linting<\/h3>\n\n\n\n

            What It Is:<\/strong><\/p>\n\n\n\n

            Ensuring consistent code style<\/strong> and identifying errors through formatting tools and linters.<\/p>\n\n\n\n

            Common Methods:<\/strong><\/p>\n\n\n\n

            \n
            \n
              \n
            • Install Prettier<\/strong> for automatic formatting (Ctrl + Shift + I<\/code>).<\/li>\n\n\n\n
            • Enable Format on Save<\/strong> in settings.json<\/code>.<\/li>\n\n\n\n
            • Use ESLint<\/strong> for JavaScript code quality.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

              Why It’s Helpful:<\/strong><\/p>\n\n\n\n

              Improves readability<\/strong>, enforces best practices, and reduces syntax errors.<\/p>\n\n\n\n

              Working with Extensions<\/h3>\n\n\n\n

              What It Is:<\/strong><\/p>\n\n\n\n

              Enhancing VS Code’s capabilities with plugins from the Extensions Marketplace (Ctrl + Shift + X<\/code>)<\/strong>.<\/p>\n\n\n\n

              Popular Extensions:<\/strong><\/p>\n\n\n\n

              \n
              \n
                \n
              • Prettier<\/strong> \u2013 Code formatting.<\/li>\n\n\n\n
              • Live Server<\/strong> \u2013 Auto-refreshes the browser when saving HTML\/CSS\/JS files.<\/li>\n\n\n\n
              • GitLens<\/strong> \u2013 Enhances Git integration.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n

                Why It’s Helpful:<\/strong><\/p>\n\n\n\n

                Adds custom functionality<\/strong> to streamline coding tasks.<\/p>\n<\/section>\n\n\n\n

                \n

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

                Version Control with Git<\/h3>\n\n\n\n

                What It Is:<\/strong><\/p>\n\n\n\n

                A system for tracking code changes and collaboration<\/strong> using Git.<\/p>\n\n\n\n

                Key Commands:<\/strong><\/p>\n\n\n\n

                \n
                <strong><em>git init            # Initialize a repository\ngit add .           # Stage changes\ngit commit -m "message"  # Commit changes\ngit push origin main     # Push to GitHub<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                Why It’s Helpful:<\/strong><\/p>\n\n\n\n
                Tracks project history and allows team collaboration without losing work.<\/p>\n\n\n\n
                Debugging Basics<\/h3>\n\n\n\n
                What It Is:<\/strong><\/p>\n\n\n\n
                Using VS Code’s built-in debugger<\/strong> to find and fix errors<\/strong>.<\/p>\n\n\n\n
                Common Methods:<\/strong><\/p>\n\n\n\n
                \n
                \n
                  \n
                • Set Breakpoints<\/strong> \u2013 Pause code execution at specific lines.<\/li>\n\n\n\n
                • Step Over\/Into<\/strong> \u2013 Navigate through function calls and execution flow.<\/li>\n\n\n\n
                • Inspect Variables<\/strong> \u2013 View values inside the Debug Console.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                  Why It’s Helpful:<\/strong><\/p>\n\n\n\n
                  Reduces reliance on console.log()<\/code> debugging, making issue tracking more systematic<\/strong>.<\/p>\n\n\n\n
                  Customization & Workspaces<\/h3>\n\n\n\n
                  What It Is:<\/strong><\/p>\n\n\n\n
                  Optimizing VS Code settings for better efficiency and a personalized experience<\/strong>.<\/p>\n\n\n\n
                  Customization Examples:<\/strong><\/p>\n\n\n\n
                  \n
                  \n
                    \n
                  • Change Themes (Ctrl + K, Ctrl + T<\/code>)<\/strong> \u2013 Adjust VS Code’s appearance.<\/li>\n\n\n\n
                  • Customize Keyboard Shortcuts<\/strong> \u2013 Modify hotkeys via keybindings.json<\/code>.<\/li>\n\n\n\n
                  • Workspaces<\/strong> \u2013 Save and organize settings for different projects.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                    Why It’s Helpful:<\/strong><\/p>\n\n\n\n
                    Creates a personalized workflow<\/strong>, reducing distractions and improving productivity.<\/p>\n<\/section>\n\n\n\n
                    \n
                    Best Practices<\/h2>\n\n\n\n
                    Organized Code Structure<\/h3>\n\n\n\n
                    \n
                    \n
                      \n
                    • Use folders<\/strong> to separate files (src\/<\/code>, assets\/<\/code>, config\/<\/code>).<\/li>\n\n\n\n
                    • Write modular, reusable code<\/strong> (.js<\/code> files instead of inline scripts).<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                      Comment and Document Code<\/h3>\n\n\n\n
                      Add meaningful comments<\/strong> and use JSDoc<\/strong> for function documentation.<\/p>\n\n\n\n
                      Example:<\/p>\n\n\n\n
                      \n
                      <strong><em>\/**\n * Calculates the sum of two numbers.\n * @param {number} a\n * @param {number} b\n * @returns {number}\n *\/\nfunction sum(a, b) {\n    return a + b;\n}<\/em><\/strong><\/code><\/pre>\n<\/div>\n\n\n\n
                      Debugging & Troubleshooting<\/h3>\n\n\n\n
                      \n
                      \n
                        \n
                      • Use Console Logs (console.log()<\/code>)<\/strong> for quick debugging.<\/li>\n\n\n\n
                      • Set Breakpoints<\/strong> in the Debug Panel<\/strong> for step-by-step inspection.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                        Continuous Learning<\/h3>\n\n\n\n
                        \n
                        \n
                          \n
                        • Stay updated with new VS Code features<\/strong> and shortcuts<\/strong>.<\/li>\n\n\n\n
                        • Explore community extensions<\/strong> and custom settings<\/strong>.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/section>\n\n\n\n
                          \n
                          Conclusion<\/h2>\n\n\n\n
                          VS Code is a powerful tool<\/strong> that can be optimized for maximum efficiency. By mastering shortcuts, debugging, extensions, and Git integration<\/strong>, you can streamline your development workflow<\/strong>.<\/p>\n<\/section>\n\n","protected":false},"author":19,"featured_media":0,"template":"","meta":{"_acf_changed":false,"_uw_seo_meta_title":"","_uw_seo_meta_description":"","_uw_seo_twitter_card_type":"summary_large_image","_uw_seo_meta_image":"","_uw_seo_meta_image_url":"","_uw_seo_meta_image_sizes":[],"_uw_seo_custom_meta_tags":[],"footnotes":""},"categories":[3],"class_list":["post-801","manual","type-manual","status-publish","hentry","category-coding-and-data"],"acf":[],"_links":{"self":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/types\/manual"}],"author":[{"embeddable":true,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/users\/19"}],"version-history":[{"count":2,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/801\/revisions"}],"predecessor-version":[{"id":1094,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/manual\/801\/revisions\/1094"}],"wp:attachment":[{"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/media?parent=801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sts.doit.wisc.edu\/training-materials\/wp-json\/wp\/v2\/categories?post=801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}