|
1 | 1 | # Code - OSS Development Container
|
2 | 2 |
|
3 |
| -This repository includes configuration for a development container for working with Code - OSS in an isolated local container or using [GitHub Codespaces](https://github.com/features/codespaces). |
| 3 | +This repository includes configuration for a development container for working with Code - OSS in a local container or using [GitHub Codespaces](https://github.com/features/codespaces). |
4 | 4 |
|
5 |
| -> **Tip:** The default VNC password is `vscode`. The VNC server runs on port `5901` with a web client at `6080`. For better performance, we recommend using a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/). Applications like the macOS Screen Sharing app will not perform as well. |
| 5 | +> **Tip:** The default VNC password is `vscode`. The VNC server runs on port `5901` and a web client is available on port `6080`. |
6 | 6 |
|
7 | 7 | ## Quick start - local
|
8 | 8 |
|
9 | 9 | 1. Install Docker Desktop or Docker for Linux on your local machine. (See [docs](https://aka.ms/vscode-remote/containers/getting-started) for additional details.)
|
10 | 10 |
|
11 |
| -2. **Important**: Docker needs at least **4 Cores and 6 GB of RAM (8 GB recommended)** to run full build. If you on macOS, or using the old Hyper-V engine for Windows, update these values for Docker Desktop by right-clicking on the Docker status bar item, going to **Preferences/Settings > Resources > Advanced**. |
| 11 | +2. **Important**: Docker needs at least **4 Cores and 6 GB of RAM (8 GB recommended)** to run a full build. If you are on macOS, or are using the old Hyper-V engine for Windows, update these values for Docker Desktop by right-clicking on the Docker status bar item and going to **Preferences/Settings > Resources > Advanced**. |
12 | 12 |
|
13 | 13 | > **Note:** The [Resource Monitor](https://marketplace.visualstudio.com/items?itemName=mutantdino.resourcemonitor) extension is included in the container so you can keep an eye on CPU/Memory in the status bar.
|
14 | 14 |
|
15 | 15 | 3. Install [Visual Studio Code Stable](https://code.visualstudio.com/) or [Insiders](https://code.visualstudio.com/insiders/) and the [Remote - Containers](https://aka.ms/vscode-remote/download/containers) extension.
|
16 | 16 |
|
17 | 17 | 
|
18 | 18 |
|
19 |
| - > 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. |
| 19 | + > **Note:** 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. |
20 | 20 |
|
21 |
| -4. Press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> and select **Remote-Containers: Clone Repository in Container Volume...**. |
| 21 | +4. Press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd> and select **Remote-Containers: Clone Repository in Container Volume...**. |
22 | 22 |
|
23 |
| - > **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. |
| 23 | + > **Tip:** While you can use your local source tree instead, operations like `yarn install` can be slow on macOS or when 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. |
24 | 24 |
|
25 | 25 | 5. Type `https://github.com/microsoft/vscode` (or a branch or PR URL) in the input box and press <kbd>Enter</kbd>.
|
26 | 26 |
|
27 |
| -6. After the container is running, open a web browser and go to [http://localhost:6080](http://localhost:6080) or use a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) to connect to `localhost:5901` and enter `vscode` as the password. |
| 27 | +6. After the container is running, open a web browser and go to [http://localhost:6080](http://localhost:6080), or use a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) to connect to `localhost:5901` and enter `vscode` as the password. |
28 | 28 |
|
29 |
| -Anything you start in VS Code or the integrated terminal will appear here. |
| 29 | +Anything you start in VS Code, or the integrated terminal, will appear here. |
30 | 30 |
|
31 | 31 | Next: **[Try it out!](#try-it)**
|
32 | 32 |
|
33 | 33 | ## Quick start - GitHub Codespaces
|
34 | 34 |
|
35 |
| -> **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. |
| 35 | +1. From the [microsoft/vscode GitHub repository](https://github.com/microsoft/vscode), click on the **Code** dropdown, select **Open with Codespaces**, and then click on **New codespace**. If prompted, select the **Standard** machine size (which is also the default). |
36 | 36 |
|
37 |
| -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** |
| 37 | + > **Note:** You will not see these options within GitHub if you are not in the Codespaces beta. |
38 | 38 |
|
39 |
| - > Note that you will not see these options if you are not in the beta yet. |
| 39 | +2. After the codespace is up and running in your browser, press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd> and select **Ports: Focus on Ports View**. |
40 | 40 |
|
41 |
| -2. After the codespace is up and running in your browser, press <kbd>F1</kbd> and select **Ports: Focus on Ports View**. |
| 41 | +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. |
42 | 42 |
|
43 |
| -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. |
44 |
| - |
45 |
| - > If you do not see port `6080`, press <kbd>F1</kbd>, select **Forward a Port** and enter port `6080`. |
| 43 | + > **Tip:** If you do not see the port, <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd>, select **Forward a Port** and enter port `6080`. |
46 | 44 |
|
47 | 45 | 4. In the new tab, you should see noVNC. Click **Connect** and enter `vscode` as the password.
|
48 | 46 |
|
49 |
| -Anything you start in VS Code or the integrated terminal will appear here. |
| 47 | +Anything you start in VS Code, or the integrated terminal, will appear here. |
50 | 48 |
|
51 | 49 | Next: **[Try it out!](#try-it)**
|
52 | 50 |
|
53 | 51 | ### Using VS Code with GitHub Codespaces
|
54 | 52 |
|
55 |
| -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. |
| 53 | +You may see improved VNC responsiveness when accessing a codespace from VS Code client since you can use a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/). Here's how to do it. |
| 54 | + |
| 55 | +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). |
56 | 56 |
|
57 |
| -1. [Create a codespace](#quick-start---github-codespaces) if you have not already. |
| 57 | + > **Note:** The GitHub Codespaces extension requires the Visual Studio Code distribution of Code - OSS. |
58 | 58 |
|
59 |
| -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) |
| 59 | +2. After the VS Code is up and running, press <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> or <kbd>F1</kbd>, choose **Codespaces: Create New Codespace**, and use the following settings: |
| 60 | + - `microsoft/vscode` for the repository. |
| 61 | + - Select any branch (e.g. **main**) - you select a different one later. |
| 62 | + - Choose **Standard** (4-core, 8GB) as the size. |
60 | 63 |
|
61 |
| -3. After the VS Code is up and running, press <kbd>F1</kbd>, choose **Codespaces: Connect to Codespace**, and select the codespace you created. |
| 64 | +4. After you have 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. |
62 | 65 |
|
63 |
| -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. |
| 66 | + > **Tip:** You may also need change your VNC client's **Picture Quaility** setting to **High** to get a full color desktop. |
64 | 67 |
|
65 |
| -5. Anything you start in VS Code or the integrated terminal will appear here. |
| 68 | +5. Anything you start in VS Code, or the integrated terminal, will appear here. |
66 | 69 |
|
67 | 70 | Next: **[Try it out!](#try-it)**
|
68 | 71 |
|
69 | 72 | ## Try it!
|
70 | 73 |
|
71 | 74 | This container uses the [Fluxbox](http://fluxbox.org/) window manager to keep things lean. **Right-click on the desktop** to see menu options. It works with GNOME and GTK applications, so other tools can be installed if needed.
|
72 | 75 |
|
73 |
| -Note you can also set the resolution from the command line by typing `set-resolution`. |
| 76 | +> **Note:** You can also set the resolution from the command line by typing `set-resolution`. |
74 | 77 |
|
75 | 78 | To start working with Code - OSS, follow these steps:
|
76 | 79 |
|
77 |
| -1. In your local VS Code, open a terminal (<kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>\`</kbd>) and type the following commands: |
| 80 | +1. In your local VS Code client, open a terminal (<kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>\`</kbd>) and type the following commands: |
78 | 81 |
|
79 | 82 | ```bash
|
80 | 83 | yarn install
|
81 | 84 | bash scripts/code.sh
|
82 | 85 | ```
|
83 | 86 |
|
84 |
| - Note that a previous run of `yarn install` will already be cached, so this step should simply pick up any recent differences. |
85 |
| - |
86 |
| -2. After the build is complete, open a web browser or a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) to the desktop environnement as described in the quick start and enter `vscode` as the password. |
| 87 | +2. After the build is complete, open a web browser or a [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) to connect to the desktop environment as described in the quick start and enter `vscode` as the password. |
87 | 88 |
|
88 | 89 | 3. You should now see Code - OSS!
|
89 | 90 |
|
90 | 91 | Next, let's try debugging.
|
91 | 92 |
|
92 | 93 | 1. Shut down Code - OSS by clicking the box in the upper right corner of the Code - OSS window through your browser or VNC viewer.
|
93 | 94 |
|
94 |
| -2. Go to your local VS Code client, and use Run / Debug view to launch the **VS Code** configuration. (Typically the default, so you can likely just press <kbd>F5</kbd>). |
| 95 | +2. Go to your local VS Code client, and use the **Run / Debug** view to launch the **VS Code** configuration. (Typically the default, so you can likely just press <kbd>F5</kbd>). |
95 | 96 |
|
96 | 97 | > **Note:** If launching times out, you can increase the value of `timeout` in the "VS Code", "Attach Main Process", "Attach Extension Host", and "Attach to Shared Process" configurations in [launch.json](../.vscode/launch.json). However, running `scripts/code.sh` first will set up Electron which will usually solve timeout issues.
|
97 | 98 |
|
|
0 commit comments