Add 2 pane layout to "Setting up Codespaces" docs and update IA (#21700)

components/article/ArticlePage.tsx

@@ -24,6 +24,22 @@ const interactiveAlternatives: Record<string, { href: string }> = {
   '/actions/automating-builds-and-tests/building-and-testing-python': {
     href: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python?langId=python',
   },
+  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces':
+    {
+      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=nodejs',
+    },
+  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces':
+    {
+      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=dotnet',
+    },
+  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces':
+    {
+      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=java',
+    },
+  '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces':
+    {
+      href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=py',
+    },
 }
 
 export const ArticlePage = () => {

components/context/PlaygroundContext.tsx

@@ -2,14 +2,21 @@ import React, { createContext, useContext, useState } from 'react'
 import { CodeLanguage, PlaygroundArticleT } from 'components/playground/types'
 import { useRouter } from 'next/router'
 
-import jsArticle from 'components/playground/content/building-and-testing/nodejs'
-import pyArticle from 'components/playground/content/building-and-testing/python'
+import actionsJsArticle from 'components/playground/content/actions/guides/building-and-testing-nodejs-or-python/nodejs'
+import actionsPyArticle from 'components/playground/content/actions/guides/building-and-testing-nodejs-or-python/python'
+import codespacesJsArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs'
+import codespacesPyArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python'
+import codespacesNetArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet'
+import codespacesJavaArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java'
 
-const articles = [jsArticle, pyArticle]
-const articlesByLangId = articles.reduce((obj, item) => {
-  obj[item.codeLanguageId] = item
-  return obj
-}, {} as Record<string, PlaygroundArticleT | undefined>)
+const articles = [
+  actionsJsArticle,
+  actionsPyArticle,
+  codespacesJsArticle,
+  codespacesPyArticle,
+  codespacesJavaArticle,
+  codespacesNetArticle,
+]
 
 const codeLanguages: Array<CodeLanguage> = [
   {
@@ -20,6 +27,14 @@ const codeLanguages: Array<CodeLanguage> = [
     id: 'py',
     label: 'Python',
   },
+  {
+    id: 'dotnet',
+    label: 'C#',
+  },
+  {
+    id: 'java',
+    label: 'Java',
+  },
 ]
 
 type PlaygroundContextT = {
@@ -48,11 +63,18 @@ export const PlaygroundContextProvider = (props: { children: React.ReactNode })
   const router = useRouter()
   const [activeSectionIndex, setActiveSectionIndex] = useState(0)
   const [scrollToSection, setScrollToSection] = useState<number>()
-  const { langId } = router.query
-  const currentLanguage = codeLanguages.find(({ id }) => id === langId) || codeLanguages[0]
-  const availableLanguages = codeLanguages.filter(({ id }) => !!articlesByLangId[id])
+  const path = router.asPath.split('?')[0]
+  const relevantArticles = articles.filter(({ slug }) => slug === path)
 
-  const article = articlesByLangId[currentLanguage.id]
+  const { langId } = router.query
+  const availableLanguageIds = relevantArticles.map(({ codeLanguageId }) => codeLanguageId)
+  const currentLanguage =
+    codeLanguages.find(({ id }) => id === langId) ||
+    (codeLanguages.find(({ id }) => id === availableLanguageIds[0]) as CodeLanguage)
+
+  const article = relevantArticles.find(
+    ({ codeLanguageId }) => codeLanguageId === currentLanguage?.id
+  )
 
   const context = {
     activeSectionIndex,
@@ -60,7 +82,7 @@ export const PlaygroundContextProvider = (props: { children: React.ReactNode })
     scrollToSection,
     setScrollToSection,
     currentLanguage,
-    codeLanguages: availableLanguages,
+    codeLanguages: codeLanguages.filter(({ id }) => availableLanguageIds.includes(id)),
     article,
   }
 

components/playground/PlaygroundArticlePage.tsx

@@ -0,0 +1,94 @@
+import { GetServerSideProps } from 'next'
+import { BeakerIcon, ZapIcon } from '@primer/octicons-react'
+
+import { MainContextT, MainContext, getMainContext } from 'components/context/MainContext'
+
+import {
+  PlaygroundContextProvider,
+  usePlaygroundContext,
+} from 'components/context/PlaygroundContext'
+import { PlaygroundArticle } from 'components/playground/PlaygroundArticle'
+
+import { Editor } from 'components/playground/editor/Editor'
+import { DefaultLayout } from 'components/DefaultLayout'
+import { CodeLanguagePicker } from 'components/playground/CodeLanguagePicker'
+import { Link } from 'components/Link'
+import { useRouter } from 'next/router'
+import { Callout } from 'components/ui/Callout'
+import { GenericError } from 'components/GenericError'
+
+type Props = {
+  mainContext: MainContextT
+}
+export default function PlaygroundArticlePage({ mainContext }: Props) {
+  return (
+    <MainContext.Provider value={mainContext}>
+      <DefaultLayout>
+        <PlaygroundContextProvider>
+          <PageInner />
+        </PlaygroundContextProvider>
+      </DefaultLayout>
+    </MainContext.Provider>
+  )
+}
+
+function PageInner() {
+  const router = useRouter()
+  const { article } = usePlaygroundContext()
+
+  if (!article) {
+    return <GenericError />
+  }
+
+  return (
+    <div className="p-responsive my-5 mx-auto" style={{ maxWidth: 1600, minWidth: 768 }}>
+      <div className="d-flex">
+        <article className="col-6 ml-lg-3 mr-3">
+          <Callout variant="info">
+            <p className="d-flex">
+              <span className="mr-3 mt-1">
+                <BeakerIcon size={18} />
+              </span>
+              <span>
+                You've found one of our experimental articles! Have ideas or feedback for how we can
+                further improve this article? Let us know{' '}
+                <Link href="https://github.com/github/docs/discussions/9369" target="_blank">
+                  in the discussion
+                </Link>
+                .
+              </span>
+            </p>
+          </Callout>
+          <PlaygroundArticle />
+        </article>
+
+        <div className="col-6">
+          <div className="fix position-sticky mt-3" style={{ top: '6.5em' }}>
+            <div className="d-flex flex-justify-between flex-items-center mb-3">
+              <CodeLanguagePicker variant="tabs" />
+              <div className="flash">
+                <ZapIcon className="mr-2" />
+                <Link href={`/${router.locale}${article.originalArticle}`}>
+                  Switch to non-interactive article
+                </Link>
+              </div>
+            </div>
+
+            <Editor article={article} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
+  const req = context.req as any
+  const res = context.res as any
+
+  return {
+    props: {
+      mainContext: getMainContext(req, res),
+    },
+  }
+}

components/playground/content/actions/guides/building-and-testing-nodejs-or-python/nodejs.tsx

@@ -6,7 +6,7 @@ const article: PlaygroundArticleT = {
   shortTitle: 'Build & test Node.js',
   topics: ['CI', 'Node', 'JavaScript'],
   type: 'tutorial',
-  slug: 'building-and-testing-nodejs',
+  slug: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python',
   originalArticle: '/actions/automating-builds-and-tests/building-and-testing-nodejs',
   codeLanguageId: 'nodejs',
   intro: dedent`

components/playground/content/actions/guides/building-and-testing-nodejs-or-python/python.tsx

@@ -6,7 +6,7 @@ const article: PlaygroundArticleT = {
   shortTitle: 'Build & test Python',
   topics: ['CI', 'Python'],
   type: 'tutorial',
-  slug: 'building-and-testing-python',
+  slug: '/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python',
   originalArticle: '/actions/automating-builds-and-tests/building-and-testing-python',
   codeLanguageId: 'py',
   intro: dedent`

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet.tsx

@@ -0,0 +1,304 @@
+import dedent from 'ts-dedent'
+import { PlaygroundArticleT } from 'components/playground/types'
+
+const article: PlaygroundArticleT = {
+  title: 'Add a dev container to your project',
+  shortTitle: 'C# Codespaces',
+  topics: ['Codespaces', 'Developer', 'Organization'],
+  type: 'tutorial',
+  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
+  originalArticle:
+    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces',
+  codeLanguageId: 'dotnet',
+  intro: dedent`
+  This guide shows you how to add a [dev container](/codespaces/setting-up-your-project-for-codespaces/configuring-codespaces-for-your-project) to define the Codespaces configuration for your **C# (.NET)** project. For other project languages, click the language button to the right.
+ `,
+  prerequisites: dedent`
+    - You should have an existing C# (.NET) project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
+    - Codespaces must be enabled for your organization. For more information, see "[Enabling Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
+  `,
+  contentBlocks: [
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 1: Open your project in a codespace',
+      content: dedent`
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **New codespace**.
+
+            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
+
+            If you don’t see this option, Codespaces isn't available for your project. See [Access to Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace#access-to-codespaces) for more information.
+
+        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including .NET. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
+
+        You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
+
+        Codespaces uses a file called \`devcontainer.json\` to store configurations. On launch Codespaces uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 2: Add a dev container to your codespace from a template',
+      content: dedent`
+       The default codespaces container comes with the latest .NET version and common tools preinstalled. However, we recommend that you set up a custom container to define the tools and scripts that your project needs. This will ensure a fully reproducible environment for all Codespaces users in your repository.
+
+        To set up your project with a custom container, you will need to use a \`devcontainer.json\` file to define the environment. In Codespaces you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
+
+        1. Access the Command Palette (\`Shift + Command + P\` / \`Ctrl + Shift + P\`), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
+          ![Codespaces: Add Development Container Configuration Files... in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+        2. For this example, click **C# (.NET)**. If you need additional features you can select any container that’s specific to C# (.NET) or a combination of tools such as C# (.NET) and MS SQL.
+          
+            ![Select C# (.NET) option from the list](/assets/images/help/codespaces/add-dotnet-prebuilt-container.png)
+        3. Click the recommended version of .NET.
+          ![.NET version selection](/assets/images/help/codespaces/add-dotnet-version.png)
+        4. Accept the default option to add Node.js to your customization.
+          ![Add Node.js selection](/assets/images/help/codespaces/dotnet-options.png)
+        5. Select any additional features to install and click **OK**.
+        6. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'sub-section',
+      title: 'Anatomy of your dev container',
+      content: dedent`
+      Adding the C# (.NET) dev container template adds a \`.devcontainer\` folder to the root of your project's repository with the following files:
+
+        - \`devcontainer.json\`
+        - Dockerfile
+
+        The newly added \`devcontainer.json\` file defines a few properties that are described below.
+      `,
+    },
+    {
+      type: 'sub-section-2',
+      codeBlock: {
+        id: '0',
+        highlight: 2,
+      },
+      content: dedent`
+        **\`name\`** - You can name your dev container anything, this is just the default.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [3, 13],
+      },
+      content: dedent`
+        **\`build\`** - The build properties.
+          - **\`dockerfil\`e** - In the build object, dockerfile is a reference to the Dockerfile that was also added from the template.
+          - **\`args\`**
+            - **\`VARIANT\`**: This file only contains one build argument, which is the .NET Core version that we want to use.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [16, 18],
+      },
+      content: dedent`
+        **\`settings\`** - These are Visual Studio Code settings that you can set.
+          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [20, 23],
+      },
+      content: dedent`
+        **\`extensions\`** - These are extensions included by default.
+          - **\`ms-dotnettools.csharp\`** - The Microsoft C# extension provides rich support for developing in C#, including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 26,
+      },
+      content: dedent`
+        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 29,
+      },
+      content: dedent`
+        **\`postCreateCommand\`** - If you want to run anything after you land in your codespace that’s not defined in the Dockerfile, like \`dotnet restore\`, you can do that here.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 32,
+      },
+      content: dedent`
+        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '1',
+      },
+      type: 'sub-section',
+      title: 'Dockerfile',
+      content: dedent`
+        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our Dockerfile.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+        highlight: [21, 29],
+      },
+      type: 'default',
+      title: 'Step 3: Modify your devcontainer.json file',
+      content: dedent`
+        With your dev container added and a basic understanding of what everything does, you can now make changes to configure it for your environment. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
+
+        1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
+
+           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
+
+        2. Update your the \`extensions\` list in your \`devcontainer.json\` file to add a few extensions that are useful when working with your project.
+
+           \`\`\`json{:copy}
+           "extensions": [
+               "ms-dotnettools.csharp",
+               "streetsidesoftware.code-spell-checker",
+             ],
+           \`\`\`
+         
+         3. Uncomment the \`postCreateCommand\` to restore dependencies as part of the codespace setup process.
+         
+            \`\`\`json{:copy}
+            // Use 'postCreateCommand' to run commands after the container is created.
+            "postCreateCommand": "dotnet restore",
+            \`\`\`
+
+        4. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+          Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
+
+        5. Check your changes were successfully applied by verifying the "Code Spell Checker" extension was installed.
+
+            ![Extensions list](/assets/images/help/codespaces/dotnet-extensions.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 4: Run your application',
+      content: dedent`
+      In the previous section, you used the \`postCreateCommand\` to install a set of packages via the \`dotnet restore\` command. With our dependencies now installed, we can run our application.
+
+      1. Run your application by pressing \`F5\` or entering \`dotnet watch run\` in your terminal.
+
+        2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
+
+           ![Port forwarding toast](/assets/images/help/codespaces/python-port-forwarding.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 5: Commit your changes',
+      content: dedent`
+      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
+
+      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
+      `,
+    },
+  ],
+  codeBlocks: {
+    '0': {
+      fileName: '.devcontainer/devcontainer.json',
+      language: 'json',
+      code: dedent`
+      {
+        "name": "C# (.NET)",
+        "build": {
+          "dockerfile": "Dockerfile",
+          "args": {
+            // Update 'VARIANT' to pick a .NET Core version: 2.1, 3.1, 5.0
+            "VARIANT": "5.0",
+            // Options
+            "INSTALL_NODE": "true",
+            "NODE_VERSION": "lts/*",
+            "INSTALL_AZURE_CLI": "false"
+          }
+        },
+      
+        // Set *default* container specific settings.json values on container create.
+        "settings": {
+          "terminal.integrated.shell.linux": "/bin/bash"
+        },
+      
+        // Add the IDs of extensions you want installed when the container is created.
+        "extensions": [
+          "ms-dotnettools.csharp"
+        ],
+      
+        // Use 'forwardPorts' to make a list of ports inside the container available locally.
+        // "forwardPorts": [5000, 5001],
+      
+        // Use 'postCreateCommand' to run commands after the container is created.
+        // "postCreateCommand": "dotnet restore",
+      
+        // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+        "remoteUser": "vscode"
+      }  
+      `,
+    },
+    '1': {
+      fileName: '.devcontainer/Dockerfile',
+      language: 'bash',
+      code: dedent`
+      # [Choice] .NET version: 5.0, 3.1, 2.1
+      ARG VARIANT="5.0"
+      FROM mcr.microsoft.com/vscode/devcontainers/dotnetcore:0-\${VARIANT}
+      
+      # [Option] Install Node.js
+      ARG INSTALL_NODE="true"
+      ARG NODE_VERSION="lts/*"
+      RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
+      
+      # [Option] Install Azure CLI
+      ARG INSTALL_AZURE_CLI="false"
+      COPY library-scripts/azcli-debian.sh /tmp/library-scripts/
+      RUN if [ "$INSTALL_AZURE_CLI" = "true" ]; then bash /tmp/library-scripts/azcli-debian.sh; fi \
+          && apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts
+      
+      # [Optional] Uncomment this section to install additional OS packages.
+      # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+      #     && apt-get -y install --no-install-recommends <your-package-list-here>
+      
+      # [Optional] Uncomment this line to install global node packages.
+      # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
+      `,
+    },
+  },
+}
+
+export default article

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java.tsx

@@ -0,0 +1,294 @@
+import dedent from 'ts-dedent'
+import { PlaygroundArticleT } from 'components/playground/types'
+
+const article: PlaygroundArticleT = {
+  title: 'Add a dev container to your project',
+  shortTitle: 'Add a dev container to your project',
+  topics: ['Codespaces', 'Developer', 'Organization', 'Java'],
+  type: 'tutorial',
+  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
+  originalArticle:
+    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces',
+  codeLanguageId: 'java',
+  intro: dedent`
+  This guide shows you how to add a [dev container](/codespaces/setting-up-your-project-for-codespaces/configuring-codespaces-for-your-project) to define the Codespaces configuration for your **Java** project. For other project languages, click the language button to the right.
+  `,
+  prerequisites: dedent`
+  - You should have an existing Java project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-java
+  - Codespaces must be enabled for your organization. For more information, see "[Enabling Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
+  `,
+  contentBlocks: [
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 1: Open your project in a codespace',
+      content: dedent`
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **New codespace**.
+
+            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
+
+           If you don’t see this option, Codespaces isn't available for your project. See [Access to Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace#access-to-codespaces) for more information.
+
+        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Java, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
+        
+        Codespaces uses a file called \`devcontainer.json\` to store configurations. On launch Codespaces uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 2: Add a dev container to your codespace from a template',
+      content: dedent`
+        The default codespaces container comes with the latest Java version, package managers (Maven, Gradle), and other common tools preinstalled. However, we recommend that you set up a custom container to define the tools and scripts that your project needs. This will ensure a fully reproducible environment for all Codespaces users in your repository.
+
+        To set up your project with a custom container, you will need to use a \`devcontainer.json\` file to define the environment. In Codespaces you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
+
+        1. Access the Command Palette (\`Shift + Command + P\` / \`Ctrl + Shift + P\`), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
+          !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+        2. For this example, click **Java**. In practice, you could select any container that’s specific to Java or a combination of tools such as Java and Azure Functions.
+          ![Select Java option from the list](/assets/images/help/codespaces/add-java-prebuilt-container.png)
+        3. Click the recommended version of Java.
+          ![Java version selection](/assets/images/help/codespaces/add-java-version.png)
+        4. Select any additional features to install and click **OK**.
+        5. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'sub-section',
+      title: 'Anatomy of your dev container',
+      content: dedent`
+        Adding the Java dev container template adds a .devcontainer folder to the root of your project's repository with the following files:
+
+        - \`devcontainer.json\`
+        - Dockerfile
+
+        The newly added \`devcontainer.json\` file defines a few properties that are described below.
+      `,
+    },
+    {
+      type: 'sub-section-2',
+      codeBlock: {
+        id: '0',
+        highlight: 4,
+      },
+      content: dedent`
+        **\`name\`** - You can name your dev container anything, this is just the default.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [5, 16],
+      },
+      content: dedent`
+        **\`build\`** - The build properties.
+          - **\`dockerfile\`** - In the build object, dockerfile is a reference to the Dockerfile that was also added from the template.
+          - **\`args\`**
+            - **\`VARIANT\`**: This file only contains one build argument, which is the Java version that is passed into the Dockerfile.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [19, 23],
+      },
+      content: dedent`
+        **\`settings\`** - These are Visual Studio Code settings that you can set.
+          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [26, 28],
+      },
+      content: dedent`
+        **\`extensions\`** - These are extensions included by default.
+          - **\`vscjava.vscode-java-pack\`** - The Java Extension Pack provides popular extensions for Java development to get you started.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 31,
+      },
+      content: dedent`
+        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 34,
+      },
+      content: dedent`
+        **\`postCreateCommand\`** - If you want to run anything after you land in your codespace that’s not defined in the Dockerfile, you can do that here.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 37,
+      },
+      content: dedent`
+        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '1',
+      },
+      type: 'sub-section',
+      title: 'Dockerfile',
+      content: dedent`
+        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our Dockerfile.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+        highlight: [30, 34],
+      },
+      type: 'default',
+      title: 'Step 3: Modify your devcontainer.json file',
+      content: dedent`
+        With your dev container added and a basic understanding of what everything does, you can now make changes to configure it for your environment. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
+
+        1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
+
+           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
+
+        2. Add the following lines to your \`devcontainer.json\` file after \`extensions\`.
+
+           \`\`\`json{:copy}
+           "postCreateCommand": "java -version",
+           "forwardPorts": [4000],
+           \`\`\`
+         
+           For more information on \`devcontainer.json\` properties, see the [devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) on the Visual Studio Code docs.
+
+        4. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+          Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 4: Run your application',
+      content: dedent`
+      In the previous section, you used the \`postCreateCommand\` to install a set of packages via npm. You can now use this to run our application with npm.
+
+      1. Run your application by pressing \`F5\`.
+      
+      2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
+        ![Port forwarding toast](/assets/images/help/codespaces/codespaces-port-toast.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 5: Commit your changes',
+      content: dedent`
+      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
+
+      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
+      `,
+    },
+  ],
+  codeBlocks: {
+    '0': {
+      fileName: '.devcontainer/devcontainer.json',
+      language: 'json',
+      code: dedent`
+      // For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
+      // https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java
+      {
+        "name": "Java",
+        "build": {
+          "dockerfile": "Dockerfile",
+          "args": {
+            // Update the VARIANT arg to pick a Java version: 11, 14
+            "VARIANT": "11",
+            // Options
+            "INSTALL_MAVEN": "true",
+            "INSTALL_GRADLE": "false",
+            "INSTALL_NODE": "false",
+            "NODE_VERSION": "lts/*"
+          }
+        },
+      
+        // Set *default* container specific settings.json values on container create.
+        "settings": {
+          "terminal.integrated.shell.linux": "/bin/bash",
+          "java.home": "/docker-java-home",
+          "maven.executable.path": "/usr/local/sdkman/candidates/maven/current/bin/mvn"
+        },
+      
+        // Add the IDs of extensions you want installed when the container is created.
+        "extensions": [
+          "vscjava.vscode-java-pack"
+        ],
+      
+        // Use 'forwardPorts' to make a list of ports inside the container available locally.
+        // "forwardPorts": [],
+      
+        // Use 'postCreateCommand' to run commands after the container is created.
+        // "postCreateCommand": "java -version",
+      
+        // Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+        "remoteUser": "vscode"
+      }    
+      `,
+    },
+    '1': {
+      fileName: '.devcontainer/Dockerfile',
+      language: 'bash',
+      code: dedent`
+      # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java/.devcontainer/base.Dockerfile
+      ARG VARIANT="14"
+      FROM mcr.microsoft.com/vscode/devcontainers/java:0-\${VARIANT}
+      
+      # [Optional] Install Maven or Gradle
+      ARG INSTALL_MAVEN="false"
+      ARG MAVEN_VERSION=3.6.3
+      ARG INSTALL_GRADLE="false"
+      ARG GRADLE_VERSION=5.4.1
+      RUN if [ "\${INSTALL_MAVEN}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install maven \"\${MAVEN_VERSION}\""; fi \
+          && if [ "\${INSTALL_GRADLE}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install gradle \"\${GRADLE_VERSION}\""; fi
+      
+      # [Optional] Install a version of Node.js using nvm for front end dev
+      ARG INSTALL_NODE="true"
+      ARG NODE_VERSION="lts/*"
+      RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
+      
+      # [Optional] Uncomment this section to install additional OS packages.
+      # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+      #     && apt-get -y install --no-install-recommends <your-package-list-here>
+      
+      # [Optional] Uncomment this line to install global node packages.
+      # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
+      `,
+    },
+  },
+}
+
+export default article

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs.tsx

@@ -0,0 +1,278 @@
+import dedent from 'ts-dedent'
+import { PlaygroundArticleT } from 'components/playground/types'
+
+const article: PlaygroundArticleT = {
+  title: 'Add a dev container to your project',
+  shortTitle: 'Node.js Codespaces',
+  topics: ['Codespaces', 'Developer', 'Organization', 'Node', 'JavaScript'],
+  type: 'tutorial',
+  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
+  originalArticle:
+    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces',
+  codeLanguageId: 'nodejs',
+  intro: dedent`
+  This guide shows you how to add a [dev container](/codespaces/setting-up-your-project-for-codespaces/configuring-codespaces-for-your-project) to define the Codespaces configuration for your **JavaScript**, **Node.js**, or **TypeScript** project. For other project languages, click the language button to the right.
+  `,
+  prerequisites: dedent`
+    - You should have an existing JavaScript, Node.js, or TypeScript project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-node
+    - Codespaces must be enabled for your organization. For more information, see "[Enabling Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
+  `,
+  contentBlocks: [
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 1: Open your project in a codespace',
+      content: dedent`
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **New codespace**.
+
+            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
+
+           If you don’t see this option, Codespaces isn't available for your project. See [Access to Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace#access-to-codespaces) for more information.
+
+        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Node.js, JavaScript, Typescript, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
+
+        You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
+
+        Codespaces uses a file called \`devcontainer.json\` to store configurations. On launch, Codespaces uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 2: Add a dev container to your codespace from a template',
+      content: dedent`
+        The default codespaces container will support running Node.js projects like [vscode-remote-try-node](https://github.com/microsoft/vscode-remote-try-node) out of the box. By setting up a custom container you can customize the tools and scripts that run as part of codespace creation and ensure a fully reproducible environment for all Codespaces users in your repository.
+
+        To set up your project with a custom container, you will need to use a \`devcontainer.json\` file to define the environment. In Codespaces you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
+
+        1. Access the Command Palette (\`Shift + Command + P\` / \`Ctrl + Shift + P\`), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
+          !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+        2. For this example, click **Node.js**.  If you need additional features you can select any container that’s specific to Node or a combination of tools such as Node and MongoDB.
+          ![Select Node option from the list](/assets/images/help/codespaces/add-node-prebuilt-container.png)
+        3. Click the recommended version of Node.js.
+          ![Node.js version selection](/assets/images/help/codespaces/add-node-version.png)
+        4. Select any additional features to install and click **OK**.
+        5. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'sub-section',
+      title: 'Anatomy of your dev container',
+      content: dedent`
+        Adding the Node.js dev container template adds a \`.devcontainer\` folder to the root of your project's repository with the following files:
+
+        - \`devcontainer.json\`
+        - Dockerfile
+
+        The newly added \`devcontainer.json\` file defines a few properties that are described below.
+      `,
+    },
+    {
+      type: 'sub-section-2',
+      codeBlock: {
+        id: '0',
+        highlight: 4,
+      },
+      content: dedent`
+        **\`name\`** - You can name your dev container anything, this is just the default.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [5, 9],
+      },
+      content: dedent`
+        **\`build\`** - The build properties.
+          - **\`dockerfile\`** - In the build object, dockerfile is a reference to the Dockerfile that was also added from the template.
+          - **\`args\`**
+            - **\`VARIANT\`**: This file only contains one build argument, which is the node variant we want to use that is passed into the Dockerfile.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [12, 14],
+      },
+      content: dedent`
+        **\`settings\`** - These are Visual Studio Code settings that you can set.
+          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [17, 19],
+      },
+      content: dedent`
+        **\`extensions\`** - These are extensions included by default.
+          - **\`dbaeumer.vscode-eslint\`** - ES lint is a great extension for linting, but for JavaScript there are a number of great Marketplace extensions you could also include.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 22,
+      },
+      content: dedent`
+        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 25,
+      },
+      content: dedent`
+        **\`postCreateCommand\`** - If you want to run anything after you land in your codespace that’s not defined in the Dockerfile, you can do that here.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 28,
+      },
+      content: dedent`
+        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '1',
+      },
+      type: 'sub-section',
+      title: 'Dockerfile',
+      content: dedent`
+        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our Dockerfile.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+        highlight: [21, 25],
+      },
+      type: 'default',
+      title: 'Step 3: Modify your devcontainer.json file',
+      content: dedent`
+        With your dev container added and a basic understanding of what everything does, you can now make changes to configure it for your environment. In this example, you'll add properties to install npm when your codespace launches and make a list of ports inside the container available locally.
+
+        1. In the Explorer, select the \`devcontainer.json\` file from the tree to open it. You might have to expand the \`.devcontainer\` folder to see it.
+          ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
+        2. Add the following lines to your \`devcontainer.json\` file after \`extensions\`:
+
+            \`\`\`js{:copy}
+            "postCreateCommand": "npm install",
+            "forwardPorts": [4000],
+            \`\`\`
+            For more information on \`devcontainer.json\` properties, see the [devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) in the Visual Studio Code docs.
+
+        1. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+            ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+
+              Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 4: Run your application',
+      content: dedent`
+        In the previous section, you used the \`postCreateCommand\` to installing a set of packages via npm. You can now use this to run our application with npm.
+
+        1. Run your start command in the terminal with \`npm start\`.
+
+            ![npm start in terminal](/assets/images/help/codespaces/codespaces-npmstart.png)
+
+        2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
+
+            ![Port forwarding toast](/assets/images/help/codespaces/codespaces-port-toast.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 5: Commit your changes',
+      content: dedent`
+      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
+
+      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
+      `,
+    },
+  ],
+  codeBlocks: {
+    '0': {
+      fileName: '.devcontainer/devcontainer.json',
+      language: 'json',
+      code: dedent`
+        // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+        // https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/javascript-node
+        {
+          "name": "Node.js",
+          "build": {
+            "dockerfile": "Dockerfile",
+            // Update 'VARIANT' to pick a Node version: 10, 12, 14
+            "args": { "VARIANT": "14" }
+          },
+
+          // Set *default* container specific settings.json values on container create.
+          "settings": {
+            "terminal.integrated.shell.linux": "/bin/bash"
+          },
+
+          // Add the IDs of extensions you want installed when the container is created.
+          "extensions": [
+            "dbaeumer.vscode-eslint"
+          ],
+
+          // Use 'forwardPorts' to make a list of ports inside the container available locally.
+          // "forwardPorts": [],
+
+          // Use 'postCreateCommand' to run commands after the container is created.
+          // "postCreateCommand": "yarn install",
+
+          // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+          "remoteUser": "node"
+        }
+      `,
+    },
+    '1': {
+      fileName: '.devcontainer/Dockerfile',
+      language: 'bash',
+      code: dedent`
+        # [Choice] Node.js version: 14, 12, 10
+        ARG VARIANT="14-buster"
+        FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-\${VARIANT}
+        
+        # [Optional] Uncomment this section to install additional OS packages.
+        # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive && apt-get -y install --no-install-recommends <your-package-list-here>
+        
+        # [Optional] Uncomment if you want to install an additional version of node using nvm
+        # ARG EXTRA_NODE_VERSION=10
+        # RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install \${EXTRA_NODE_VERSION}"
+        
+        # [Optional] Uncomment if you want to install more global node modules
+        # RUN su node -c "npm install -g <your-package-list-here>"
+      `,
+    },
+  },
+}
+
+export default article

components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python.tsx

@@ -0,0 +1,318 @@
+import dedent from 'ts-dedent'
+import { PlaygroundArticleT } from 'components/playground/types'
+
+const article: PlaygroundArticleT = {
+  title: 'Add a dev container to your repository',
+  shortTitle: 'Python Codespaces',
+  topics: ['Codespaces', 'Developer', 'Organization', 'Python'],
+  type: 'tutorial',
+  slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
+  originalArticle:
+    '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces',
+  codeLanguageId: 'py',
+  intro: dedent`
+    This guide shows you how to add a [dev container](/codespaces/setting-up-your-project-for-codespaces/configuring-codespaces-for-your-project) to define the Codespaces configuration for your **Python** project. For other project languages, click the language button to the right.
+  `,
+  prerequisites: dedent`
+    - You should have an existing Python project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
+    - Codespaces must be enabled for your organization. For more information, see "[Enabling Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
+  `,
+  contentBlocks: [
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 1: Open your project in a codespace',
+      content: dedent`
+        1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click **New codespace**.
+
+            ![New codespace button](/assets/images/help/codespaces/new-codespace-button.png)
+
+            If you don’t see this option, Codespaces isn't available for your project. See [Access to Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace#access-to-codespaces) for more information.
+
+        When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Python, pip, and Miniconda. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
+
+        You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
+
+        Codespaces uses a file called \`devcontainer.json\` to store configurations. On launch Codespaces uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 2: Add a dev container to your codespace from a template',
+      content: dedent`
+        The default codespaces container comes with the latest Python version, package managers (pip, Miniconda), and other common tools preinstalled. However, we recommend that you set up a custom container to define the tools and scripts that your project needs. This will ensure a fully reproducible environment for all Codespaces users in your repository.
+
+        To set up your project with a custom container, you will need to use a \`devcontainer.json\` file to define the environment. In Codespaces you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
+
+        1. Access the Command Palette (\`Shift + Command + P\` / \`Ctrl + Shift + P\`), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
+          !["Codespaces: Add Development Container Configuration Files..." in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png)
+        2. For this example, click **Python 3**. If you need additional features you can select any container that’s specific to Python or a combination of tools such as Python 3 and PostgreSQL.
+          ![Select Python option from the list](/assets/images/help/codespaces/add-python-prebuilt-container.png)
+        3. Click the recommended version of Python.
+          ![Python version selection](/assets/images/help/codespaces/add-python-version.png)
+        4. Accept the default option to add Node.js to your customization.
+          ![Add Node.js selection](/assets/images/help/codespaces/add-nodejs-selection.png)
+        5. Select any additional features to install and click **OK**.
+        6. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'sub-section',
+      title: 'Anatomy of your dev container',
+      content: dedent`
+        Adding the Python dev container template adds a .devcontainer folder to the root of your project's repository with the following files:
+
+        - \`devcontainer.json\`
+        - Dockerfile
+
+        The newly added \`devcontainer.json\` file defines a few properties that are described below.
+      `,
+    },
+    {
+      type: 'sub-section-2',
+      codeBlock: {
+        id: '0',
+        highlight: 2,
+      },
+      content: dedent`
+        **\`name\`** - You can name your dev container anything, this is just the default.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [3, 12],
+      },
+      content: dedent`
+        **\`build\`** - The build properties.
+          - **\`dockerfile\`** - In the build object, dockerfile is a reference to the Dockerfile that was also added from the template.
+          - **\`args\`**
+            - **\`VARIANT\`**: This is the node variant we want to use that is passed into the Dockerfile.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [16, 30],
+      },
+      content: dedent`
+        **\`settings\`** - These are Visual Studio Code settings that you can set.
+          - **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: [33, 35],
+      },
+      content: dedent`
+        **\`extensions\`** - These are extensions included by default.
+          - **\`ms-python.python\`** - The Microsoft Python extension provides rich support for the Python language (for all actively supported versions of the language: >=3.6), including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 38,
+      },
+      content: dedent`
+        **\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 41,
+      },
+      content: dedent`
+        **\`postCreateCommand\`** - If you want to run anything after you land in your codespace that’s not defined in the Dockerfile, like pip3 install -r requirements, you can do that here.
+      `,
+    },
+    {
+      type: 'sub-section',
+      codeBlock: {
+        id: '0',
+        highlight: 44,
+      },
+      content: dedent`
+        **\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '1',
+      },
+      type: 'sub-section',
+      title: 'Dockerfile',
+      content: dedent`
+        You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our Dockerfile.
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+        highlight: [32, 41],
+      },
+      type: 'default',
+      title: 'Step 3: Modify your devcontainer.json file',
+      content: dedent`
+        With your dev container added and a basic understanding of what everything does, you can now make changes to configure it for your environment. In this example, you'll add properties to install extensions and your project dependencies when your codespace launches.
+
+        1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
+
+           ![devcontainer.json file in the Explorer](/assets/images/help/codespaces/devcontainers-options.png)
+
+        2. Update the extensions list in your \`devcontainer.json\` file to add a few extensions that are useful when working with your project.
+
+           \`\`\`json{:copy}
+           "extensions": [
+               "ms-python.python",
+               "cstrap.flask-snippets",
+               "streetsidesoftware.code-spell-checker",
+             ],
+           \`\`\`
+
+        3. Uncomment the \`postCreateCommand\` to auto-install requirements as part of the codespaces setup process.
+
+           \`\`\`json{:copy}
+           // Use 'postCreateCommand' to run commands after the container is created.
+           "postCreateCommand": "pip3 install --user -r requirements.txt",
+           \`\`\`
+
+        4. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. 
+          
+            ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png)
+          
+             Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
+
+        5. Check your changes were successfully applied by verifying the Code Spell Checker and Flask Snippet extensions were installed.
+
+           ![Extensions list](/assets/images/help/codespaces/python-extensions.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 4: Run your application',
+      content: dedent`
+        In the previous section, you used the \`postCreateCommand\` to install a set of packages with pip3. With your dependencies now installed, you can run your application.
+
+        1. Run your application by pressing F5 or entering \`python -m flask run\` in the codespace terminal.
+
+        2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
+
+           ![Port forwarding toast](/assets/images/help/codespaces/python-port-forwarding.png)
+      `,
+    },
+    {
+      codeBlock: {
+        id: '0',
+      },
+      type: 'default',
+      title: 'Step 5: Commit your changes',
+      content: dedent`
+      Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
+
+      For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
+      `,
+    },
+  ],
+  codeBlocks: {
+    '0': {
+      fileName: '.devcontainer/devcontainer.json',
+      language: 'json',
+      code: dedent`
+      {
+        "name": "Python 3",
+        "build": {
+          "dockerfile": "Dockerfile",
+          "context": "..",
+          "args": {
+            // Update 'VARIANT' to pick a Python version: 3, 3.6, 3.7, 3.8, 3.9
+            "VARIANT": "3",
+            // Options
+            "INSTALL_NODE": "true",
+            "NODE_VERSION": "lts/*"
+          }
+        },
+      
+        // Set *default* container specific settings.json values on container create.
+        "settings": {
+          "terminal.integrated.shell.linux": "/bin/bash",
+          "python.pythonPath": "/usr/local/bin/python",
+          "python.linting.enabled": true,
+          "python.linting.pylintEnabled": true,
+          "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
+          "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
+          "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
+          "python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
+          "python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
+          "python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
+          "python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
+          "python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
+          "python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
+        },
+      
+        // Add the IDs of extensions you want installed when the container is created.
+        "extensions": [
+          "ms-python.python",
+        ],
+      
+        // Use 'forwardPorts' to make a list of ports inside the container available locally.
+        // "forwardPorts": [],
+      
+        // Use 'postCreateCommand' to run commands after the container is created.
+        // "postCreateCommand": "pip3 install --user -r requirements.txt",
+      
+        // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+        "remoteUser": "vscode"
+      }      
+      `,
+    },
+    '1': {
+      fileName: '.devcontainer/Dockerfile',
+      language: 'bash',
+      code: dedent`
+      # [Choice] Python version: 3, 3.9, 3.8, 3.7, 3.6
+      ARG VARIANT="3"
+      FROM mcr.microsoft.com/vscode/devcontainers/python:0-\${VARIANT}
+      
+      # [Option] Install Node.js
+      ARG INSTALL_NODE="true"
+      ARG NODE_VERSION="lts/*"
+      RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
+      
+      # [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
+      # COPY requirements.txt /tmp/pip-tmp/
+      # RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
+      #    && rm -rf /tmp/pip-tmp
+      
+      # [Optional] Uncomment this section to install additional OS packages.
+      # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+      #     && apt-get -y install --no-install-recommends <your-package-list-here>
+      
+      # [Optional] Uncomment this line to install global node packages.
+      # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
+      
+      `,
+    },
+  },
+}
+
+export default article

