使用容器和 VS Code 立即设置新的开发环境

2025-05-25

使用容器和 VS Code 立即设置新的开发环境

作为一名开发人员,有三件事让我浪费了大量的时间,并且可能成为我最大的挫败感来源:

  • 设置新的开发机器
  • 管理和更新我的开发环境以开展项目
  • 重新安装所有内容,因为在多次安装和更新我的开发工具后,一切都崩溃了:(

如果我告诉你,我们可以避免这些问题,并且可以完美地隔离每个项目的环境,并且能够轻松地共享和更新,当新人加入你的项目时,你无需做任何事,你会怎么想?

现在,得益于VS Code 和容器的远程开发扩展,这一切已成为可能。在本文中,我将向您展示如何在容器内设置完整的开发环境并将其用于您的项目。

TL;DR 关键要点

  • 您可以使用开发容器快速将新开发人员纳入项目,与您的队友共享,并轻松更新。
  • 虽然没有什么可以阻止您使用 Docker 和任何 IDE 来做同样的事情,但远程开发扩展提供了与 VS Code 的无缝集成,以引导和使用开发容器。
  • 开发容器还允许您使用GitHub Codespaces等在线开发工具将您的开发环境带到任何地方。

为什么要在容器进行开发

在每个软件项目中,开发人员的故事(几乎)总是相同的:

  • “嘿,欢迎加入团队!我们都很期待你的加入!”🎉
  • 这是为项目设置环境的文档。准备好后告诉我!(剧透:有时根本没有文档,你得问问你的队友才能知道要安装什么)

最有可能的是,几个小时/几天后,结果是:

  • “请帮帮我,我不明白为什么它仍然无法正常构建/运行”😞

动画显示开发人员说

我曾经也担任过这样的开发人员,已经好几次了。

经过一段时间的时间检查您安装的所有内容后,您最终会发现常见问题通常是:

  • 环境设置文档已过时(我敢打赌你没想到这一点,对吧?更新它不是新人的工作吗?)。
  • 您安装了正确的工具,但不是正确的版本(“抱歉,我们忘了告诉您必须使用这个特定的版本,因为我们的代码库中存在一些问题”)。
  • 与其他项目的环境设置存在一些冲突。

问题是,我们已经知道如何解决这些问题,因为这些问题与我们在发布应用程序时在生产环境中遇到的问题完全相同。

我们通过将应用程序的运行环境打包到容器中解决了所有这些问题。那么,为什么不也使用容器来构建我们的开发环境呢?

要求

您需要在机器上安装以下工具才能开始使用:

入门

在新项目或现有项目上打开 VS Code,然后单击
状态栏左下方的“对立的 V 形”图标(如果您有更好的名称,请告诉我):

屏幕截图显示了 VS Code 状态栏中的远程扩展按钮

完成后,选择添加开发容器配置文件...,它将打开一个巨大的环境启动器列表。

显示远程扩展的屏幕截图

您将找到 Node.js、Java、.Net、Go、Python 等语言的预制配置,很可能有一个可以作为您的起点。完成选择后,您会注意到.devcontainer创建了一个新文件夹,其中包含两个文件:

VS Code 中新文件夹的屏幕截图

我们将深入研究这些文件,现在,让我们重新加载项目以在容器内工作。

再次单击状态栏中的“对立箭头”图标,然后选择“在容器中重新打开”

VS Code 将重新加载项目窗口并开始构建容器。根据您的网速,这可能需要一段时间,但不用担心,只需在第一次运行。

完成后,您将在状态栏中看到 VS Code 已连接到您的开发容器。您还可以打开终端并使用新的开发环境(就我而言,我设置了一个新的 Node.js v14 环境)。

VS Code 连接到开发容器并打开终端的屏幕截图

自定义开发设置

现在您已经有了一个工作环境,您可能需要根据项目需求对其进行自定义。如果您.devcontainer在资源管理器中展开文件夹,您将看到以下两个文件,它们可以用于自定义:

  • Dockerfile:此文件定义了您的容器配置,并用于构建将用于您的环境的容器镜像。如果您需要安装其他工具或为开发环境配置脚本和环境变量,则应该查看此处。

  • devcontainer.json:此文件允许在项目连接到开发容器时自定义 VS Code。具体来说,您可以指定仅在该项目开发容器中启用的 VS Code 设置、扩展和端口转发。

让我们深入了解如何通过编辑文件来微调 VS Code 开发环境devcontainer.json

VS Code 设置和覆盖

您将在键下看到类似这样的内容settings

// Set *default* container specific settings.json values
// on container create.
"settings": { 
  "terminal.integrated.shell.linux": "/bin/bash"
},
Enter fullscreen mode Exit fullscreen mode

此键允许您在连接到此容器环境时覆盖任何 VS Code 设置。例如,如果您在 Windows 上工作,并且默认终端是 PowerShell,则通过连接到开发容器,上述设置会将您的默认终端切换为 Bash,Bash 将在开发容器的 Linux 系统内运行。使用这些设置,您可以为您的团队设置通用的代码格式化程序,或者强制对您的提交进行 GPG 签名。

另一个有用的选项位于以下extensions键下:

// Add the IDs of the extension you want installed when
// the container is created.
"extensions": [
  "dbaeumeur.vscode-eslint"
],
Enter fullscreen mode Exit fullscreen mode

这个插件允许指定在开发容器首次运行时自动安装的扩展。是的,你没看错:这些扩展不会污染你的全局 VS Code 配置,因为它们仅在你的开发容器启动并连接到项目时才可用。你无需再根据活动项目切换扩展,也无需再在 Java 项目中启用无用的 C# 扩展!

最后一个重要选项,forwardPorts允许您公开开发容器内可用的端口,并使它们默认可从本地机器访问。

// Use 'forwardPorts' to make a list of ports inside the
// container available locally
"forwardPorts": [3000, 4200],
Enter fullscreen mode Exit fullscreen mode

例如,如果您在开发容器中运行 Web 服务器,如果没有端口转发,您将无法在浏览器中访问它。请注意,您也可以动态添加要转发的端口,方法是点击状态栏中的天线图标,然后选择Add Port

VS Code 中端口转发面板的屏幕截图

共享和更新环境

容器和 VS Code 配置完成后,只需将这两个文件推送到代码库,即可供团队使用。这正是这种方法的一大优势!要欢迎新开发人员加入项目,现在只需克隆项目,重新加载 VS Code 即可使用容器配置,仅此而已。在容器首次运行下载和安装工具时,您可以喝杯咖啡(或多杯咖啡),这样您的新开发人员就可以轻松拥有一个随时可用的开发环境。

更好的是,如果有人更新环境配置,例如通过升级工具的版本,团队中的每个人都会在提取更改时看到此通知:

VS Code 中显示配置更改对话框的屏幕

然后,您只需选择Rebuild将环境更新到最新版本即可。休假回来后,再也不用为构建项目而烦恼了!

问题出在哪里?

这似乎好得令人难以置信,那么问题出在哪里呢?

自从第一个测试版开始使用 Docker 以来,我一直在问自己这个问题,到目前为止,一切进展顺利。如果您担心性能问题,那么在容器内执行所有操作确实比在主机上执行要慢一些,但无需担心。在某些情况下,您可能会遇到磁盘性能问题,尤其是在处理大量小文件时(说的就是您npm install),但有一些技巧可以帮助您提升 Docker 文件系统的性能

我一开始遇到的唯一问题是我的 git 凭据,因为我使用的是 SSH 密钥,但是一旦我按照指南设置了 SSH 代理,一切都会顺利进行。

您可以查看已知的限制,但到目前为止我还没有遇到任何问题。

下一步

本文仅简要概述了这些工具的功能,当然,您可以根据需要进一步扩展,例如使用多个容器创建开发环境。您可以查看文档以了解更多高级场景

更进一步说,你仍然可以争辩说,你必须安装带有远程扩展和 Docker 兼容运行时的 VS Code 才能使其工作。也可以摆脱这个问题,例如使用GitHub Codespace,它使用完全相同的工具和配置来提供基​​于云的开发环境,可以从任何浏览器访问,而无需在你的机器上安装任何东西(除了浏览器)。


在Twitter上关注我,我很乐意讨论并接受您的建议!

文章来源:https://dev.to/itnext/instantly-set-up-a-new-dev-environment-using-containers-and-vs-code-51g8
PREV
Joi JS Joi — awesome code validation for Node.js and Express
NEXT
如何为 Node.js 构建自己的 Web 框架