为代码空间设置 Node.js 项目

简介

本指南介绍如何在 Codespaces 中设置 JavaScript、Node.js 或 TypeScript 项目。它将演示在代码空间中打开项目以及从模板添加和修改开发容器配置的示例。

基本要求

您应该在 GitHub.com 的仓库中有现有的 JavaScript、Node.js 或 TypeScript 项目。如果您没有项目，可以使用以下示例尝试本教程：https://github.com/microsoft/vscode-remote-try-node
您必须为组织启用 Codespaces 。

步骤 1：在代码空间中打开项目

在存储库名称下，使用代码下拉菜单，然后在Codespaces（代码空间）选项卡中，单击 Create codespace on main（在主分支上创建代码空间）。

如果您看不到此选项，则表示 Codespaces 不适用于您的项目。有关详细信息，请参阅访问 Codespaces。

创建代码空间时，您的项目是在专用于您的远程 VM 上创建的。默认情况下，代码空间的容器有许多语言和运行时，包括 Node.js、JavaScript、Typescript、nvm、npm 和 yarn。它还包括一套常见的工具，例如 git、wget、rsync、openssh 和 nano。

您可以通过调整 vCPU 和 RAM 的数量、添加 dotfiles 以个性化环境或者修改安装的工具和脚本来自定义代码空间。

Codespaces uses a file called devcontainer.json to configure the development container that you use when you work in a codespace. Each repository can contain one or more devcontainer.json files, to give you exactly the development environment you need to work on your code in a codespace.

On launch, Codespaces uses a devcontainer.json file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. 更多信息请参阅“开发容器简介”。

第 2 步：将开发容器配置从模板添加到存储库

GitHub Codespaces 的默认开发容器将支持运行开箱即用的 Node.js 项目，如 vscode-remote-try-node。但是，我们建议你配置自己的开发容器，因为这样可以定义项目所需的任何特定工具和脚本。这将确保存储库中的所有 GitHub Codespaces 用户都有一个完全可重现的环境。

To set up your repository to use a custom dev container, you will need to create one or more devcontainer.json files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "Introduction to dev containers".

访问 Visual Studio 代码命令面板 (Shift + Command + P/ Ctrl + Shift + P)，然后开始键入“dev container”。选择 Codespaces: Add Development Container Configuration Files...（Codespaces：添加开发容器配置文件...）.
对于此示例，单击 Node.js。如果需要其他功能，您可以选择任何特定于节点或工具（如节点和 MongoDB）组合的容器。
单击推荐版本的 Node.js。
访问 Visual Studio 代码命令面板 (Shift + Command + P/ Ctrl + Shift + P)，然后开始键入“rebuild”。选择 Codespaces: Rebuild Container（代码空间：重建容器）。

开发容器的剖析

添加 Node.js 开发容器模板会将 .devcontainer 目录添加到项目仓库的根目录中，其中包含以下文件：

devcontainer.json
Dockerfile

新添加的 devcontainer.json 文件定义了几个在样本之后描述的属性。

devcontainer.json

// 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"
}

name - 您可以将开发容器命名为任何名称，这只是默认名称。
build - 构建属性。
- dockerfile - 在 build 对象中，dockerfile 包含也从模板添加的 Dockerfile 的路径。
- args
  - Variant：此文件仅包含一个构建参数，即我们要用于传递到 Dockerfile 的节点变量。
settings - 它们是您可以设置的 Visual Studio Code 设置。
- terminal.integrated.shell.linux - 虽然 bash 是这里的默认设置，但您可以通过修改它来使用其他终端 shell。
extensions - 它们是默认包含的扩展名。
- dbaeumer.vscode-eslint - ES lint 是 linting 的良好扩展，但是对于 JavaScript，您还可以包括许多出色的 Marketplace 扩展。
forwardPorts - 此处列出的任何端口都将自动转发。更多信息请参阅“在代码空间中转发端口”。
postCreateCommand - 在创建代码空间后，使用此选项可运行 Docker 文件中未定义的命令。
remoteUser - 默认情况下，您以 vscode 用户身份运行，但您可以选择将其设置为 root。

Dockerfile

# [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>"

您可以使用 Dockerfile 添加其他容器层，以指定要包含在容器中的操作系统包、节点版本或全局包。

步骤 3：修改 devcontainer.json 文件

添加开发容器配置并基本了解所有内容的功能后，现在可以进行更改以进一步自定义环境。在此示例中，您将添加属性以在代码空间启动时安装 npm，并使容器内的端口列表在本地可用。

在 Explorer 中，从树中选择 devcontainer.json 文件来打开它。您可能需要展开 .devcontainer 文件夹才能看到它。
在 devcontainer.json 文件中的 extensions 后面添加以下行：
JSON
```
"postCreateCommand": "npm install",
"forwardPorts": [4000],
```
For information about the settings and properties that you can set in a devcontainer.json file, see "devcontainer.json reference" in the VS 代码 documentation.
访问 Visual Studio 代码命令面板 (Shift + Command + P/ Ctrl + Shift + P)，然后开始键入“rebuild”。选择 Codespaces: Rebuild Container（代码空间：重建容器）。

在代码空间内进行重建可确保在将更改提交到仓库之前，更改能够按预期工作。如果某些问题导致了故障，您将进入带有恢复容器的代码空间中，您可以从该容器进行重建以继续调整容器。