content/codespaces/codespaces-reference/disaster-recovery-for-codespaces.md

@@ -26,7 +26,7 @@ The following guidance provides options on how to handle service disruption to t
 
 In the case of a regional outage, we suggest you recreate your codespace in an unaffected region to continue working. This new codespace will have all of the changes as of your last push to {% data variables.product.prodname_dotcom %}. For information on manually setting another region, see "[Setting your default region for Codespaces](/codespaces/managing-your-codespaces/setting-your-default-region-for-codespaces)."
 
-You can optimize recovery time by configuring a `devcontainer.json` in the project's repository, which allows you to define the tools, runtimes, frameworks, editor settings, extensions, and other configuration necessary to restore the development environment automatically. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+You can optimize recovery time by configuring a `devcontainer.json` in the project's repository, which allows you to define the tools, runtimes, frameworks, editor settings, extensions, and other configuration necessary to restore the development environment automatically. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 ## Option 2: Wait for recovery
 

content/codespaces/customizing-your-codespace/changing-the-machine-type-for-your-codespace.md

@@ -1,11 +1,13 @@
 ---
 title: Changing the machine type for your codespace
-shortTitle: Changing the machine type
+shortTitle: Change the machine type
 intro: 'You can change the type of machine that''s running your codespace, so that you''re using resources appropriate for work you''re doing.'
 product: '{% data reusables.gated-features.codespaces %}'
 versions:
   fpt: '*'
   ghec: '*'
