Adding Your First JavaScript File in VS Code

In this video, I walk you through how to create your first JavaScript file and connect it to your HTML page using GitHub Copilot in VS Code.

What You'll Learn

• How to start a new Copilot chat session with the correct file context.
• How to ask Copilot to generate and link a JavaScript file.
• How to manually copy and paste code when the auto-apply fails.
• How to use Chrome DevTools to inspect your console output.

Step-by-Step Guide

1. Start a New Copilot Chat with File Context

   • Click the toggle chat button in VS Code.
   • Open your index.html file so it becomes the active context for the Copilot chat.
   • Start a new chat if needed.

2. Ask Copilot to Add JavaScript

   • Type:
     Please create a JavaScript file at the root and add it to the index.html file.
   • Accept the Copilot suggestion and apply changes to index.html.
   • If prompted to create a new file (e.g., main.js), accept it.
   • If something goes wrong, click Copy and manually paste the code where needed.

3. Verify Script is Connected

   • Open Chrome and right-click anywhere on the page.
   • Click Inspect to open Developer Tools.
   • Select the Console tab to view log messages from your JavaScript file.
   • You should see that main.js is loaded correctly.

4. Split the Editor in VS Code (Optional)

   • Click on the main.js file to open it.
   • Use the Split Editor button to view index.html and main.js side by side.

5. Test with console.log()

   • Inside main.js, add:
     1console.log("Hello, world!");
   • Save the file and refresh the browser.
   • You should see Hello, world! printed in the console.

Why Use console.log?

• It's a powerful tool for debugging and tracking the flow of your program.
• Engineers use it constantly to verify if sections of code are being run.