如何创建自定义 GitHub Codespaces 模板

GitHubCodespaces它是一个基于云的开发环境，允许开发人员直接在其中Web编写浏览器，操作和调试代码。GitHubCodespaces，在机器上设置本地开发环境，开发人员可以在云中快速启动开发环境并开始编码。
 

为什么您可能想要创建自定义模板

以下是您可能想要为 GitHub Codespaces 创建自定义模板的几个原因：

1. 自定义：GitHub 提供的默认模板可能不包括您特定项目所需的所有工具和依赖项。通过创建自定义模板，您可以确保您的开发环境包含立即开始所需的一切。

2. 效率：设置开发环境可能很耗时，尤其是当您需要安装多个工具和依赖项时。通过创建自定义模板，您可以通过在一个易于使用的模板中预配置所需的工具和依赖项来节省时间。

3. 协作：如果您在团队中工作，自定义模板可能是确保所有团队成员都使用相同开发环境的有用方法，这可以使协作和解决问题变得更加容易。

4. 可重现性：如果您正在处理需要轻松重现的项目，自定义模板可能是一种有用的方法，可确保开发环境在不同机器和位置之间保持一致。

总之，为 GitHub Codespaces 创建自定义模板可以帮助您自定义开发环境、节省时间、与他人协作并确保可重复性。

为ReactJs + Chakra UI + TypeScript 创建自定义模板

创建项目目录codespaces-react-chakra-ui。

mkdir codespaces-react-chakra-ui

在 VsCode 中打开项目目录。

code codespaces-react-chakra-ui

现在，通过运行以下命令，使用 Chakra UI 和 TypeScript 创建 React 应用程序。

# TypeScript using npm
npx create-react-app . --template @chakra-ui/typescript
# TypeScript using yarn
yarn create react-app . --template @chakra-ui/typescript

这.告诉create react app在当前目录中创建应用程序文件。

好了，您已经准备好基本设置，现在您必须创建配置文件夹和文件，使该codespaces-react-chakra-ui目录成为 GitHub Codespaces 模板。

.devcontainer在您的项目目录中创建一个名为的配置文件devcontainer.json

# Create the .devcontainer directory
mkdir .devcontainer && cd .devcontainer
touch devcontainer.json

现在将以下内容添加到devcontainer.json文件中。

{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "hostRequirements": {
    "cpus": 4
  },
  "waitFor": "onCreateCommand",
  "updateContentCommand": "yarn install",
  "postCreateCommand": "",
  "postAttachCommand": {
    "server": "yarn start"
  },
  "customizations": {
    "codespaces": {
      "openFiles": ["src/App.tsx"]
    }
  },
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "forwardPorts": [3000]
}

“ image”字段指定用于开发环境的 Docker 映像，在本例中为“ mcr.microsoft.com/devcontainers/universal:2 ”。

“ hostRequirements”字段指定运行开发环境的主机的硬件要求。在这种情况下，它指定主机至少应具有4 个 CPU 内核。

“ waitFor”字段指定在执行下一个命令之前要等待的命令。在这种情况下，它指定“onCreateCommand”，这意味着在执行下一个命令之前等待容器创建。

“ updateContentCommand”字段指定要在容器中运行以更新其内容的命令。在本例中，它指定了“yarn install”，这意味着使用 yarn 包管理器安装依赖项。

“ postCreateCommand”字段指定创建容器后要在容器中运行的命令。在本例中，它是一个空字符串，这意味着不会运行任何命令。

“ postAttachCommand”字段指定在容器连接到主机后要在容器中运行的命令。在本例中，它指定了“yarn start”，这意味着使用 yarn 包管理器启动开发服务器。

“ customizations”字段指定开发环境的定制。在这种情况下，它指定“codespaces”定制应在打开开发环境时打开“src/App.tsx”文件。

“ portsAttributes”字段指定容器公开的端口的属性。在这种情况下，它指定端口 3000 应具有标签“应用程序” ，并且在自动转发到主机时应触发“openPreview”命令。

“ forwardPorts”字段指定要从容器自动转发到主机的端口数组。在这种情况下，它指定应自动转发端口3000 。

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。