+redirect_from:
+  - /codespaces/developing-in-codespaces/changing-the-machine-type-for-your-codespace
 topics:
   - Codespaces
 ---

content/codespaces/customizing-your-codespace/index.md

@@ -10,8 +10,10 @@ redirect_from:
 topics:
   - Codespaces
 children:
-  - /configuring-codespaces-for-your-project
   - /personalizing-codespaces-for-your-account
+  - /changing-the-machine-type-for-your-codespace
+  - /setting-your-default-editor-for-codespaces
+  - /setting-your-default-region-for-codespaces
   - /prebuilding-codespaces-for-your-project
 ---
  

content/codespaces/customizing-your-codespace/prebuilding-codespaces-for-your-project.md

@@ -10,7 +10,7 @@ topics:
   - Set up
   - Fundamentals
 product: '{% data reusables.gated-features.codespaces %}'
-shortTitle: Prebuilding Codespaces
+shortTitle: Prebuild Codespaces
 ---
 
 {% note %}

content/codespaces/customizing-your-codespace/setting-your-default-editor-for-codespaces.md

@@ -5,6 +5,8 @@ product: '{% data reusables.gated-features.codespaces %}'
 versions:
   fpt: '*'
   ghec: '*'
+redirect_from:
+  - /codespaces/managing-your-codespaces/setting-your-default-editor-for-codespaces
 topics:
   - Codespaces
 shortTitle: Set the default editor

content/codespaces/customizing-your-codespace/setting-your-default-region-for-codespaces.md

@@ -5,6 +5,8 @@ product: '{% data reusables.gated-features.codespaces %}'
 versions:
   fpt: '*'
   ghec: '*'
+redirect_from:
+  - /codespaces/managing-your-codespaces/setting-your-default-region-for-codespaces
 topics:
   - Codespaces
 shortTitle: Set the default region

content/codespaces/developing-in-codespaces/creating-a-codespace.md

@@ -14,6 +14,7 @@ topics:
   - Codespaces
   - Fundamentals
   - Developer
+shortTitle: Create a codespace
 ---
 
 ## About codespace creation

content/codespaces/developing-in-codespaces/deleting-a-codespace.md

@@ -13,6 +13,7 @@ topics:
   - Codespaces
   - Fundamentals
   - Developer
+shortTitle: Delete a codespace
 ---
 
  

content/codespaces/developing-in-codespaces/developing-in-a-codespace.md

@@ -14,6 +14,7 @@ topics:
   - Codespaces
   - Fundamentals
   - Developer
+shortTitle: Develop in a codespace
 ---
 
  

content/codespaces/developing-in-codespaces/index.md

@@ -15,7 +15,6 @@ children:
   - /using-codespaces-for-pull-requests
   - /deleting-a-codespace
   - /forwarding-ports-in-your-codespace
-  - /changing-the-machine-type-for-your-codespace
   - /using-codespaces-in-visual-studio-code
   - /using-codespaces-with-github-cli
 ---

content/codespaces/developing-in-codespaces/using-source-control-in-your-codespace.md

@@ -48,7 +48,7 @@ You can pull changes from the remote repository into your codespace at any time.
 ![Ellipsis button for View and More Actions](/assets/images/help/codespaces/source-control-ellipsis-button.png)
 1. In the drop-down menu, click **Pull**.
 
-If the dev container configuration has been changed since you created the codespace, you can apply the changes by rebuilding the container for the codespace. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project#applying-changes-to-your-configuration)."
+If the dev container configuration has been changed since you created the codespace, you can apply the changes by rebuilding the container for the codespace. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project#applying-changes-to-your-configuration)."
 
 ## Setting your codespace to automatically fetch new changes 
 

content/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization.md

@@ -1,6 +1,6 @@
 ---
 title: Enabling Codespaces for your organization
-shortTitle: Enabling Codespaces
+shortTitle: Enable Codespaces
 intro: 'You can control which users in your organization can use {% data variables.product.prodname_codespaces %}.'
 product: '{% data reusables.gated-features.codespaces %}'
 permissions: 'To manage user permissions for {% data variables.product.prodname_codespaces %} for an organization, you must be an organization owner.'

content/codespaces/managing-codespaces-for-your-organization/managing-billing-for-codespaces-in-your-organization.md

@@ -1,6 +1,6 @@
 ---
 title: Managing billing for Codespaces in your organization
-shortTitle: Managing billing for Codespaces
+shortTitle: Manage billing
 intro: 'You can check your {% data variables.product.prodname_codespaces %} usage and set usage limits.'
 product: '{% data reusables.gated-features.codespaces %}'
 permissions: 'To manage billing for Codespaces for an organization, you must be an organization owner or a billing manager.'

