Code with GitHub Codespaces and Visual Studio Code

Develop code using GitHub Codespaces and Visual Studio Code!

Step 3: Customize your codespace!

Nice work! 🎉 You created a codespace with a custom image!

You can customize your codespace by adding VS code extensions, adding features, setting host requirements, and much more.

Let's customize some settings in the .devcontainer.json file!

⌨️ Activity: Add customizations to the devcontainer file

1. Navigate to the .devcontainer/devcontainer.json file.

2. Add the following customizations to the body of the file before the last }.

    ,
    // Add the IDs of extensions you want installed when the container is created.
    "customizations": {
        "vscode": {
            "extensions": [
                "GitHub.copilot"
            ]
        },
        "codespaces": {
            "openFiles": [
                "codespace.md"
            ]
        }
    }

3. Click Commit changes and then select Commit changes directly to the main branch.

4. Create a new codespace by navigating to the landing page of your repository.

5. Click the Code button located in the middle of the page.

6. Click the Codespaces tab on the box that pops up.

7. Click the Create codespace on main button.

   Wait about 2 minutes for the codespace to spin itself up.

8. Verify your codespace is running, as you did previously.

9. The codespace.md file should show up in the VS Code editor.

10. The copilot extension should show up in the VS Code extension list.

    This will add a VS Code extension as well as open a file on start up of the codespace.

Next lets add some code to run upon creation of the codespace!

⌨️ Activity: Execute code upon creation of the codespace

1. Edit the .devcontainer/devcontainer.json file.

2. Add the following postCreateCommand to the body of the file before the last }.

    ,
    "postCreateCommand": "echo '# Writing code upon codespace creation!'  >> codespace.md"

3. Click Commit changes and then select Commit changes directly to the main branch.

4. Create a new codespace by navigating to the landing page of your repository.

5. Click the Code button located in the middle of the page.

6. Click the Codespaces tab on the box that pops up.

7. Click the Create codespace on main button.

   Wait about 2 minutes for the codespace to spin itself up.

8. Verify your codespace is running, as you did previously.

9. Verify the codespace.md file now has the text Writing code upon codespace creation!.

10. Wait about 20 seconds then refresh this page (the one you're following instructions from). GitHub Actions will automatically update to the next step.

---

Get help: Review the GitHub status page

© 2023 GitHub • Code of Conduct • MIT License