diff --git a/.devcontainer/README.md b/.devcontainer/README.md index 8262d411570..1c6d6ff1608 100644 --- a/.devcontainer/README.md +++ b/.devcontainer/README.md @@ -18,7 +18,7 @@ This repository includes configuration for a development container for working w > Note that the Remote - Containers extension requires the Visual Studio Code distribution of Code - OSS. See the [FAQ](https://aka.ms/vscode-remote/faq/license) for details. -4. Press Ctrl/Cmd + Shift + P and select **Remote-Containers: Clone Repository in Container Volume...**. +4. Press Ctrl/Cmd + Shift + P or F1 and select **Remote-Containers: Clone Repository in Container Volume...**. > **Tip:** While you can use your local source tree instead, operations like `yarn install` can be slow on macOS or using the Hyper-V engine on Windows. We recommend the "clone repository in container" approach instead since it uses "named volume" rather than the local filesystem. @@ -32,17 +32,15 @@ Next: **[Try it out!](#try-it)** ## Quick start - GitHub Codespaces -> **IMPORTANT:** You need to use a "Standard" sized codespace or larger (4-core, 8GB) since VS Code needs 6GB of RAM to compile. This is now the default for GitHub Codespaces, but do not downgrade to "Basic" unless you do not intend to compile. +1. From the [microsoft/vscode GitHub repository](https://github.com/microsoft/vscode), click on the **Code** dropdown, select **Open with Codespaces**, and the **New codespace** button. If prompted, select the **Standard** machine size (which is the default). -1. From the [microsoft/vscode GitHub repository](https://github.com/microsoft/vscode), click on the **Code** dropdown, select **Open with Codespaces**, and the **New codespace** + > **Note:** You will not see these options if you are not in the beta yet. - > Note that you will not see these options if you are not in the beta yet. +2. After the codespace is up and running in your browser, press Ctrl/Cmd + Shift + P or F1 and select **Ports: Focus on Ports View**. -2. After the codespace is up and running in your browser, press F1 and select **Ports: Focus on Ports View**. +3. You should see **VNC web client (6080)** under in the list of ports. Select the line and click on the globe icon to open it in a browser tab. -3. You should see port `6080` under **Forwarded Ports**. Select the line and click on the globe icon to open it in a browser tab. - - > If you do not see port `6080`, press F1, select **Forward a Port** and enter port `6080`. + > **Tip:** If you do not see the port, Ctrl/Cmd + Shift + P or F1, select **Forward a Port** and enter port `6080`. 4. In the new tab, you should see noVNC. Click **Connect** and enter `vscode` as the password. @@ -52,15 +50,20 @@ Next: **[Try it out!](#try-it)** ### Using VS Code with GitHub Codespaces -You will likely see better performance when accessing the codespace you created from VS Code since you can use a[VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/). Here's how to do it. +You will may see better VNC performance when accessing a codespace from VS Code client instead of on the web since you can use a full [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/). Here's how to do it. -1. [Create a codespace](#quick-start---github-codespaces) if you have not already. +1. Install [Visual Studio Code Stable](https://code.visualstudio.com/) or [Insiders](https://code.visualstudio.com/insiders/) and the the [GitHub Codespaces extension](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces). -2. Set up [VS Code for use with GitHub Codespaces](https://docs.github.com/github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code) + > **Note:** The GitHub Codespaces extension requires the Visual Studio Code distribution of Code - OSS. -3. After the VS Code is up and running, press F1, choose **Codespaces: Connect to Codespace**, and select the codespace you created. +2. After the VS Code is up and running, press Ctrl/Cmd + Shift + P or F1, choose **Codespaces: Create New Codespace**, and use the following settings: + - `microsoft/vscode` for the repository. + - Select any branch (e.g. **main**) - you select a different one later. + - Choose **Standard** (4-core, 8GB) as the size. -4. After you've connected to the codespace, use a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) to connect to `localhost:5901` and enter `vscode` as the password. +4. After you've connected to the codespace, you can use a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) to connect to `localhost:5901` and enter `vscode` as the password. + + > **Tip:** You may also need change your VNC client's **Picture Quaility** setting to **High** to get a full color desktop. 5. Anything you start in VS Code or the integrated terminal will appear here. diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 3b82cd9028d..d66344eccf6 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -3,20 +3,26 @@ // Image contents: https://github.com/microsoft/vscode-dev-containers/blob/master/repository-containers/images/github.com/microsoft/vscode/.devcontainer/base.Dockerfile "image": "mcr.microsoft.com/vscode/devcontainers/repos/microsoft/vscode:branch-main", - - "workspaceMount": "source=${localWorkspaceFolder},target=/home/node/workspace/vscode,type=bind,consistency=cached", - "workspaceFolder": "/home/node/workspace/vscode", "overrideCommand": false, "runArgs": [ "--init", "--security-opt", "seccomp=unconfined"], "settings": { - "terminal.integrated.shell.linux": "/bin/bash", "resmon.show.battery": false, "resmon.show.cpufreq": false }, - // noVNC, VNC, debug ports - "forwardPorts": [6080, 5901, 9222], + // noVNC, VNC + "forwardPorts": [6080, 5901], + "portsAttributes": { + "6080": { + "label": "VNC web client (noVNC)", + "onAutoForward": "silent" + }, + "5901": { + "label": "VNC TCP port", + "onAutoForward": "silent" + } + }, "extensions": [ "dbaeumer.vscode-eslint",