如何创建自定义 GitHub Codespaces 模板
作者：互联网
为什么您可能想要创建自定义模板
以下是您可能想要为 GitHub Codespaces 创建自定义模板的几个原因：
-
自定义：GitHub 提供的默认模板可能不包括您特定项目所需的所有工具和依赖项。通过创建自定义模板，您可以确保您的开发环境包含立即开始所需的一切。
-
效率：设置开发环境可能很耗时，尤其是当您需要安装多个工具和依赖项时。通过创建自定义模板，您可以通过在一个易于使用的模板中预配置所需的工具和依赖项来节省时间。
-
协作：如果您在团队中工作，自定义模板可能是确保所有团队成员都使用相同开发环境的有用方法，这可以使协作和解决问题变得更加容易。
-
可重现性：如果您正在处理需要轻松重现的项目，自定义模板可能是一种有用的方法，可确保开发环境在不同机器和位置之间保持一致。
总之，为 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 。