Skip to content

Commit 9ca9cf0

Browse files
Update to 3 in STEP and README.md
1 parent b5c1b60 commit 9ca9cf0

File tree

2 files changed

+54
-31
lines changed

2 files changed

+54
-31
lines changed

.github/steps/-step.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2
1+
3

README.md

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,58 +16,81 @@ _Develop code using GitHub Codespaces and Visual Studio Code!_
1616
</header>
1717

1818
<!--
19-
<<< Author notes: Step 2 >>>
19+
<<< Author notes: Step 3 >>>
2020
Start this step by acknowledging the previous step.
2121
Define terms and link to docs.github.com.
2222
-->
2323

24-
## Step 2: Add a custom image to your codespace!
24+
## Step 3: Customize your codespace!
2525

26-
_Nice work! :tada: You created your first codespace and pushed code using VS Code!_
26+
_Nice work! :tada: You created a codespace with a custom image!_
2727

28-
You can configure the development container for a repository so that any codespace created for that repository will give you a tailored development environment, complete with all the tools and runtimes you need to work on a specific project.
28+
You can customize your codespace by adding VS code extensions, adding features, setting host requirements, and much more.
2929

30-
**What are development containers?** Development containers, or dev containers, are Docker containers that are specifically configured to provide a fully featured development environment. Whenever you work in a codespace, you are using a dev container on a virtual machine.
30+
Let's customize some settings in the `devcontainer.json` file!
3131

32-
A dev container file is a JSON file that lets you customize the default image that runs your codespace, VS code settings, run custom code, forward ports and much more!
32+
### :keyboard: Activity: Add customizations to the `devcontainer` file
3333

34-
Let's add a `devcontainer.json` file and add a custom image.
34+
1. Navigate to the `.devcontainer/devcontainer.json` file.
35+
1. Add the following customizations to the body of the file before the last `}`.
3536

36-
### :keyboard: Activity: Add a .devcontainer.json file to customize your codespace
37+
```jsonc
38+
,
39+
// Add the IDs of extensions you want installed when the container is created.
40+
"customizations": {
41+
"vscode": {
42+
"extensions": [
43+
"GitHub.copilot"
44+
]
45+
},
46+
"codespaces": {
47+
"openFiles": [
48+
"codespace.md"
49+
]
50+
}
51+
}
52+
```
3753

38-
1. Navigating back to your **Code** tab of your repository, click the **Add file** drop-down button, and then click `Create new file`.
39-
1. Type or paste the following in the empty text field prompt to name your file.
54+
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
55+
1. Create a new codespace by navigating to the landing page of your repository.
56+
1. Click the **Code** button located in the middle of the page.
57+
1. Click the **Codespaces** tab on the box that pops up.
58+
1. Ensure the number of active codespaces does not reach the maximum (typically 2). For more information, see [understanding the codespace lifecycle](https://docs.github.com/en/codespaces/getting-started/understanding-the-codespace-lifecycle).
4059

41-
```
42-
.devcontainer/devcontainer.json
43-
```
60+
> **Tip**: To stop an active codespace, click the **•••** next to **<span>&#x25cf;</span>Active** and select **Stop codespace** from the menu.
61+
62+
1. Click the **Create codespace on main** button.
63+
64+
> Wait about **2 minutes** for the codespace to spin itself up.
65+
66+
1. Verify your codespace is running, as you did previously.
67+
1. The `codespace.md` file should show up in the VS Code editor.
68+
1. The `copilot` extension should show up in the VS Code extension list.
69+
70+
This will add a VS Code extension as well as open a file on start up of the codespace.
71+
72+
Next lets add some code to run upon creation of the codespace!
4473

45-
1. In the body of the new **.devcontainer/devcontainer.json** file, add the following content:
74+
### :keyboard: Activity: Execute code upon creation of the codespace
75+
76+
1. Edit the `.devcontainer/devcontainer.json` file.
77+
1. Add the following postCreateCommand to the body of the file before the last `}`.
4678

4779
```jsonc
48-
{
49-
// Name this configuration
50-
"name": "Codespace for Skills!",
51-
// Use the base codespace image
52-
"image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
53-
54-
"remoteUser": "codespace",
55-
"overrideCommand": false
56-
}
80+
,
81+
"postCreateCommand": "echo '# Writing code upon codespace creation!' >> codespace.md"
5782
```
5883

5984
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
60-
1. Create a new codespace by navigating back to the **Code** tab of your repository.
61-
1. Click the green **Code** button located in the middle of the page.
85+
1. Create a new codespace by navigating to the landing page of your repository.
86+
1. Click the **Code** button located in the middle of the page.
6287
1. Click the **Codespaces** tab on the box that pops up.
63-
1. Click the **Create codespace on main** button OR click the `+` sign on the tab. This will create a new codespace on the main branch. (Notice your other codespace listed here.)
88+
1. Click the **Create codespace on main** button.
6489

6590
> Wait about **2 minutes** for the codespace to spin itself up.
6691
67-
1. Verify that your new codespace is running, as you did previously.
68-
69-
Note the image being used is the default image provided for GitHub Codespaces. It includes runtimes and tools for Python, Node.js, Docker, and more. See the full list here: https://aka.ms/ghcs-default-image. Your development team can use any custom image that has the necessary prerequisites installed. For more information, see [codespace image](https://aka.ms/configure-codespace).
70-
92+
1. Verify your codespace is running, as you did previously.
93+
1. Verify the `codespace.md` file now has the text `Writing code upon codespace creation!`.
7194
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.
7295

7396
<footer>

0 commit comments

Comments
 (0)