Update Codespaces articles to match GUI changes in VS Code (#34148)

Co-authored-by: github-actions <github-actions@github.com>
github · Jan 27, 2023 · 933301f · 933301f
1 parent 29c3c16
commit 933301f
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 32 deletions.
diff --git a/assets/images/help/codespaces/add-prebuilt-container-command.png b/assets/images/help/codespaces/add-prebuilt-container-command.png
diff --git a/assets/images/help/codespaces/codespaces-command-palette.png b/assets/images/help/codespaces/codespaces-command-palette.png
diff --git a/assets/images/help/codespaces/codespaces-configure-features.png b/assets/images/help/codespaces/codespaces-configure-features.png
diff --git a/assets/images/help/codespaces/modify-active-configuration.png b/assets/images/help/codespaces/modify-active-configuration.png
diff --git a/assets/images/help/codespaces/prebuilt-container-ok-button.png b/assets/images/help/codespaces/prebuilt-container-ok-button.png
diff --git a/assets/images/help/codespaces/start-from-scratch.png b/assets/images/help/codespaces/start-from-scratch.png
diff --git a/...ent/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container.md b/...ent/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container.md
@@ -27,7 +27,7 @@ Occasionally, you may want to perform a full rebuild of your container. With a f
 
 You can perform a full rebuild in {% data variables.product.prodname_vscode %}.
 
-{% data reusables.codespaces.command-pallette %}
+{% data reusables.codespaces.command-palette %}
 1. Start typing "Rebuild" and select **Codespaces: Full Rebuild Container**.
 
    ![Screenshot of Full Rebuild Container command in the Command Pallette](/assets/images/help/codespaces/codespaces-rebuild-full.png)

diff --git a/...espaces/codespaces-reference/using-the-vs-code-command-palette-in-codespaces.md b/...espaces/codespaces-reference/using-the-vs-code-command-palette-in-codespaces.md
@@ -28,45 +28,45 @@ You can access the {% data variables.product.prodname_vscode_command_palette_sho
 - <kbd>F1</kbd>
 - From the Application Menu, click **View > Command Palette…**.
 
-  ![The application menu](/assets/images/help/codespaces/codespaces-view-menu.png)
+  ![Screenshot of the application menu](/assets/images/help/codespaces/codespaces-view-menu.png)
 
 ## Commands for {% data variables.product.prodname_codespaces %}
 
-To see all commands related to {% data variables.product.prodname_github_codespaces %}, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-command-palette), then start typing "Codespaces".
+To see all commands related to {% data variables.product.prodname_github_codespaces %}, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-vs-code-command-palette), then start typing "Codespaces".
 
-![A list of all commands that relate to {% data variables.product.prodname_github_codespaces %}](/assets/images/help/codespaces/codespaces-command-palette.png)
+![Screenshot of a list of all commands that relate to {% data variables.product.prodname_github_codespaces %}](/assets/images/help/codespaces/codespaces-command-palette.png)
 
 ### Suspending or stopping a codespace
 
-If you add a new secret or change the machine type, you'll have to stop and restart the codespace for it to apply your changes. 
+If you add a new secret or change the machine type, you'll have to stop and restart the codespace for it to apply your changes.
 
-To suspend or stop your codespace's container, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-command-palette), then start typing "stop". Select **Codespaces: Stop Current Codespace**.
+To suspend or stop your codespace's container, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-vs-code-command-palette), then start typing "stop". Select **Codespaces: Stop Current Codespace**.
 
-![Command to stop a codespace](/assets/images/help/codespaces/codespaces-stop.png)
+![Screenshot of the command to stop a codespace](/assets/images/help/codespaces/codespaces-stop.png)
 
 ### Adding a predefined dev container configuration
 
-To add a predefined dev container configuration, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-command-palette), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**
+To add a predefined dev container configuration, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-vs-code-command-palette), then start typing "dev container". Select **Codespaces: Configure Dev Container**.
 
-![Command to add a dev container](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+![Screenshot of the command to add a dev container](/assets/images/help/codespaces/add-prebuilt-container-command.png)
 
 ### Rebuilding a codespace
 
-If you add a dev container or edit any of the configuration files (`devcontainer.json` and `Dockerfile`), you'll have to rebuild your codespace for it to apply your changes. 
+If you add a dev container or edit any of the configuration files (`devcontainer.json` and `Dockerfile`), you'll have to rebuild your codespace for it to apply your changes.
 
-To rebuild your container, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-command-palette), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
+To rebuild your container, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-vs-code-command-palette), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
 
-![Command to rebuild a codespace](/assets/images/help/codespaces/codespaces-rebuild.png)
+![Screenshot of the command to rebuild a codespace](/assets/images/help/codespaces/codespaces-rebuild.png)
 
 {% data reusables.codespaces.full-rebuild-tip %}
 
 ### Codespaces logs
 