content/codespaces/managing-your-codespaces/index.md

@@ -14,7 +14,5 @@ children:
   - /managing-repository-access-for-your-codespaces
   - /reviewing-your-security-logs-for-codespaces
   - /managing-gpg-verification-for-codespaces
-  - /setting-your-default-editor-for-codespaces
-  - /setting-your-default-region-for-codespaces
 ---
  

content/codespaces/overview.md

@@ -32,7 +32,7 @@ You can create a codespace from any branch or commit in your repository and begi
 
 To customize the runtimes and tools in your codespace, you can create a custom configuration to define an environment (or _dev container_) that is specific for your repository. Using a dev container allows you to specify a Docker environment for development with a well-defined tool and runtime stack that can reference an image, Dockerfile, or docker-compose. This means that anyone using the repository will have the same tools available to them when they create a codespace.
 
-If you don't do any custom configuration, {% data variables.product.prodname_codespaces %} will clone your repository into an environment with the default codespace image that includes many tools, languages, and runtime environments. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
+If you don't do any custom configuration, {% data variables.product.prodname_codespaces %} will clone your repository into an environment with the default codespace image that includes many tools, languages, and runtime environments. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
 
 You can also personalize aspects of your codespace environment by using a public [dotfiles](https://dotfiles.github.io/tutorials/) repository and [Settings Sync](https://code.visualstudio.com/docs/editor/settings-sync). Personalization can include shell preferences, additional tools, editor settings, and VS Code extensions. For more information, see "[Customizing your codespace](/codespaces/customizing-your-codespace)".
 

content/codespaces/setting-up-your-project-for-codespaces/configuring-codespaces-for-your-project.md

@@ -1,11 +1,13 @@
 ---
-title: Configuring Codespaces for your project
+title: Introduction to dev containers
 intro: 'You can use a `devcontainer.json` file to define a {% data variables.product.prodname_codespaces %} environment for your repository.'
+allowTitleToDifferFromFilename: true
 permissions: People with write permissions to a repository can create or edit the codespace configuration.
 redirect_from:
   - /github/developing-online-with-github-codespaces/configuring-github-codespaces-for-your-project
   - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
   - /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
+  - /codespaces/customizing-your-codespace/configuring-codespaces-for-your-project
 versions:
   fpt: '*'
   ghec: '*'
@@ -15,7 +17,6 @@ topics:
   - Set up
   - Fundamentals
 product: '{% data reusables.gated-features.codespaces %}'
-shortTitle: Configure your project
 ---
 
  

content/codespaces/setting-up-your-project-for-codespaces/index.md

@@ -1,5 +1,6 @@
 ---
-title: 'Setting up your project for {% data variables.product.prodname_codespaces %}'
+title: 'Setting up your repository for {% data variables.product.prodname_codespaces %}'
+allowTitleToDifferFromFilename: true
 intro: 'Learn how to get started with {% data variables.product.prodname_codespaces %}, including set up and configuration for specific languages.'
 product: '{% data reusables.gated-features.codespaces %}'
 versions:
@@ -8,6 +9,8 @@ versions:
 redirect_from:
   - /codespaces/getting-started-with-codespaces
 children:
+  - /configuring-codespaces-for-your-project
+  - /setting-up-your-project-for-codespaces
   - /setting-up-your-nodejs-project-for-codespaces
   - /setting-up-your-dotnet-project-for-codespaces
   - /setting-up-your-java-project-for-codespaces

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces.md

@@ -11,6 +11,8 @@ versions:
   ghec: '*'
 topics:
   - Codespaces
+hasExperimentalAlternative: true
+hidden: true
 ---
 
 
@@ -36,14 +38,14 @@ When you create a codespace, your project is created on a remote VM that is dedi
 
 You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
 
-{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
 ## Step 2: Add a dev container to your codespace from a template
 
 The default codespaces container comes with the latest .NET version and common tools preinstalled. However, we encourage you to set up a custom container so you can tailor the tools and scripts that run as part of codespace creation to your project's needs and ensure a fully reproducible environment for all {% data variables.product.prodname_codespaces %} users in your repository.
 
-To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project
+To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers
 ](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces.md

@@ -10,6 +10,8 @@ versions:
   ghec: '*'
 topics:
   - Codespaces
+hasExperimentalAlternative: true
+hidden: true
 ---
 
 
@@ -35,14 +37,14 @@ When you create a codespace, your project is created on a remote VM that is dedi
 
 You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
 
-{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
 ## Step 2: Add a dev container to your codespace from a template
 
 The default codespaces container comes with the latest Java version, package managers (Maven, Gradle), and other common tools preinstalled. However, we recommend that you set up a custom container to define the tools and scripts that your project needs. This will ensure a fully reproducible environment for all {% data variables.product.prodname_codespaces %} users in your repository.
 
-To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
 {% data reusables.codespaces.command-palette-container %}

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces.md

@@ -14,6 +14,8 @@ topics:
   - Developer
   - Node
   - JavaScript
+hasExperimentalAlternative: true
+hidden: true
 ---
 
 
@@ -40,13 +42,13 @@ When you create a codespace, your project is created on a remote VM that is dedi
 
 You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
 
-{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 ## Step 2: Add a dev container to your codespace from a template
 
 The default codespaces container will support running Node.js projects like [vscode-remote-try-node](https://github.com/microsoft/vscode-remote-try-node) out of the box. By setting up a custom container you can customize the tools and scripts that run as part of codespace creation and ensure a fully reproducible environment for all {% data variables.product.prodname_codespaces %} users in your repository.
 
-To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
+To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
 
 {% data reusables.codespaces.command-palette-container %}
 3. For this example, click **Node.js**.  If you need additional features you can select any container that’s specific to Node or a combination of tools such as Node and MongoDB.

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces.md

@@ -0,0 +1,19 @@
+---
+title: Adding a dev container to your repository
+shortTitle: Add a dev container to your repository
+allowTitleToDifferFromFilename: true
+intro: 'Get started with your Node.js, Python, .NET, or Java project in {% data variables.product.prodname_codespaces %} by creating a custom dev container.'
+product: '{% data reusables.gated-features.codespaces %}'
+versions:
+  fpt: '*'
+type: tutorial
+topics:
+  - Codespaces
+  - Developer
+  - Node
+  - JavaScript
+hasExperimentalAlternative: true
+interactive: true
+---
+
+<!-- This article is specially rendered via the pages/ directory -->

content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces.md

@@ -13,6 +13,8 @@ topics:
   - Codespaces
   - Developer
   - Python
+hasExperimentalAlternative: true
+hidden: true
 ---
 
 
@@ -40,14 +42,14 @@ When you create a codespace, your project is created on a remote VM that is dedi
 
 You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
 
-{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+{% data variables.product.prodname_codespaces %} uses a file called `devcontainer.json` to store configurations. On launch {% data variables.product.prodname_codespaces %} uses the file to install any tools, dependencies, or other set up that might be needed for the project. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
 ## Step 2: Add a dev container to your codespace from a template
 
 The default codespaces container comes with the latest Python version, package managers (pip, Miniconda), and other common tools preinstalled. However, we recommend that you set up a custom container to define the tools and scripts that your project needs. This will ensure a fully reproducible environment for all {% data variables.product.prodname_codespaces %} users in your repository.
 
-To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Configuring Codespaces for your project](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
+To set up your project with a custom container, you will need to use a `devcontainer.json` file to define the environment. In {% data variables.product.prodname_codespaces %} you can add this either from a template or you can create your own. For more information on dev containers, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
 
 
 {% data reusables.codespaces.command-palette-container %}

pages/[versionId]/actions/automating-builds-and-tests/building-and-testing-nodejs-or-python.tsx

@@ -1,94 +1,5 @@
-import { GetServerSideProps } from 'next'
-import { BeakerIcon, ZapIcon } from '@primer/octicons-react'
+import PlaygroundArticlePage from 'components/playground/PlaygroundArticlePage'
 
-import { MainContextT, MainContext, getMainContext } from 'components/context/MainContext'
+export { getServerSideProps } from 'components/playground/PlaygroundArticlePage'
 
-import {
-  PlaygroundContextProvider,
-  usePlaygroundContext,
-} from 'components/context/PlaygroundContext'
-import { PlaygroundArticle } from 'components/playground/PlaygroundArticle'
-
-import { Editor } from 'components/playground/editor/Editor'
-import { DefaultLayout } from 'components/DefaultLayout'
-import { CodeLanguagePicker } from 'components/playground/CodeLanguagePicker'
-import { Link } from 'components/Link'
-import { useRouter } from 'next/router'
-import { Callout } from 'components/ui/Callout'
-import { GenericError } from 'components/GenericError'
-
-type Props = {
-  mainContext: MainContextT
-}
-export default function BuildAndTestPage({ mainContext }: Props) {
-  return (
-    <MainContext.Provider value={mainContext}>
-      <DefaultLayout>
-        <PlaygroundContextProvider>
-          <PageInner />
-        </PlaygroundContextProvider>
-      </DefaultLayout>
-    </MainContext.Provider>
-  )
-}
-
-function PageInner() {
-  const router = useRouter()
-  const { article } = usePlaygroundContext()
-
-  if (!article) {
-    return <GenericError />
-  }
-
-  return (
-    <div className="p-responsive my-5 mx-auto" style={{ maxWidth: 1600, minWidth: 768 }}>
-      <div className="d-flex">
-        <article className="col-6 ml-lg-3 mr-3">
-          <Callout variant="info">
-            <p className="d-flex">
-              <span className="mr-3 mt-1">
-                <BeakerIcon size={18} />
-              </span>
-              <span>
-                You've found one of our experimental articles! Have ideas or feedback for how we can
-                further improve this article? Let us know{' '}
-                <Link href="https://github.com/github/docs/discussions/9369" target="_blank">
-                  in the discussion
-                </Link>
-                .
-              </span>
-            </p>
-          </Callout>
-          <PlaygroundArticle />
-        </article>
-
-        <div className="col-6">
-          <div className="fix position-sticky mt-3" style={{ top: '6.5em' }}>
-            <div className="d-flex flex-justify-between flex-items-center mb-3">
-              <CodeLanguagePicker variant="tabs" />
-              <div className="flash">
-                <ZapIcon className="mr-2" />
-                <Link href={`/${router.locale}${article.originalArticle}`}>
-                  Switch to non-interactive article
-                </Link>
-              </div>
-            </div>
-
-            <Editor article={article} />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
-  const req = context.req as any
-  const res = context.res as any
-
-  return {
-    props: {
-      mainContext: getMainContext(req, res),
-    },
-  }
-}
+export default PlaygroundArticlePage

pages/[versionId]/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces.tsx

@@ -0,0 +1,5 @@
+import PlaygroundArticlePage from 'components/playground/PlaygroundArticlePage'
+
+export { getServerSideProps } from 'components/playground/PlaygroundArticlePage'
+
+export default PlaygroundArticlePage

translations/es-ES/content/codespaces/customizing-your-codespace/configuring-codespaces-for-your-project.md

@@ -1,166 +0,0 @@
----
-title: Configurar Codespaces para tu proyecto
-intro: 'Puedes utilizar un archivo de `devcontainer.json` para definir un ambiente de {% data variables.product.prodname_codespaces %} para tu repositorio.'
-permissions: People with write permissions to a repository can create or edit the codespace configuration.
-redirect_from:
-  - /github/developing-online-with-github-codespaces/configuring-github-codespaces-for-your-project
-  - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
-  - /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
-versions:
-  fpt: '*'
-  ghec: '*'
-type: how_to
-topics:
-  - Codespaces
-  - Set up
-  - Fundamentals
-product: '{% data reusables.gated-features.codespaces %}'
-shortTitle: Configura tu proyecto
----
-
- 
-
-## Acerca de los contenedores dev
-
-Un contenedor de desarrollo o contenedor dev es el ambiente que utilizan los {% data variables.product.prodname_codespaces %} para proporcionar las herramientas y tiempos de ejecución que necesita tu proyecto para su desarrollo. If your project does not already have a dev container defined, {% data variables.product.prodname_codespaces %} will use the default configuration, which contains many of the common tools that your team might need for development with your project. For more information, see "[Using the default configuration](#using-the-default-configuration)."
-
-If you want all users of your project to have a consistent environment that is tailored to your project, you can add a dev container to your repository. You can use a predefined configuration to select a common configuration for various project types with the option to further customize your project or you can create your own custom configuration. For more information, see "[Using a predefined container configuration](#using-a-predefined-container-configuration)" and "[Creating a custom codespace configuration](#creating-a-custom-codespace-configuration)." La opción que elijas dependerá de las herramientas, tiempos de ejecución, dependencias y flujos de trabajo que el usuario pudiese necesitar para tener éxito en tu proyecto.
-
-{% data variables.product.prodname_codespaces %} permite la personalización por proyecto y por rama con un archivo `devcontainer.json`. Este archivo de configuración determina el ambiente de cada codespace nuevo que cualquier persona cree en tu repositorio definiendo un contenedor de desarrollo que puede incluir marcos de trabajo, herramientas, extensiones y reenvío de puertos. También puede utilizarse un Dockerfile junto con el archivo `devcontainer.json` en la carpeta `.devcontainer` para definir todo lo que se necesita para crear una imagen de contenedor.
-
-### devcontainer.json
-
-{% data reusables.codespaces.devcontainer-location %}
-
-Puedes utilizar tu `devcontainer.json` para configurar los ajustes predeterminados para todo el ambiente de codespaces, incluyendo el editor, pero también puedes configurar ajustes específicos del editor para [espacios de trabajo](https://code.visualstudio.com/docs/editor/workspaces) individuales de un codespace en un archivo llamado `.vscode/settings.json`.
-
-Para obtener más información sobre la configuración y propiedades que puedes configurar en un `devcontainer.json`, consulta la [referencia a devcontainer.json](https://aka.ms/vscode-remote/devcontainer.json) en la documentación de {% data variables.product.prodname_vscode %}.
-
-### Dockerfile
-
-Un Dockerfile también vive en la carpeta `.devcontainer`.
-
-Puedes agregar un Dockerfile a tu proyecto para definir una imagen de contenedor e instalar software. En el Dockerfile, puedes utilizar `FROM` para especificar la imagen de contenedor.
-
-```Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
-
-# ** [Optional] Uncomment this section to install additional packages. **
-# USER root
-#
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-#
-# USER codespace
-```
-
-Puedes utilizar la instrucción e `RUN` para instalar cualquier software y `&&` para unir comandos.
-
-Referencia tu Dockerfile en tu archivo de `devcontainer.json` utilizando la propiedad `dockerfile`.
-
-```json
-{
-  ...
-  "build": { "dockerfile": "Dockerfile" },
-  ...
-}
-```
-
-Para obtener más información sobre cómo utilizar un Dockerfile en un contenedor de dev, consulta la sección [Crear un contenedor de desarrollo](https://code.visualstudio.com/docs/remote/create-dev-container#_dockerfile) en la documentación de {% data variables.product.prodname_vscode %}.
-
-## Utilizar la configuración predeterminada
-
-Si no defines una configuración en tu repositorio, {% data variables.product.prodname_dotcom %} creará un codespace con una imagen base de Linux. La imagen base de Linux incluye lenguajes y tiempos de ejecución como Python, Node.js, JavaScript, TypeScript, C++, Java, .NET, PHP, PowerShell, Go, Ruby, y Rust. También incluye otras herramientas y utilidades de desarrollador como git, el CLI de GitHub, yarn, openssh y vim. Para ver todos los lenguajes, tiempos de ejecución y herramientas que se incluyen, utiliza el comando `devcontainer-info content-url` dentro de tu terminal del codespace y sigue la url que este produce.
-
-Como alternativa, para obtener más información sobre todo lo que incluye la imagen básica de Linux, consulta el archivo más reciente del repositorio [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux).
-
-La configuración predeterminada es una buena opción si estás trabajando en un proyecto pequeño que utilice los lenguajes y herramientas que proporciona {% data variables.product.prodname_codespaces %}.
-
-
-## Utilizar una configuración de contenedor predefinida
-
-Las definiciones predefinidas de contenedores incluyen una configuración común para u tipo de proyecto en particular y pueden ayudarte a iniciar rápidamente con una configuración que ya tenga las opciones adecuadas del contenedor, los ajustes de {% data variables.product.prodname_vscode %} y las extensiones de {% data variables.product.prodname_vscode %} que deben estar instaladas.
-
-Utilizar una configuración predefinida es una gran idea si necesitas extensibilidad adicional. También puedes iniciar con una configuración predefinida y modificarla conforme lo requieras de acuerdo con los ajustes de tu proyecto.
-
-{% data reusables.codespaces.command-palette-container %}
-1. Haz clic en la definición que quieras utilizar. ![Lista de definiciones de contenedores predefinidas](/assets/images/help/codespaces/predefined-container-definitions-list.png)
-1. Sigue los mensajes para personalizar tu definición. 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. Haz clic en **OK** (aceptar). ![Botón de OK](/assets/images/help/codespaces/prebuilt-container-ok-button.png)
-1. Para aplicar los cambios, en la esquina inferior derecha de la pantalla, haz clic en **Reconstruir ahora**. Para obtener más información sbre reconstruir tu contenedor, consulta la sección "[Acplicar los cambios a tu configuración](#applying-changes-to-your-configuration)". !["Codespaces: Rebuild Container" in the {% data variables.product.prodname_vscode_command_palette %}](/assets/images/help/codespaces/rebuild-prompt.png)
-
-### Adding additional features to your `devcontainer.json` file
-
-{% note %}
-
-**Note:** This feature is in beta and subject to change.
-
-{% endnote %}
-
-You can add features to your predefined container configuration to customize which tools are available and extend the functionality of your workspace without creating a custom codespace configuration. For example, you could use a predefined container configuration and add the {% data variables.product.prodname_cli %} as well. You can make these additional features available for your project by adding the features to your `devcontainer.json` file when you set up your container configuration.
-
-You can add some of the most common features by selecting them when configuring your predefined container. For more information on the available features, see the [script library](https://github.com/microsoft/vscode-dev-containers/tree/main/script-library#scripts) in the `vscode-dev-containers` repository.
-
-![The select additional features menu during container configuration.](/assets/images/help/codespaces/select-additional-features.png)
-
-You can also add or remove features outside of the **Add Development Container Configuration Files** workflow.
-1. Access the Command Palette (`Shift + Command + P` / `Ctrl + Shift + P`), then start typing "configure". Select **Codespaces: Configure Devcontainer Features**. ![The Configure Devcontainer Features command in the command palette](/assets/images/help/codespaces/codespaces-configure-features.png)
-2. Update your feature selections, then click **OK**. ![The select additional features menu during container configuration.](/assets/images/help/codespaces/select-additional-features.png)
-1. Para aplicar los cambios, en la esquina inferior derecha de la pantalla, haz clic en **Reconstruir ahora**. Para obtener más información sbre reconstruir tu contenedor, consulta la sección "[Acplicar los cambios a tu configuración](#applying-changes-to-your-configuration)". !["Codespaces: Reconstruir contenedor" en la paleta de comandos](/assets/images/help/codespaces/rebuild-prompt.png)
-
-
-## Crear una configuración personalizada para un codespace
-
-Si ninguna de las configuraciones predefinidas satisface tus necesidades, puedes crear una configuración personalizada si agregas un archivo `devcontainer.json`. {% data reusables.codespaces.devcontainer-location %}
-
-En el archivo, puedes utilizar las [llaves de configuración compatibles](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) para especificar los aspectos del ambiente del codespace, como cuáles extensiones de {% data variables.product.prodname_vscode %} se instalarán.
-
-{% data reusables.codespaces.vscode-settings-order %}
-
-Puedes definir la configuración predeterminada del editor para {% data variables.product.prodname_vscode %} en dos lugares.
-
-* La configuración del editor que se definió en `.vscode/settings.json` se aplica como una configuración con alcance de _Workspace_- en este codespace.
-* La configuración del editor que se definió en la clave `settings` en `devcontainer.json` se aplica como una configuración con alcance de _Remote [Codespaces]_ en este codespace.
-
-Después de actualizar el archivo `devcontainer.json`, puedes reconstruir el contenedor para que tu codespace aplique los cambios. Para obtener más información, consulta la sección "[Aplicar cambios a tu configuración](#applying-changes-to-your-configuration)".
-
-
-<!--
-## Supported codespace configuration keys
-
-You can use configuration keys supported by {% data variables.product.prodname_codespaces %} in `devcontainer.json`.
-
-### General settings
-
-- `name`
-- `settings`
-- `extensions`
-- `forwardPorts`
-- `postCreateCommand`
-
-### Docker, Dockerfile, or image settings
-
-- `image`
-- `dockerFile`
-- `context`
-- `containerEnv`
-- `remoteEnv`
-- `containerUser`
-- `remoteUser`
-- `mounts`
-- `runArgs`
-- `overrideCommand`
-- `dockerComposeFile`
-
-For more information about the available settings for `devcontainer.json`, see [devcontainer.json reference](https://aka.ms/vscode-remote/devcontainer.json) in the {% data variables.product.prodname_vscode %} documentation.
--->
-
-## Aplicar cambios a tu configuración
-
-{% data reusables.codespaces.apply-devcontainer-changes %}
-
-{% data reusables.codespaces.rebuild-command %}
-1. {% data reusables.codespaces.recovery-mode %} Arreglar los errores en la configuración. ![Mensaje de error sobre el modo de recuperación](/assets/images/help/codespaces/recovery-mode-error-message.png)
-   - Para diagnosticar el error revisando la bitácora de creación, haz clic en **Ver bitácora de creación**.
-   - Para arreglar los errores que se identificaron en las bitácoras, actualiza tu archivo `devcontainer.json`.
-   - Para aplicar los cambios, vuelve a crear tu contenedor. 

translations/es-ES/content/codespaces/developing-in-codespaces/changing-the-machine-type-for-your-codespace.md

@@ -1,60 +0,0 @@
----
-title: Cambiar el tipo de máquina de tu codespace
-shortTitle: Cambiar el tipo de máquina
-intro: Puedes cambiar el tipo de máquina que está ejecutando tu codespace para que estés utilizando recursos adecuados para el trabajo que estás haciendo.
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
----
-
-## Acerca de los tipos de máquina
-
-{% note %}
-
-**Nota:** Solo puedes seleccionar o cambiar el tipo de máquina si eres miembro de una organización que está utilizando {% data variables.product.prodname_codespaces %} y estás creando un codespace en un repositorio que pertenece a dicha organización.
-
-{% endnote %}
-
-{% data reusables.codespaces.codespaces-machine-types %}
-
-Puedes elegir un tipo de máquina, ya sea cuando creas un codespace o puedes cambiar el tipo de máquina en cualquier momento después de que lo hayas creado.
-
-Para obtener más información sobre cómo elegir un tio de máquina cuando creas un codespace, consulta la sección "[Crear un codespace](/codespaces/developing-in-codespaces/creating-a-codespace#creating-a-codespace)". Para obtener más información sobre cómo cambiar el tipo de máquina dentro de {% data variables.product.prodname_vscode %}, consulta la sección "[Utilizar los {% data variables.product.prodname_codespaces %} en {% data variables.product.prodname_vscode %}](/codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code#changing-the-machine-type-in-visual-studio-code)".
-
-## Cambiar el tipo de máquina en {% data variables.product.prodname_dotcom %}
-
-{% data reusables.codespaces.your-codespaces-procedure-step %}
-
-   Se mostrará el tipo de máquina actual para cada uno de tus codespaces.
-
-   ![Lista de 'Tus codespaces'](/assets/images/help/codespaces/your-codespaces-list.png)
-
-1. Haz clic en los puntos suspensivos (**...**) a la derecha del codespace que quieras modificar.
-1. Haz clic en **Cambiar tipo de máquina**.
-
-   ![Opción de menú 'Cambiar tipo de máquina'](/assets/images/help/codespaces/change-machine-type-menu-option.png)
-
-1. Elige el tipo de máquina requerido.
-
-2. Haz clic en **Actualizar codespace**.
-
-   El cambio surtirá efecto la siguiente vez que reinicies tu codespace.
-
-## Forzar una actualización inmediata de un codespace que se está ejecutando actualmente
-
-Si cambias el tipo de máquina de un codespace que estés utilizando actualmente y quieres aplicar los cambios de inmediato, puedes forzar el codespace para que se reinicie.
-
-1. En la parte inferior izquierda de tu ventana de codespace, haz clic en **{% data variables.product.prodname_codespaces %}**.
-
-   ![Hacer clic en '{% data variables.product.prodname_codespaces %}'](/assets/images/help/codespaces/codespaces-button.png)
-
-1. Desde las opciones que se muestran en la parte superior de la página, selecciona **Codespaces: Detener el Codespace actual**.
-
-   ![Opción 'Suspender codespace actual'](/assets/images/help/codespaces/suspend-current-codespace.png)
-
-1. Después de que se detenga el codespace, haz clic en **Restablecer codespace**.
-
-   ![Hacer clic en 'Reanudar'](/assets/images/help/codespaces/resume-codespace.png)

translations/es-ES/content/codespaces/managing-your-codespaces/setting-your-default-editor-for-codespaces.md

@@ -1,21 +0,0 @@
----
-title: Configurar tu editor predeterminado para Codesapces
-intro: 'Puedes configurar tu editor predeterminado para {% data variables.product.prodname_codespaces %} en tu página de ajustes personal.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Configurar el editor predeterminado
----
-
-En la página de ajustes, puedes configurar las preferencias de tu editor para que los codespaces recién creados se abran automáticamente, ya sea en {% data variables.product.prodname_vscode %} para la Web o en {% data variables.product.prodname_vscode %} para escritorio.
-
-Si quieres utilizar {% data variables.product.prodname_vscode %} como tu editor predeterminado para {% data variables.product.prodname_codespaces %}, necesitas instalar {% data variables.product.prodname_vscode %} y la extensión de {% data variables.product.prodname_github_codespaces %} para {% data variables.product.prodname_vscode %}. Para obtener más información, consulta la [página de descarga de {% data variables.product.prodname_vscode %}](https://code.visualstudio.com/download/) y la [ extensión de {% data variables.product.prodname_github_codespaces %} en el mercado de {% data variables.product.prodname_vscode %}](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces).
-
-## Configurar tu editor predeterminado
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Debajo de "Preferencia de editor", selecciona la opción que desees. ![Setting your editor](/assets/images/help/codespaces/select-default-editor.png)Si eliges **{% data variables.product.prodname_vscode %}**, los {% data variables.product.prodname_codespaces %} se abrirán automáticamente en la aplicación de escritorio cuando crees el siguiente codespace. Podrías necesitar permitir acceso tanto a tu buscador como a {% data variables.product.prodname_vscode %} para que abra con éxito. ![Configurar tu editor](/assets/images/help/codespaces/launch-default-editor.png)

translations/es-ES/content/codespaces/managing-your-codespaces/setting-your-default-region-for-codespaces.md

@@ -1,20 +0,0 @@
----
-title: Configurar tu región predeterminada para Codespaces
-intro: 'Pues configurar tu región predeterminada en la página de ajustes de perfil de {% data variables.product.prodname_github_codespaces %} para personalizar en donde se guardan tus datos.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Configurar la región predeterminada
----
-
-Puedes seleccionar manualmente la región en la que se crearán tus codespaces, permitiéndote cumplir con los requisitos de cumplimiento y seguridad estrictos. Predeterminadamente, tu región se configura automáticamente con base en tu ubicación.
-
-## Configurar tu región predeterminada
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Debajo de "Región", selecciona el ajuste que quieras.
-2. Si eliges "Configurar manualmente", selecciona tu región en el menú desplegable. ![Seleccionar tu región](/assets/images/help/codespaces/select-default-region.png)

translations/ja-JP/content/codespaces/customizing-your-codespace/configuring-codespaces-for-your-project.md

@@ -1,166 +0,0 @@
----
-title: プロジェクトの Codespace の設定
-intro: '「devcontainer.json」ファイルを使用して、リポジトリの {% data variables.product.prodname_codespaces %} 環境を定義できます。'
-permissions: People with write permissions to a repository can create or edit the codespace configuration.
-redirect_from:
-  - /github/developing-online-with-github-codespaces/configuring-github-codespaces-for-your-project
-  - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
-  - /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
-versions:
-  fpt: '*'
-  ghec: '*'
-type: how_to
-topics:
-  - Codespaces
-  - Set up
-  - Fundamentals
-product: '{% data reusables.gated-features.codespaces %}'
-shortTitle: プロジェクトの設定
----
-
- 
-
-## 開発コンテナについて
-
-開発コンテナ (development container)、または開発コンテナ (dev container) は、{% data variables.product.prodname_codespaces %} がプロジェクトの開発に必要なツールとランタイムを提供するために使用する環境です。 If your project does not already have a dev container defined, {% data variables.product.prodname_codespaces %} will use the default configuration, which contains many of the common tools that your team might need for development with your project. For more information, see "[Using the default configuration](#using-the-default-configuration)."
-
-If you want all users of your project to have a consistent environment that is tailored to your project, you can add a dev container to your repository. You can use a predefined configuration to select a common configuration for various project types with the option to further customize your project or you can create your own custom configuration. For more information, see "[Using a predefined container configuration](#using-a-predefined-container-configuration)" and "[Creating a custom codespace configuration](#creating-a-custom-codespace-configuration)." 選択するオプションは、ユーザのプロジェクトが上手くいくために必要なツール、ランタイム、依存関係、およびワークフローによって異なります。
-
-{% data variables.product.prodname_codespaces %} は、`devcontainer.json` ファイルを使用して、プロジェクトごとおよびブランチごとにカスタマイズできます。 この設定ファイルは、フレームワーク、ツール、機能拡張、およびポート転送を含めることができる開発コンテナを定義することにより、リポジトリ用に作成するすべての新しい codespace の環境を決定します。 Dockerfile を `.devcontainer` フォルダ内の `devcontainer.json` ファイルと一緒に使用して、コンテナイメージの作成に必要なすべてを定義することもできます。
-
-### devcontainer.json
-
-{% data reusables.codespaces.devcontainer-location %}
-
-`devcontainer.json` を使用して、エディタを含む codespace 環境全体のデフォルト設定をすることができますが、`.vscode/settings.json` という名前のファイルの codespace 内の個々の[ワークスペース](https://code.visualstudio.com/docs/editor/workspaces)にエディタ固有の設定をすることもできます。
-
-`devcontainer.json` で可能な設定とプロパティについては、{% data variables.product.prodname_vscode %} ドキュメントの [devcontainer.json リファレンス](https://aka.ms/vscode-remote/devcontainer.json)を参照してください。
-
-### Dockerfile
-
-Dockerfile は `.devcontainer` フォルダにもあります。
-
-Dockerfile をプロジェクトに追加して、コンテナイメージを定義し、ソフトウェアをインストールできます。 Dockerfileでは、`FROM` を使用してコンテナイメージを指定できます。
-
-```Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
-
-# ** [Optional] このセクションのコメントを解除して、追加のパッケージをインストールします。 **
-# USER root
-#
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-#
-# USER codespace
-```
-
-`RUN` 命令を使用して任意のソフトウェアをインストールし、`&&` を使用してコマンドを結合できます。
-
-`dockerfile` プロパティを使用して、`devcontainer.json` ファイルで Dockerfile を参照します。
-
-```json
-{
-  ...
-  "build": { "dockerfile": "Dockerfile" },
-  ...
-}
-```
-
-開発コンテナでの Dockerfile の使用について詳しくは、{% data variables.product.prodname_vscode %} ドキュメントの「[開発コンテナの作成](https://code.visualstudio.com/docs/remote/create-dev-container#_dockerfile)」を参照してください。
-
-## デフォルト設定を使用する
-
-リポジトリで設定を定義しない場合、{% data variables.product.prodname_dotcom %} はベースの Linux イメージを使用して Codespaces を作成します。 ベース Linux イメージには、Python、Node.js、JavaScript、TypeScript、C++、Java、.NET、PHP、PowerShell、Go、Ruby、Rust などの言語とランタイムが含まれています。 また、git、GitHub CLI、yarn、openssh、vim などの他の開発者ツールやユーティリティも含まれています。 含まれているすべての言語、ランタイム、およびツールを表示するには、codespace 端末内で `devcontainer-info content-url` コマンドを使用し、コマンドが出力する URL に従います。
-
-または、ベース Linux イメージに含まれるすべての詳細については、[`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux) リポジトリの最新ファイルを参照してください。
-
-{% data variables.product.prodname_codespaces %} が提供する言語とツールを使用する小さなプロジェクトで作業している場合は、デフォルトの設定が適しています。
-
-
-## 事前定義済みのコンテナ設定を使用する
-
-事前定義済みのコンテナの定義には、特定のプロジェクトタイプの共通設定が含まれており、インストールする必要のある適切なコンテナオプション、{% data variables.product.prodname_vscode %} 設定、および {% data variables.product.prodname_vscode %} 機能拡張が既に含まれている設定を使用してすばやく開始できます。
-
-追加の拡張性が必要な場合は、事前定義済みの設定を使用することをお勧めします。 事前定義済みの設定をひな形にして、プロジェクトの設定に合わせて修正することもできます。
-
-{% data reusables.codespaces.command-palette-container %}
-1. Click the definition you want to use. ![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. [**OK**] をクリックします。 ![OK button](/assets/images/help/codespaces/prebuilt-container-ok-button.png)
-1. To apply the changes, in the bottom right corner of the screen, click **Rebuild now**. For more information about rebuilding your container, see "[Applying changes to your configuration](#applying-changes-to-your-configuration)." !["Codespaces: Rebuild Container" in the {% data variables.product.prodname_vscode_command_palette %}](/assets/images/help/codespaces/rebuild-prompt.png)
-
-### Adding additional features to your `devcontainer.json` file
-
-{% note %}
-
-**Note:** This feature is in beta and subject to change.
-
-{% endnote %}
-
-You can add features to your predefined container configuration to customize which tools are available and extend the functionality of your workspace without creating a custom codespace configuration. For example, you could use a predefined container configuration and add the {% data variables.product.prodname_cli %} as well. You can make these additional features available for your project by adding the features to your `devcontainer.json` file when you set up your container configuration.
-
-You can add some of the most common features by selecting them when configuring your predefined container. For more information on the available features, see the [script library](https://github.com/microsoft/vscode-dev-containers/tree/main/script-library#scripts) in the `vscode-dev-containers` repository.
-
-![The select additional features menu during container configuration.](/assets/images/help/codespaces/select-additional-features.png)
-
-You can also add or remove features outside of the **Add Development Container Configuration Files** workflow.
-1. Access the Command Palette (`Shift + Command + P` / `Ctrl + Shift + P`), then start typing "configure". Select **Codespaces: Configure Devcontainer Features**. ![The Configure Devcontainer Features command in the command palette](/assets/images/help/codespaces/codespaces-configure-features.png)
-2. Update your feature selections, then click **OK**. ![The select additional features menu during container configuration.](/assets/images/help/codespaces/select-additional-features.png)
-1. To apply the changes, in the bottom right corner of the screen, click **Rebuild now**. For more information about rebuilding your container, see "[Applying changes to your configuration](#applying-changes-to-your-configuration)." !["Codespaces: Rebuild Container" in the command palette](/assets/images/help/codespaces/rebuild-prompt.png)
-
-
-## カスタム codespace 設定を作成する
-
-事前設定済みの設定のいずれもニーズを満たさない場合は、`devcontainer.json` ファイルを追加してカスタム設定を作成できます。 {% data reusables.codespaces.devcontainer-location %}
-
-このファイルでは、[サポートされている設定キー](https://code.visualstudio.com/docs/remote/devcontainerjson-reference)を使用して、codespace の環境の要素を指定できます。たとえば、{% data variables.product.prodname_vscode %} 拡張機能がインストールできます。
-
-{% data reusables.codespaces.vscode-settings-order %}
-
-2 つの場所で {% data variables.product.prodname_vscode %} のデフォルトのエディタ設定を定義できます。
-
-* `.vscode/settings.json` で定義されたエディタ設定は、_Workspace_ スコープの設定として codespace に適用されます。
-* `devcontainer.json` の`設定`キーで定義されたエディタ設定は、codespace の _リモート [Codespaces]_ スコープ設定として適用されます。
-
-After updating the `devcontainer.json` file, you can rebuild the container for your codespace to apply the changes. For more information, see "[Applying changes to your configuration](#applying-changes-to-your-configuration)."
-
-
-<!--
-## Supported codespace configuration keys
-
-You can use configuration keys supported by {% data variables.product.prodname_codespaces %} in `devcontainer.json`.
-
-### General settings
-
-- `name`
-- `settings`
-- `extensions`
-- `forwardPorts`
-- `postCreateCommand`
-
-### Docker, Dockerfile, or image settings
-
-- `image`
-- `dockerFile`
-- `context`
-- `containerEnv`
-- `remoteEnv`
-- `containerUser`
-- `remoteUser`
-- `mounts`
-- `runArgs`
-- `overrideCommand`
-- `dockerComposeFile`
-
-For more information about the available settings for `devcontainer.json`, see [devcontainer.json reference](https://aka.ms/vscode-remote/devcontainer.json) in the {% data variables.product.prodname_vscode %} documentation.
--->
-
-## Applying changes to your configuration
-
-{% data reusables.codespaces.apply-devcontainer-changes %}
-
-{% data reusables.codespaces.rebuild-command %}
-1. {% data reusables.codespaces.recovery-mode %} Fix the errors in the configuration. ![Error message about recovery mode](/assets/images/help/codespaces/recovery-mode-error-message.png)
-   - To diagnose the error by reviewing the creation logs, click **View creation log**.
-   - To fix the errors identified in the logs, update your `devcontainer.json` file.
-   - To apply the changes, rebuild your container. 

translations/ja-JP/content/codespaces/developing-in-codespaces/changing-the-machine-type-for-your-codespace.md

@@ -1,60 +0,0 @@
----
-title: Changing the machine type for your codespace
-shortTitle: Changing the machine type
-intro: 'You can change the type of machine that''s running your codespace, so that you''re using resources appropriate for work you''re doing.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
----
-
-## About machine types
-
-{% note %}
-
-**Note:** You can only select or change the machine type if you are a member of an organization using {% data variables.product.prodname_codespaces %} and are creating a codespace on a repository owned by that organization.
-
-{% endnote %}
-
-{% data reusables.codespaces.codespaces-machine-types %}
-
-You can choose a machine type either when you create a codespace or you can change the machine type at any time after you've created a codespace.
-
-For information on choosing a machine type when you create a codespace, see "[Creating a codespace](/codespaces/developing-in-codespaces/creating-a-codespace#creating-a-codespace)." For information on changing the machine type within {% data variables.product.prodname_vscode %}, see "[Using {% data variables.product.prodname_codespaces %} in {% data variables.product.prodname_vscode %}](/codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code#changing-the-machine-type-in-visual-studio-code)."
-
-## Changing the machine type in {% data variables.product.prodname_dotcom %}
-
-{% data reusables.codespaces.your-codespaces-procedure-step %}
-
-   The current machine type for each of your codespaces is displayed.
-
-   !['Your codespaces' list](/assets/images/help/codespaces/your-codespaces-list.png)
-
-1. Click the ellipsis (**...**) to the right of the codespace you want to modify.
-1. Click **Change machine type**.
-
-   !['Change machine type' menu option](/assets/images/help/codespaces/change-machine-type-menu-option.png)
-
-1. Choose the required machine type.
-
-2. Click **Update codespace**.
-
-   The change will take effect the next time your codespace restarts.
-
-## Force an immediate update of a currently running codespace
-
-If you change the machine type of a codespace you are currently using, and you want to apply the changes immediately, you can force the codespace to restart.
-
-1. At the bottom left of your codespace window, click **{% data variables.product.prodname_codespaces %}**.
-
-   ![Click '{% data variables.product.prodname_codespaces %}'](/assets/images/help/codespaces/codespaces-button.png)
-
-1. From the options that are displayed at the top of the page select **Codespaces: Stop Current Codespace**.
-
-   !['Suspend Current Codespace' option](/assets/images/help/codespaces/suspend-current-codespace.png)
-
-1. After the codespace is stopped, click **Restart codespace**.
-
-   ![Click 'Resume'](/assets/images/help/codespaces/resume-codespace.png)

translations/ja-JP/content/codespaces/managing-your-codespaces/setting-your-default-editor-for-codespaces.md

@@ -1,21 +0,0 @@
----
-title: Setting your default editor for Codespaces
-intro: 'You can set your default editor for {% data variables.product.prodname_codespaces %} in your personal settings page.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Set the default editor
----
-
-On the settings page, you can set your editor preference so that any newly created codespaces are opened automatically in either {% data variables.product.prodname_vscode %} for Web or the {% data variables.product.prodname_vscode %} desktop application.
-
-If you want to use {% data variables.product.prodname_vscode %} as your default editor for {% data variables.product.prodname_codespaces %}, you need to install {% data variables.product.prodname_vscode %} and the {% data variables.product.prodname_github_codespaces %} extension for {% data variables.product.prodname_vscode %}. For more information, see the [download page for {% data variables.product.prodname_vscode %}](https://code.visualstudio.com/download/) and the [{% data variables.product.prodname_github_codespaces %} extension on the {% data variables.product.prodname_vscode %} marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces).
-
-## Setting your default editor
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Under "Editor preference", select the option you want. ![Setting your editor](/assets/images/help/codespaces/select-default-editor.png) If you choose **{% data variables.product.prodname_vscode %}**, {% data variables.product.prodname_codespaces %} will automatically open in the desktop application when you next create a codespace. You may need to allow access to both your browser and {% data variables.product.prodname_vscode %} for it to open successfully. ![Setting your editor](/assets/images/help/codespaces/launch-default-editor.png)

translations/ja-JP/content/codespaces/managing-your-codespaces/setting-your-default-region-for-codespaces.md

@@ -1,20 +0,0 @@
----
-title: Setting your default region for Codespaces
-intro: 'You can set your default region in the {% data variables.product.prodname_github_codespaces %} profile settings page to personalize where your data is held.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Set the default region
----
-
-You can manually select the region that your codespaces will be created in, allowing you to meet stringent security and compliance requirements. By default, your region is set automatically, based on your location.
-
-## Setting your default region
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Under "Region", select the setting you want.
-2. If you chose "Set manually", select your region in the drop-down list. ![Selecting your region](/assets/images/help/codespaces/select-default-region.png)

translations/pt-BR/content/codespaces/customizing-your-codespace/configuring-codespaces-for-your-project.md

@@ -1,167 +0,0 @@
----
-title: Configurar codespaces para seu projeto
-intro: 'Você pode usar um arquivo `devcontainer.json` para definir um ambiente de {% data variables.product.prodname_codespaces %} para o seu repositório.'
-permissions: People with write permissions to a repository can create or edit the codespace configuration.
-redirect_from:
-  - /github/developing-online-with-github-codespaces/configuring-github-codespaces-for-your-project
-  - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
-  - /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
-versions:
-  fpt: '*'
-  ghec: '*'
-type: how_to
-topics:
-  - Codespaces
-  - Set up
-  - Fundamentals
-product: '{% data reusables.gated-features.codespaces %}'
-shortTitle: Configure o seu projeto
----
-
- 
-
-## Sobre contêineres de desenvolvimento
-
-Um contêiner de desenvolvimento, ou dev container, é o ambiente que {% data variables.product.prodname_codespaces %} usa para fornecer as ferramentas e tempos de execução de que seu projeto precisa para desenvolvimento. Se o seu projeto não tiver um contêiner de desenvolvimento definido, {% data variables.product.prodname_codespaces %} usará a configuração padrão, que contém muitas das ferramentas comuns que sua equipe pode precisar para desenvolver o seu projeto. Para obter mais informações, consulte "[Usando a configuração padrão](#using-the-default-configuration). "
-
-Se você deseja que todos os usuários de seu projeto tenham um ambiente consistente que seja adaptado ao seu projeto, você poderá adicionar um contêiner de desenvolvimento ao seu repositório. Você pode usar uma configuração predefinida para selecionar uma configuração comum para vários tipos de projeto com a opção para personalizar ainda mais seu projeto ou você pode criar sua própria configuração personalizada. Para obter mais informações, consulte "[Usando uma configuração de contêiner predefinida](#using-a-predefined-container-configuration)" e "[Criando uma configuração personalizada de codespace](#creating-a-custom-codespace-configuration)". A opção escolhida depende das ferramentas, tempo de execução, dependências e fluxos de trabalho que um usuário pode precisar para ter sucesso com seu projeto.
-
-{% data variables.product.prodname_codespaces %} permite a personalização em uma base por projeto e por branch com um arquivo `devcontainer.json`. Este arquivo de configuração determina o ambiente de cada novo codespace que alguém criar para o repositório, definindo um contêiner de desenvolvimento que pode incluir estruturas, ferramentas, extensões e encaminhamento de porta. Um arquivo Docker também pode ser usado ao lado do arquivo `devcontainer.json` na pasta `devcontainer` para definir tudo o que é necessário para criar uma imagem de contêiner.
-
-### devcontainer.json
-
-{% data reusables.codespaces.devcontainer-location %}
-
-Você pode usar o seu `devcontainer.json` para definir as configurações padrão para todo o ambiente do codespace, incluindo o editor, mas você também pode definir configurações específicas do editor para áreas de trabalho individuais [](https://code.visualstudio.com/docs/editor/workspaces) em um codespace em um arquivo denominado `.vscode/settings.json`.
-
-Para obter informações sobre as configurações e propriedades que você pode definir em um `devcontainer.json`, consulte [referência do devcontainer.json](https://aka.ms/vscode-remote/devcontainer.json) na documentação de {% data variables.product.prodname_vscode %}.
-
-### arquivo Docker
-
-Um arquivo Docker também mora na pasta `.devcontainer`.
-
-Você pode adicionar um arquivo Docker ao seu projeto para definir uma imagem de contêiner e instalar software. No arquivo Docker, você pode usar `DE` para especificar a imagem do contêiner.
-
-```Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
-
-# ** [Optional] Uncomment this section to install additional packages. **
-# USER root
-#
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-#
-# USER codespace
-```
-
-Você pode usar a instrução `EXECUTAR` para instalar qualquer software e `&&` para unir comandos.
-
-Faça referência ao seu arquivo Docker no arquivo `devcontainer.json` usando a propriedade `arquivo Docker`.
-
-```json
-{
-  ...
-  "build": { "dockerfile": "Dockerfile" },
-  ...
-}
-```
-
-Para obter mais informações sobre como usar um arquivo Docker em um contêiner de desenvolvimento, consulte [Criar um contêiner de desenvolvimento](https://code.visualstudio.com/docs/remote/create-dev-container#_dockerfile) na documentação de {% data variables.product.prodname_vscode %}.
-
-## Usando a configuração padrão
-
-Se você não definir uma configuração no repositório, o {% data variables.product.prodname_dotcom %} criará um código com uma imagem-base do Linux. A imagem de base do Linux inclui linguagens e tempos de execução como Python, Node.js, JavaScript, TypeScript, C++, Java, .NET, PHP, PowerShell, Go, Ruby e Rust. Ela também inclui outras ferramentas e utilitários para desenvolvedores como git, GitHub CLI, yarn, openssh, e vim. Para ver todas as linguagens, tempos de execução e as ferramentas que são incluídas, use o comando `devcontainer-info content-url` dentro do seu terminal de código e siga a url que o comando emite.
-
-Como alternativa, para obter mais informações sobre tudo o que está incluído na imagem de base do Linux, consulte o arquivo mais recente no repositório [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux).
-
-A configuração padrão é uma boa opção se você estiver trabalhando em um pequeno projeto que usa as linguagens e ferramentas que {% data variables.product.prodname_codespaces %} fornece.
-
-
-## Usando uma configuração de contêiner predefinida
-
-Definições de contêiner predefinidas incluem uma configuração comum para um tipo específico de projeto e podem ajudar você rapidamente a dar os primeiros passos com uma configuração que já tem as opções de contêiner apropriadas, {% data variables.product.prodname_vscode %} configurações, e extensões de {% data variables.product.prodname_vscode %} que devem ser instaladas.
-
-Usar uma configuração predefinida é uma ótima ideia se você precisa de uma extensão adicional. Você também pode começar com uma configuração predefinida e alterá-la conforme necessário para a configuração do seu projeto.
-
-{% data reusables.codespaces.command-palette-container %}
-1. Clique na definição que você deseja usar. ![Lista de definições de contêiner predefinidas](/assets/images/help/codespaces/predefined-container-definitions-list.png)
-1. Siga as instruções para personalizar sua definição. Para obter mais informações sobre as opções para personalizar sua definição, consulte "[Adicionando funcionalidades adicionais ao seu arquivo `devcontainer.json`](#adding-additional-features-to-your-devcontainerjson-file)".
-1. Clique em **OK**. ![Botão OK](/assets/images/help/codespaces/prebuilt-container-ok-button.png)
-1. Para aplicar as alterações, no canto inferior direito da tela, clique em **Reconstruir agora**. Para obter mais informações sobre a reconstrução do seu contêiner, consulte "[Aplicar alterações na sua configuração](#applying-changes-to-your-configuration)". !["Códigos: Recriar contêiner" em {% data variables.product.prodname_vscode_command_palette %}](/assets/images/help/codespaces/rebuild-prompt.png)
-
-### Adicionando funcionalidades adicionais ao arquivo `devcontainer.json`
-
-{% note %}
-
-**Observação:** Este recurso está na versão beta e sujeito a alterações.
-
-{% endnote %}
-
-Você pode adicionar recursos à configuração de contêiner predefinida para personalizar quais ferramentas estão disponíveis e ampliar a funcionalidade de seu espaço de trabalho sem criar uma configuração personalizada do codespace. Por exemplo, você poderia usar uma configuração de contêiner predefinida e adicionar o {% data variables.product.prodname_cli %} também. Você pode criar essas funcionalidades para o seu projeto adicionando as funcionalidades ao seu arquivo `devcontainer.json` ao definir a configuração do seu contêiner.
-
-Você pode adicionar algumas das características mais comuns selecionando-as na configuração do contêiner predefinido. Para obter mais informações sobre as funcionalidades disponíveis, consulte a biblioteca de script [](https://github.com/microsoft/vscode-dev-containers/tree/main/script-library#scripts) no repositório `vscode-dev-containers`.
-
-![O menu de seleção de funcionalidades adicionais durante a configuração do contêiner.](/assets/images/help/codespaces/select-additional-features.png)
-
-Você também pode adicionar ou remover funcionalidades fora do fluxo de trabalho **Adicionar arquivos de configuração do contêiner de desenvolvimento**.
-1. Acessar a Paleta de Comando (`Shift + Comando + P` / `Ctrl + Shift + P`) e, em seguida, comece a digitar "configurar". Selecione **Codespaces: Configure as Funcionalidades do contêiner de desenvolvimento**. ![O comando Configurar Funcionalidades do Devcontainer na paleta de comandos](/assets/images/help/codespaces/codespaces-configure-features.png)
-2. Atualize as seleções das suas funcioanlidades e clique em **OK**. ![O menu de seleção de funcionalidades adicionais durante a configuração do contêiner.](/assets/images/help/codespaces/select-additional-features.png)
-1. Para aplicar as alterações, no canto inferior direito da tela, clique em **Reconstruir agora**. Para obter mais informações sobre a reconstrução do seu contêiner, consulte "[Aplicar alterações na sua configuração](#applying-changes-to-your-configuration)". !["Codespaces: Reconstruir contêiner" na paleta de comandos](/assets/images/help/codespaces/rebuild-prompt.png)
-
-
-## Criar uma configuração personalizada de codespace
-
-Se nenhuma das configurações predefinidas atender às suas necessidades, você poderá criar uma configuração personalizada adicionando um arquivo `devcontainer.json`. {% data reusables.codespaces.devcontainer-location %}
-
-No arquivo, você pode usar [chaves de configuração compatíveis](https://code.visualstudio.com/docs/remote/devcontainerjson-reference) para especificar aspectos do ambiente do código, como quais extensões de {% data variables.product.prodname_vscode %} serão instaladas.
-
-{% data reusables.codespaces.vscode-settings-order %}
-
-Você pode definir as configurações de editor-padrão para {% data variables.product.prodname_vscode %} em dois lugares.
-
-* As configurações do editor definidas em `.vscode/settings.json` são aplicadas como configurações do escopo do _espaço de trabalho_ no codespace.
-* Configurações do editor definidas na chave `Configurações` no `devcontainer.json` são aplicadas como configuração de escopo _Remote [Codespaces]_ nesse codespace.
-
-Depois de atualizar o arquivo `devcontainer.json`, você poderá reconstruir o contêiner para o seu código aplicar as alterações. Para obter mais informações, consulte "[Aplicar alterações à sua configuração](#applying-changes-to-your-configuration)".
-
-
-<!--
-## Supported codespace configuration keys
-
-You can use configuration keys supported by {% data variables.product.prodname_codespaces %} in `devcontainer.json`.
-
-### General settings
-
-- `name`
-- `settings`
-- `extensions`
-- `forwardPorts`
-- `postCreateCommand`
-
-### Docker, Dockerfile, or image settings
-
-- `image`
-- `dockerFile`
-- `context`
-- `containerEnv`
-- `remoteEnv`
-- `containerUser`
-- `remoteUser`
-- `mounts`
-- `runArgs`
-- `overrideCommand`
-- `dockerComposeFile`
-
-For more information about the available settings for `devcontainer.json`, see [devcontainer.json reference](https://aka.ms/vscode-remote/devcontainer.json) in the {% data variables.product.prodname_vscode %} documentation.
--->
-
-## Aplicando alterações à sua configuração
-
-{% data reusables.codespaces.apply-devcontainer-changes %}
-
-{% data reusables.codespaces.rebuild-command %}
-1. {% data reusables.codespaces.recovery-mode %} Corrija os erros na configuração. ![Mensagem de erro sobre modo de recuperação](/assets/images/help/codespaces/recovery-mode-error-message.png)
-   - Para diagnosticar o erro revisando os registros de criação, clique em **Visualizar registro de criação**.
-   - Para corrigir os erros identificados nos registros, atualize seu arquivo </code>devcontainer.json..</li>
-<li>Para aplicar as alterações, reconstrua seu contêiner.</li>
-</ul> 

translations/pt-BR/content/codespaces/developing-in-codespaces/changing-the-machine-type-for-your-codespace.md

@@ -1,60 +0,0 @@
----
-title: Alterando o tipo de máquina para seu codespace
-shortTitle: Alterando o tipo da máquina
-intro: Você pode alterar o tipo de máquina que está executando o seu codespace para você usar os recursos apropriados para o trabalho que está fazendo.
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
----
-
-## Sobre os tipos de máquina
-
-{% note %}
-
-**Observação:** Você só pode selecionar ou alterar o tipo de máquina se você for integrante de uma organização usando {% data variables.product.prodname_codespaces %} e estiver criando um codespace em um repositório pertencente a essa organização.
-
-{% endnote %}
-
-{% data reusables.codespaces.codespaces-machine-types %}
-
-Você pode escolher um tipo de máquina ao criar um codespace ou você pode mudar o tipo de máquina a qualquer momento depois de criar um codespace.
-
-Para obter informações sobre como escolher um tipo de máquina ao criar um codespace, consulte "[Criando um codespace](/codespaces/developing-in-codespaces/creating-a-codespace#creating-a-codespace)". Para informações sobre como mudar o tipo de máquina em {% data variables.product.prodname_vscode %}, consulte "[Usando {% data variables.product.prodname_codespaces %} em {% data variables.product.prodname_vscode %}](/codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code#changing-the-machine-type-in-visual-studio-code)."
-
-## Alterar o tipo da máquina em {% data variables.product.prodname_dotcom %}
-
-{% data reusables.codespaces.your-codespaces-procedure-step %}
-
-   O tipo de máquina atual para cada um dos seus codespaces é exibido.
-
-   ![Lista "Seus codespaces"](/assets/images/help/codespaces/your-codespaces-list.png)
-
-1. Clique nas reticências (**...**) à direita do codespace que você deseja modificar.
-1. Clique **Alterar tipo de máquina**.
-
-   ![Opção de menu '"Alterar tipo de máquina"](/assets/images/help/codespaces/change-machine-type-menu-option.png)
-
-1. Escolha o tipo de máquina necessária.
-
-2. Clique **Atualizar o codespace**.
-
-   A alteração entrará em vigor na próxima vez que seu codespace for reiniciado.
-
-## Forçar uma atualização imediata de um codespace em execução no momento
-
-Se você mudar o tipo de máquina de um codespace que você está usando atualmente desejar aplicar as alterações imediatamente, você poderá forçar a reinicialização do codespace.
-
-1. No canto inferior esquerdo da janela do seu codespace, clique em **{% data variables.product.prodname_codespaces %}**.
-
-   ![Clique em "{% data variables.product.prodname_codespaces %}"](/assets/images/help/codespaces/codespaces-button.png)
-
-1. Entre opções que são exibidas na parte superior da página, selecione **Codespaces: Parar os codespaces atuais**.
-
-   ![Opção "Suspender codespace atual"](/assets/images/help/codespaces/suspend-current-codespace.png)
-
-1. Após a interrupção do codespace, clique em **Reiniciar o codespace**.
-
-   ![Clique em "Retomar"](/assets/images/help/codespaces/resume-codespace.png)

translations/pt-BR/content/codespaces/managing-your-codespaces/setting-your-default-editor-for-codespaces.md

@@ -1,21 +0,0 @@
----
-title: Definindo seu editor padrão para os codespaces
-intro: 'Você pode definir seu editor padrão para {% data variables.product.prodname_codespaces %} na sua página de configurações pessoais.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Definir o editor padrão
----
-
-Na página de configurações você pode definir sua preferência de editor para que todos os codespaces sejam abertos automaticamente em {% data variables.product.prodname_vscode %} para a web ou em {% data variables.product.prodname_vscode %} para aplicativos de desktop.
-
-Se você quiser usar {% data variables.product.prodname_vscode %} como seu editor padrão para {% data variables.product.prodname_codespaces %}, você deverá instalar {% data variables.product.prodname_vscode %} e a extensão de {% data variables.product.prodname_github_codespaces %} para {% data variables.product.prodname_vscode %}. Para obter mais informações, consulte a página de download de [para {% data variables.product.prodname_vscode %}](https://code.visualstudio.com/download/) e a extensão de [{% data variables.product.prodname_github_codespaces %} no marketplace de {% data variables.product.prodname_vscode %}](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces).
-
-## Configurando o seu editor padrão
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Em "Editor de preferência", selecione a opção que você desejar. ![Setting your editor](/assets/images/help/codespaces/select-default-editor.png) Se você escolher **{% data variables.product.prodname_vscode %}**, {% data variables.product.prodname_codespaces %} será automaticamente aberto no aplicativo da área de trabalho na próxima vez que você criar um codespace. Talvez seja necessário permitir o acesso ao seu navegador e ao {% data variables.product.prodname_vscode %} para que seja aberto com sucesso. ![Configurando seu editor](/assets/images/help/codespaces/launch-default-editor.png)

translations/pt-BR/content/codespaces/managing-your-codespaces/setting-your-default-region-for-codespaces.md

@@ -1,20 +0,0 @@
----
-title: Definindo sua região padrão para os codespaces
-intro: 'Você pode definir sua região padrão na página de configurações do perfil de {% data variables.product.prodname_github_codespaces %} para personalizar o local onde seus dados são mantidos.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Definir a região padrão
----
-
-Você pode selecionar manualmente a região em que os seus codespaces serão criados, permitindo que você atenda aos requisitos rigorosos de segurança e conformidade. Por padrão, a sua região é definida automaticamente com base na sua localização.
-
-## Definindo sua região padrão
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Em "Região", selecione a configuração desejada.
-2. Se você escolheu "Definir manualmente", selecione sua região na lista suspensa. ![Selecionando sua região](/assets/images/help/codespaces/select-default-region.png)

translations/zh-CN/content/codespaces/customizing-your-codespace/configuring-codespaces-for-your-project.md

@@ -1,166 +0,0 @@
----
-title: 为项目配置 Codespaces
-intro: '您可以使用 `devcontainer.json` 文件来定义仓库的 {% data variables.product.prodname_codespaces %} 环境。'
-permissions: People with write permissions to a repository can create or edit the codespace configuration.
-redirect_from:
-  - /github/developing-online-with-github-codespaces/configuring-github-codespaces-for-your-project
-  - /codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project
-  - /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
-versions:
-  fpt: '*'
-  ghec: '*'
-type: how_to
-topics:
-  - Codespaces
-  - Set up
-  - Fundamentals
-product: '{% data reusables.gated-features.codespaces %}'
-shortTitle: 配置您的项目
----
-
- 
-
-## 关于开发容器
-
-开发容器是 {% data variables.product.prodname_codespaces %} 用于提供项目开发所需的工具和运行时的环境。 If your project does not already have a dev container defined, {% data variables.product.prodname_codespaces %} will use the default configuration, which contains many of the common tools that your team might need for development with your project. For more information, see "[Using the default configuration](#using-the-default-configuration)."
-
-If you want all users of your project to have a consistent environment that is tailored to your project, you can add a dev container to your repository. You can use a predefined configuration to select a common configuration for various project types with the option to further customize your project or you can create your own custom configuration. For more information, see "[Using a predefined container configuration](#using-a-predefined-container-configuration)" and "[Creating a custom codespace configuration](#creating-a-custom-codespace-configuration)." 您选择的选项取决于用户在项目中取得成功可能需要使用的工具、运行时、依赖项和工作流程。
-
-{% data variables.product.prodname_codespaces %} 允许使用 `devcontainer.json` 文件针对每个项目和每个分支进行自定义。 此配置文件通过定义可包括框架、工具、扩展和端口转发的开发容器，确定任何人为仓库创建的每个新代码空间的环境。 Dockerfile 还可与 `.devcontainer` 文件夹中的 `devcontainer.json` 文件一起使用，以定义创建容器映像所需的所有要素。
-
-### devcontainer.json
-
-{% data reusables.codespaces.devcontainer-location %}
-
-您可以使用 `devcontainer.json` 为整个代码空间环境设置默认设置，包括编辑器，但您也可以在 `.vscode/set.json` 文件中设置代码空间中单个[工作空间](https://code.visualstudio.com/docs/editor/workspaces)的编辑器特定设置。
-
-有关在 `devcontainer.json` 中可以设置的设置和属性，请参阅 {% data variables.product.prodname_vscode %} 文档中的 [devcontainer.json 参考](https://aka.ms/vscode-remote/devcontainer.json)。
-
-### Dockerfile
-
-Dockerfile 也存在于 `.devcontainer` 文件夹中。
-
-您可以将 Dockerfile 添加到项目中来定义容器映像和安装软件。 在 Dockerfile 中，您可以使用 `FROM` 来指定容器映像。
-
-```Dockerfile
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14
-
-# ** [Optional] Uncomment this section to install additional packages. **
-# USER root
-#
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-#
-# USER codespace
-```
-
-您可以使用 `RUN` 指令安装任何软件并使用 `&&` 加入命令。
-
-使用 `dockerfile` 属性，在您的 `devcontainer.json` 文件中引用 Dockerfile。
-
-```json
-{
-  ...
-  "build": { "dockerfile": "Dockerfile" },
-  ...
-}
-```
-
-有关在开发容器中使用 Dockerfile 的更多信息，请参阅 {% data variables.product.prodname_vscode %} 文档中的[创建开发容器](https://code.visualstudio.com/docs/remote/create-dev-container#_dockerfile)。
-
-## 使用默认配置
-
-如果您没有在仓库中定义配置，{% data variables.product.prodname_dotcom %} 将创建一个具有基本 Linux 映像的代码空间。 基本 Linux 映像包括语言和运行时，例如 Python、Node.js、JavaScript、TypeScript、C++、Java、.NET、PHP、PowerShell、Go、Ruby 和 Rust。 它还包括其他开发工具和实用程序，例如 git、GitHub CLI、yarn、openssh 和 vim。 要查看包含的所有语言、运行时和工具，请在代码空间终端内使用 `devcontainer-info content-url` 命令，然后遵循命令输出的 url。
-
-或者，要详细了解基本 Linux 映像中包含的所有内容，请参阅 [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux) 仓库中的最新文件。
-
-如果您要处理使用 {% data variables.product.prodname_codespaces %} 提供的语言和工具的小型项目，默认配置是个不错的选择。
-
-
-## 使用预定义的容器配置
-
-预定义容器定义包括特定项目类型的共同配置，可帮助您利用现有的配置快速开始使用，配置中已经有适当的容器选项、{% data variables.product.prodname_vscode %} 设置和应该安装的 {% data variables.product.prodname_vscode %} 扩展。
-
-如果您需要一些额外的扩展性，使用预先定义的配置是一个好主意。 您也可以从预定义的配置开始，然后根据项目的设置对其进行修改。
-
-{% data reusables.codespaces.command-palette-container %}
-1. 单击要使用的定义。 ![预定义容器定义列表](/assets/images/help/codespaces/predefined-container-definitions-list.png)
-1. 按照提示自定义您的定义。 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. 单击 **OK（确定）**。 ![确定按钮](/assets/images/help/codespaces/prebuilt-container-ok-button.png)
-1. 要应用更改，请在屏幕右下角单击 **Rebuild now（立即重建）**。 有关重建容器的更多信息，请参阅“[应用对配置的更改](#applying-changes-to-your-configuration)”。 !["Codespaces: Rebuild Container" in the {% data variables.product.prodname_vscode_command_palette %}](/assets/images/help/codespaces/rebuild-prompt.png)
-
-### Adding additional features to your `devcontainer.json` file
-
-{% note %}
-
-**Note:** This feature is in beta and subject to change.
-
-{% endnote %}
-
-You can add features to your predefined container configuration to customize which tools are available and extend the functionality of your workspace without creating a custom codespace configuration. For example, you could use a predefined container configuration and add the {% data variables.product.prodname_cli %} as well. You can make these additional features available for your project by adding the features to your `devcontainer.json` file when you set up your container configuration.
-
-You can add some of the most common features by selecting them when configuring your predefined container. For more information on the available features, see the [script library](https://github.com/microsoft/vscode-dev-containers/tree/main/script-library#scripts) in the `vscode-dev-containers` repository.
-
-![The select additional features menu during container configuration.](/assets/images/help/codespaces/select-additional-features.png)
-
-You can also add or remove features outside of the **Add Development Container Configuration Files** workflow.
-1. Access the Command Palette (`Shift + Command + P` / `Ctrl + Shift + P`), then start typing "configure". Select **Codespaces: Configure Devcontainer Features**. ![The Configure Devcontainer Features command in the command palette](/assets/images/help/codespaces/codespaces-configure-features.png)
-2. Update your feature selections, then click **OK**. ![The select additional features menu during container configuration.](/assets/images/help/codespaces/select-additional-features.png)
-1. 要应用更改，请在屏幕右下角单击 **Rebuild now（立即重建）**。 有关重建容器的更多信息，请参阅“[应用对配置的更改](#applying-changes-to-your-configuration)”。 ![命令面板中的"Codespaces：重建容器"](/assets/images/help/codespaces/rebuild-prompt.png)
-
-
-## 创建自定义代码空间配置
-
-如果任何预定义的配置都不能满足您的需要，您可以通过添加 `devcontainer.json` 文件来创建自定义配置。 {% data reusables.codespaces.devcontainer-location %}
-
-在该文件中，您可以使用[支持的配置键](https://code.visualstudio.com/docs/remote/devcontainerjson-reference)来指定代码空间环境的各个方面，例如要安装哪些 {% data variables.product.prodname_vscode %} 扩展。
-
-{% data reusables.codespaces.vscode-settings-order %}
-
-您可以在两个地方定义 {% data variables.product.prodname_vscode %} 的默认编辑器设置。
-
-* `.vscode/settings.json` 中定义的编辑器设置在代码空间中用作 _Workspace_ 范围的设置。
-* `devcontainer.json` 的 `settings` 键中定义的编辑器设置在代码空间中用作 _Remote [Codespaces]_ 范围的设置。
-
-在更新 `devcontainer.json` 文件后，您可以重建代码空间的容器来应用更改。 更多信息请参阅“[应用对配置的更改](#applying-changes-to-your-configuration)”。
-
-
-<!--
-## Supported codespace configuration keys
-
-You can use configuration keys supported by {% data variables.product.prodname_codespaces %} in `devcontainer.json`.
-
-### General settings
-
-- `name`
-- `settings`
-- `extensions`
-- `forwardPorts`
-- `postCreateCommand`
-
-### Docker, Dockerfile, or image settings
-
-- `image`
-- `dockerFile`
-- `context`
-- `containerEnv`
-- `remoteEnv`
-- `containerUser`
-- `remoteUser`
-- `mounts`
-- `runArgs`
-- `overrideCommand`
-- `dockerComposeFile`
-
-For more information about the available settings for `devcontainer.json`, see [devcontainer.json reference](https://aka.ms/vscode-remote/devcontainer.json) in the {% data variables.product.prodname_vscode %} documentation.
--->
-
-## 应用对配置的更改
-
-{% data reusables.codespaces.apply-devcontainer-changes %}
-
-{% data reusables.codespaces.rebuild-command %}
-1. {% data reusables.codespaces.recovery-mode %} 修复配置中的错误。 ![有关恢复模式的错误消息](/assets/images/help/codespaces/recovery-mode-error-message.png)
-   - 要通过查看创建日志来诊断错误，请单击 **View creation log（查看创建日志）**。
-   - 要修复日志中发现的错误，请更新您的 `devcontainer.json` 文件。
-   - 要应用更改，请重建容器。 

translations/zh-CN/content/codespaces/developing-in-codespaces/changing-the-machine-type-for-your-codespace.md

@@ -1,60 +0,0 @@
----
-title: Changing the machine type for your codespace
-shortTitle: Changing the machine type
-intro: 'You can change the type of machine that''s running your codespace, so that you''re using resources appropriate for work you''re doing.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
----
-
-## About machine types
-
-{% note %}
-
-**Note:** You can only select or change the machine type if you are a member of an organization using {% data variables.product.prodname_codespaces %} and are creating a codespace on a repository owned by that organization.
-
-{% endnote %}
-
-{% data reusables.codespaces.codespaces-machine-types %}
-
-You can choose a machine type either when you create a codespace or you can change the machine type at any time after you've created a codespace.
-
-For information on choosing a machine type when you create a codespace, see "[Creating a codespace](/codespaces/developing-in-codespaces/creating-a-codespace#creating-a-codespace)." For information on changing the machine type within {% data variables.product.prodname_vscode %}, see "[Using {% data variables.product.prodname_codespaces %} in {% data variables.product.prodname_vscode %}](/codespaces/developing-in-codespaces/using-codespaces-in-visual-studio-code#changing-the-machine-type-in-visual-studio-code)."
-
-## 在 {% data variables.product.prodname_dotcom %} 中更改机器类型
-
-{% data reusables.codespaces.your-codespaces-procedure-step %}
-
-   The current machine type for each of your codespaces is displayed.
-
-   !['Your codespaces' list](/assets/images/help/codespaces/your-codespaces-list.png)
-
-1. Click the ellipsis (**...**) to the right of the codespace you want to modify.
-1. Click **Change machine type**.
-
-   !['Change machine type' menu option](/assets/images/help/codespaces/change-machine-type-menu-option.png)
-
-1. Choose the required machine type.
-
-2. Click **Update codespace**.
-
-   The change will take effect the next time your codespace restarts.
-
-## Force an immediate update of a currently running codespace
-
-If you change the machine type of a codespace you are currently using, and you want to apply the changes immediately, you can force the codespace to restart.
-
-1. At the bottom left of your codespace window, click **{% data variables.product.prodname_codespaces %}**.
-
-   ![Click '{% data variables.product.prodname_codespaces %}'](/assets/images/help/codespaces/codespaces-button.png)
-
-1. From the options that are displayed at the top of the page select **Codespaces: Stop Current Codespace**.
-
-   !['Suspend Current Codespace' option](/assets/images/help/codespaces/suspend-current-codespace.png)
-
-1. After the codespace is stopped, click **Restart codespace**.
-
-   ![Click 'Resume'](/assets/images/help/codespaces/resume-codespace.png)

translations/zh-CN/content/codespaces/managing-your-codespaces/setting-your-default-editor-for-codespaces.md

@@ -1,21 +0,0 @@
----
-title: Setting your default editor for Codespaces
-intro: 'You can set your default editor for {% data variables.product.prodname_codespaces %} in your personal settings page.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Set the default editor
----
-
-On the settings page, you can set your editor preference so that any newly created codespaces are opened automatically in either {% data variables.product.prodname_vscode %} for Web or the {% data variables.product.prodname_vscode %} desktop application.
-
-If you want to use {% data variables.product.prodname_vscode %} as your default editor for {% data variables.product.prodname_codespaces %}, you need to install {% data variables.product.prodname_vscode %} and the {% data variables.product.prodname_github_codespaces %} extension for {% data variables.product.prodname_vscode %}. For more information, see the [download page for {% data variables.product.prodname_vscode %}](https://code.visualstudio.com/download/) and the [{% data variables.product.prodname_github_codespaces %} extension on the {% data variables.product.prodname_vscode %} marketplace](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces).
-
-## Setting your default editor
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Under "Editor preference", select the option you want. ![Setting your editor](/assets/images/help/codespaces/select-default-editor.png) If you choose **{% data variables.product.prodname_vscode %}**, {% data variables.product.prodname_codespaces %} will automatically open in the desktop application when you next create a codespace. You may need to allow access to both your browser and {% data variables.product.prodname_vscode %} for it to open successfully. ![Setting your editor](/assets/images/help/codespaces/launch-default-editor.png)

translations/zh-CN/content/codespaces/managing-your-codespaces/setting-your-default-region-for-codespaces.md

@@ -1,20 +0,0 @@
----
-title: Setting your default region for Codespaces
-intro: 'You can set your default region in the {% data variables.product.prodname_github_codespaces %} profile settings page to personalize where your data is held.'
-product: '{% data reusables.gated-features.codespaces %}'
-versions:
-  fpt: '*'
-  ghec: '*'
-topics:
-  - Codespaces
-shortTitle: Set the default region
----
-
-You can manually select the region that your codespaces will be created in, allowing you to meet stringent security and compliance requirements. By default, your region is set automatically, based on your location.
-
-## Setting your default region
-
-{% data reusables.user_settings.access_settings %}
-{% data reusables.user_settings.codespaces-tab %}
-1. Under "Region", select the setting you want.
-2. If you chose "Set manually", select your region in the drop-down list. ![Selecting your region](/assets/images/help/codespaces/select-default-region.png)