在 Visual Studio Code 中使用 GitHub 代码空间将 IDE 作为代码

已发表: 2021-11-24

对于开发人员来说，最困难的事情之一就是开始一个已经在进行中的项目。

经常发生新项目的需求迫使我们修改 SDK 的版本以及我们在本地安装的工具来调试环境，这让我们失去了几天，直到一切都按预期工作。

如果我们考虑处于 beta 或预览阶段的版本，事情会变得更加复杂。 为了防止这种情况发生，我想向您介绍 GitHub Codespaces，它不仅可以让您在容器内生成您的应用程序所需的开发环境，还可以让您随时随地在任何设备上进行开发。

让我们开始！

什么是 GitHub 代码空间？

Github 代码空间是一个可以从浏览器访问的云环境，并具有开发专用代码所需的所有功能。

你可能已经看过 GitHub 公告，每次你在一个仓库中并点击句号“键”。 将打开一个带有相关存储库的 Web 编辑器。

但是，您将无法运行终端，因为它只是一个 Web 编辑器并且没有后端机器。 有时这可能绰绰有余，但想象一下，您需要运行一个环境或编译一个项目，但您手头没有满足需求的系统（iPad、Surface Go 等）。

GitHub Codespaces 通过允许您在云中运行 IDE 来解决这个问题，就像您使用本地系统一样工作，并且也使用您指定的配置。

注意：此功能仅适用于团队和企业帐户。

示例代码

在这个例子中，我将使用一个非常简单的 Node.js 应用程序：

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

上面的代码具有以下结构：

代码结构

你可以在本地启动这个项目而没有任何问题，只要你安装了 Node.js、git 和对这个语言的项目有用的 VS Code 扩展。 您可能还想使用 Nodemon 之类的工具，它会自动刷新应用程序。

当您不仅使用此配置，而且使用许多其他配置（例如使用 .NET Core、Python、Docker 或 Kubernetes 进行开发）时，问题就会出现，这会让您安装更多并不总是需要的工具和扩展，并且它们最终可能会损害开发环境的性能。

问题不仅限于您自己的表现。 如果其他人加入团队并需要使用启动应用程序所需的工具和框架来让他们的系统“准备好”，那么他们也会损失几个小时，这将损害团队的整体绩效（如果你是，情况会更糟）使用不同的操作系统工作）。

使用远程容器

Visual Studio Code 提供了一个名为Remote Containers或 Dev Containers 的扩展，它允许您在容器内生成应用程序所需的开发环境。 这样，您团队中所有从事项目的开发人员都会自动拥有相同的开发环境。

这将使启动项目的体验尽可能敏捷，而且如果您是定义环境的人，您可以在同一台机器上使用不同的配置为每个项目分离多个工作环境。 酷吧？

我该如何开始？

要使用此功能，您必须在机器上安装 Docker，因为容器将在其上运行。 还需要安装Remote Containers扩展，帮助我们搭建开发环境。

您需要做的第一件事是在根目录中创建一个名为.devcontainer的文件夹。 这是扩展将尝试识别的一个，以了解它是否具有安装包含其中指示的容器的配置。

在其中，您必须至少有一个名为devcontainer.json 的文件，该文件将具有环境配置。

对于这个例子，我使用了以下内容：

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

如您所见，它是一个具有不同部分的 JSON：

  • name ：它是开发容器的名称。 理想情况下，这应该是一个描述性名称。
  • dockerFile ：它用于指示我们将用于创建环境的 Dockerfile 的名称。 就我而言，在同一个 .devcontainer 文件夹中，我有一个如下所示：
 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

在这个例子中，我使用node: 12.16.1-alpine 图像只是为了证明我在这个开发环境中的配置与我在本地的配置不同，我使用的是 Node.js 的 14 版。 另一方面，除了我将在开发过程中使用的 Nodemon 模块之外，我还安装了一些实用程序，如 git、bash 和 cURL。

  • forwardPorts ：这些是我的应用程序使用的端口，以便我可以从本地机器访问它们，因此调试很容易。
  • 设置：对于这个例子，当你有多个环境时它非常有用，我已经修改了 Visual Studio Code 主题，所以很明显我不在 IDE 的那个实例中的本地环境中。 我通常使用深色版本，这里我设置了浅色版本。
  • containerEnv ：我还添加了一个环境变量，这在开发时通常非常有用。
  • postCreateCommand ：我添加了这个属性，所以你可以看到在开发容器的生命周期中可以执行命令或脚本。 在这种情况下，此脚本将在创建完成后启动。 本期内容为：
     #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install
  • postAttachCommand：最后，我将 nodemon server.js 命令添加到此属性，以便每次连接到容器时，默认情况下它都会提升应用程序。

在 devcontainer.json 文件中还有更多选项可以添加，这只是您可以做什么的一个很小的例子。

既然您知道此文件夹中的所有内容以及定义的配置如何工作，那么我们如何启动它？

最简单的方法是通过这里的按钮：

选择Reopen in Container选项，该过程将开始创建容器和您的自定义 IDE。 结果应如下所示：

最后，在这种情况下，结果将是一个带有 Light 主题的 Visual Studio Code 窗口，具有特定的 Node.js 版本，选择了几个扩展以更舒适地开发，并且我的应用程序已经运行并通过端口 8080 公开。

最好的部分是：此配置在项目存储库中进行了版本控制，以便任何成员都可以使用它。 简直太壮观了！

现在我们已经看到了这一切，也理解了所有的步骤，删除.devcontainer文件夹，再次选择左下角的图标，再次选择Reopen in Container ，你会看到这次它让你在几个pre - 内置配置。

你不需要从头开始你的配置，而且你已经知道你必须触摸哪里才能完成你的书呆子触摸。

返回 Github 空间

现在我们将使用我们在 Visual Studio 远程容器中使用的相同项目，但这次使用 GitHub。 在Code部分完成此操作后，您将拥有一个名为 Codespaces 的新选项：

您可以在此处选择使用此特定存储库所需的机器类型：

选择机器尺寸

选择后，创建过程将开始。 它将使用我们为远程容器创建的 .devcontainer 文件夹的配置来配置环境。

该过程完成后，您将看到 Visual Studio Code 将以 Web 格式显示并运行应用程序，就像我们在本地系统上所做的那样。

最后的话

正如你在上面的例子中看到的，使用远程容器的 Github 代码空间是我们复制配置和开发环境问题的一个很好的解决方案，它们也是提高我们团队绩效的好方法。

标签：
  • 开发运营