-You can use the {% data variables.product.prodname_vscode_command_palette_shortname %} to access the codespace creation logs, or you can use it export all logs. 
+You can use the {% data variables.product.prodname_vscode_command_palette_shortname %} to access the codespace creation logs, or you can use it export all logs.
 
-To retrieve the logs for {% data variables.product.prodname_github_codespaces %}, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-command-palette), then start typing "log". Select **Codespaces: Export Logs** to export all logs related to {% data variables.product.prodname_github_codespaces %} or select **Codespaces: View Creation Logs** to view logs related to the setup.
+To retrieve the logs for {% data variables.product.prodname_github_codespaces %}, [access the {% data variables.product.prodname_vscode_command_palette_shortname %}](#accessing-the-vs-code-command-palette), then start typing "log". Select **Codespaces: Export Logs** to export all logs related to {% data variables.product.prodname_github_codespaces %} or select **Codespaces: View Creation Logs** to view logs related to the setup.
 
-![Command to access logs](/assets/images/help/codespaces/codespaces-logs.png)
+![Screenshot of the command to access logs](/assets/images/help/codespaces/codespaces-logs.png)
 
 ## Further reading
 

diff --git a/...despaces/adding-a-dev-container-configuration/introduction-to-dev-containers.md b/...despaces/adding-a-dev-container-configuration/introduction-to-dev-containers.md
@@ -136,16 +136,24 @@ Using a predefined configuration is a great idea if you need some additional ext
 
 You can add a predefined dev container configuration either while working in a codespace, or while working on a repository locally. To do this in {% data variables.product.prodname_vscode_shortname %} while you are working locally, and not connected to a codespace, you must have the "Dev Containers" extension installed and enabled. For more information about this extension, see the [{% data variables.product.prodname_vs_marketplace_shortname %}](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers). The following procedure describes the process when you are using a codespace. The steps in {% data variables.product.prodname_vscode_shortname %} when you are not connected to a codespace are very similar.
 
-{% data reusables.codespaces.command-palette-container %}
+1. Access the {% data variables.product.prodname_vscode_command_palette %} (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Click **Codespaces: Configure Dev Container**.
+
+   ![Screenshot of the "Codespaces: Configure Dev Container" option](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+
+1. Click **Start from scratch**.
+
+   ![Screenshot of the "Start from scratch" option](/assets/images/help/codespaces/start-from-scratch.png)
+
+1. Click **Show All Definitions**.
+
+   ![Screenshot of the "Show All Definitions" option](/assets/images/help/codespaces/show-all-definitions.png)
+
 1. Click the definition you want to use.
 
    ![Screenshot of a list of predefined container definitions](/assets/images/help/codespaces/predefined-container-definitions-list.png)
 
-1. Follow the prompts to customize your definition. For more information on the options to customize your definition, see "[Adding additional features to your `devcontainer.json` file](#adding-additional-features-to-your-devcontainerjson-file)."
+1. Follow the prompts to customize your definition.
 1. Click **OK**.
-
-   ![Screenshot of the OK button](/assets/images/help/codespaces/prebuilt-container-ok-button.png)
-
 1. If you are working in a codespace, apply your changes, by clicking **Rebuild now** in the message at the bottom right of the window. For more information about rebuilding your container, see "[Applying changes to your configuration](#applying-configuration-changes-to-a-codespace)."
 
    ![Screenshot of a prompt to 'Rebuild now'](/assets/images/help/codespaces/rebuild-prompt.png)

diff --git a/...-a-dev-container-configuration/setting-up-your-dotnet-project-for-codespaces.md b/...-a-dev-container-configuration/setting-up-your-dotnet-project-for-codespaces.md
@@ -39,9 +39,9 @@ The default development container, or "dev container," for {% data variables.pro
 
    ![Screenshot of the 'C# (.NET)' option](/assets/images/help/codespaces/add-csharp-prebuilt-container.png)
 
-1. Click the latest version of .NET.
+1. Choose the version of .NET you want to use for your project. In this case, select the version marked "(default)."
 
-   ![Screenshot of the Node.js version selection](/assets/images/help/codespaces/add-dotnet-version.png)
+   ![Screenshot of the .NET version selection](/assets/images/help/codespaces/add-dotnet-version.png)
 
 1. A list of additional features is displayed. We'll install the .NET CLI, a command-line interface for developing, building, running, and publishing .NET applications. To install this tool, type `dotnet`, select `Dotnet CLI`, then click **OK**.
 

diff --git a/...ng-a-dev-container-configuration/setting-up-your-java-project-for-codespaces.md b/...ng-a-dev-container-configuration/setting-up-your-java-project-for-codespaces.md
@@ -39,7 +39,7 @@ The default development container, or "dev container," for {% data variables.pro
 
    ![Screenshot of the 'Java' option](/assets/images/help/codespaces/add-java-prebuilt-container.png)
 
-1. Click the latest version of Java.
+1. Choose the version of Java you want to use for your project. In this case, select the version marked "(default)."
 
    ![Screenshot of the Java version selection](/assets/images/help/codespaces/add-java-version.png)
 

diff --git a/...-a-dev-container-configuration/setting-up-your-nodejs-project-for-codespaces.md b/...-a-dev-container-configuration/setting-up-your-nodejs-project-for-codespaces.md
@@ -39,7 +39,7 @@ The default development container, or "dev container," for {% data variables.pro
 
    ![Screenshot of the 'Node.js & JavaScript' option](/assets/images/help/codespaces/add-node-devcontainer-config.png)
 
-1. Click the latest version of Node.js.
+1. Choose the version of Node.js you want to use for your project. In this case, select the version marked "(default)."
 
    ![Screenshot of the Node.js version selection](/assets/images/help/codespaces/add-node-version.png)
 

diff --git a/...-a-dev-container-configuration/setting-up-your-python-project-for-codespaces.md b/...-a-dev-container-configuration/setting-up-your-python-project-for-codespaces.md
@@ -39,7 +39,7 @@ The default development container, or "dev container," for {% data variables.pro
 
    ![Screenshot of the 'Python 3' option](/assets/images/help/codespaces/add-python-prebuilt-container.png)
 
-1. Click the latest version of Python 3.
+1. Choose the version of Python you want to use for your project. In this case, select the version marked "(default)."
 
    ![Screenshot of the Python 3 version selection](/assets/images/help/codespaces/add-python-version.png)
 

diff --git a/...codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file.md b/...codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file.md
@@ -26,6 +26,7 @@ redirect_from:
 1. To the right of the file editor, in the **Marketplace** tab, browse or search for the feature you want to add, then click the name of the feature.
 
    ![Screenshot of the Terraform feature in the Marketplace tab, with "Terra" in the search bar](/assets/images/help/codespaces/feature-marketplace.png)
+
 3. Under "Installation," click the code snippet to copy it to your clipboard, then paste the snippet into the `features` object in your `devcontainer.json` file.
 
    ![Screenshot of a code block in the Installation section of the Marketplace tab](/assets/images/help/codespaces/feature-installation-code.png)
@@ -65,17 +66,21 @@ To add features in {% data variables.product.prodname_vscode_shortname %} while
 
 {% endnote %}
 
-{% data reusables.codespaces.command-pallette %}
-2. Start typing "Configure" and select **Codespaces: Configure Dev Container Features**.
+{% data reusables.codespaces.command-palette %}
+2. Start typing "configure" and click **Codespaces: Configure Dev Container**.
+
+   ![Screenshot of the 'Configure Dev Container' option in the Command Palette](/assets/images/help/codespaces/codespaces-configure-features.png)
+
+1. Click **Modify your active configuration**.
 
-   ![The Configure Devcontainer Features command in the Command Palette](/assets/images/help/codespaces/codespaces-configure-features.png)
+   ![Screenshot of the 'Modify your active configuration' option in the Command Palette](/assets/images/help/codespaces/modify-active-configuration.png)
 
 3. Update your feature selections, then click **OK**.
 
-   ![The select additional features menu during container configuration](/assets/images/help/codespaces/select-additional-features.png)
+   ![Screenshot of the additional features menu during container configuration](/assets/images/help/codespaces/select-additional-features.png)
 
 4. If you're working in a codespace, a prompt will appear in the lower-right corner. To rebuild the container and apply the changes to the codespace you're working in, click **Rebuild Now**.
 
-   !["Codespaces: Rebuild Container" in the Command Palette](/assets/images/help/codespaces/rebuild-prompt.png)
+   ![Screenshot of the 'Codespaces: Rebuild Container' option in the Command Palette](/assets/images/help/codespaces/rebuild-prompt.png)
 
 {% endvscode %}
diff --git a/data/reusables/codespaces/command-palette-container.md b/data/reusables/codespaces/command-palette-container.md
@@ -1,6 +1,10 @@
-1. Access the {% data variables.product.prodname_vscode_command_palette %} (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Click **Codespaces: Add Development Container Configuration Files**.
+1. Access the {% data variables.product.prodname_vscode_command_palette %} (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Click **Codespaces: Configure Dev Container**.
 
-   ![Screenshot of the "Codespaces: Add Development Container Configuration Files" option](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+   ![Screenshot of the "Codespaces: Configure Dev Container" option](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+
+1. Click **Start from scratch**.
+
+   ![Screenshot of the "Start from scratch" option](/assets/images/help/codespaces/start-from-scratch.png)
 
 1. In this example, the template repository from which you created the codespace already contains a dev container configuration, so a message is displayed telling you that the configuration file already exists. We're going to overwrite the existing configuration file, so click **Continue**.
 

diff --git a/.../reusables/codespaces/command-pallette.md → data/reusables/codespaces/command-palette.md b/.../reusables/codespaces/command-pallette.md → data/reusables/codespaces/command-palette.md