326725d4cf
* update with steps * one more update * Update content/github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code.md Co-authored-by: Allison Weins <3174849+2percentsilk@users.noreply.github.com> * Update content/github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code.md Co-authored-by: Allison Weins <3174849+2percentsilk@users.noreply.github.com> * make a few more changes * update with images * typo * Update content/github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code.md Co-authored-by: Matt Pollard <mattpollard@users.noreply.github.com> * Update data/reusables/codespaces/use-visual-studio-features.md Co-authored-by: Matt Pollard <mattpollard@users.noreply.github.com> * Update content/github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code.md Co-authored-by: Matt Pollard <mattpollard@users.noreply.github.com> * update with new section title * fix test Co-authored-by: Allison Weins <3174849+2percentsilk@users.noreply.github.com> Co-authored-by: Matt Pollard <mattpollard@users.noreply.github.com>
56 lines
4.4 KiB
Markdown
56 lines
4.4 KiB
Markdown
---
|
|
title: Using Codespaces in Visual Studio Code
|
|
intro: 'You can develop in your codespace directly in {% data variables.product.prodname_vscode %} by connecting the {% data variables.product.prodname_vs_codespaces %} extension with your account on {% data variables.product.product_name %}.'
|
|
product: '{% data reusables.gated-features.codespaces %}'
|
|
redirect_from:
|
|
- /github/developing-online-with-codespaces/connecting-to-your-codespace-from-visual-studio-code
|
|
versions:
|
|
free-pro-team: '*'
|
|
---
|
|
|
|
{% data reusables.codespaces.release-stage %}
|
|
|
|
### Prerequisites
|
|
|
|
Before you can develop in a codespace directly in {% data variables.product.prodname_vscode %}, you must configure the {% data variables.product.prodname_vs_codespaces %} extension to connect to your {% data variables.product.product_name %} account.
|
|
|
|
1. Use the {% data variables.product.prodname_vs %} Marketplace to install the [{% data variables.product.prodname_vs_codespaces %}](https://marketplace.visualstudio.com/items?itemName=ms-vsonline.vsonline) extension. For more information, see [Extension Marketplace](https://code.visualstudio.com/docs/editor/extension-gallery) in the {% data variables.product.prodname_vscode %} documentation.
|
|
2. In {% data variables.product.prodname_vscode %}, in the left sidebar, click the Extensions icon.
|
|
|
|
3. Below {% data variables.product.prodname_vs_codespaces %}, click the Manage icon, then click **Extension Settings**.
|
|
|
|
4. Use the Codespaces: Account Provider drop-down menu, and click **{% data variables.product.prodname_dotcom %}**.
|
|
|
|
{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
|
|
6. If {% data variables.product.prodname_codespaces %} is not already selected in the header, click **{% data variables.product.prodname_codespaces %}**.
|
|
|
|
7. Click **Sign in to view {% data variables.product.prodname_codespaces %}...**.
|
|
|
|
8. To authorize {% data variables.product.prodname_vscode %} to access your account on {% data variables.product.product_name %}, click **Allow**.
|
|
9. Sign in to {% data variables.product.product_name %} to approve the extension.
|
|
|
|
### Creating a codespace in {% data variables.product.prodname_vscode %}
|
|
|
|
After you connect your {% data variables.product.product_name %} account to the {% data variables.product.prodname_vs_codespaces %} extension, you can develop in a codespace that you created on {% data variables.product.product_name %} or in {% data variables.product.prodname_vscode %}.
|
|
|
|
{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
|
|
2. Click the Add icon, then click **Create New Codespace**.
|
|
|
|
3. Type, then click the repository's name you want to develop in.
|
|
|
|
4. Click the branch you want to develop in.
|
|
|
|
|
|
### Opening a codespace in {% data variables.product.prodname_vscode %}
|
|
|
|
{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
|
|
2. Under Codespaces, click the codespace you want to develop in.
|
|
3. Click the Connect to Codespace icon.
|
|
|
|
|
|
### Deleting a codespace in {% data variables.product.prodname_vscode %}
|
|
|
|
1. Under Codespaces, right-click the codespace you want to delete.
|
|
2. In the drop-down menu, click **Delete Codespace**.
|
|
|