19 - Remote - Containers - 在容器中开发

在正式开发前，开发者都需要安装许多软件，来建立开发的环境。但是安装的方式会因开发所在的机器环境而有所不同，因此每次的配置都是一个麻烦，并且在配置时是不会有产出的。

而依照开发对象的不同，所要安装的工具也会有所差异，这会导致开发者需要在电脑中安装各式各样的软件，就算只是想要修改一个小部分也是一样，十分的麻烦。

随着容器化技术的进步，我们现在已经可以把编译与执行的工作交给容器了，而开发的环境（例如：编译器的支援、开发工具等）是否也可以容器化呢？

给你的开发一对翅膀 - Remote - Containers

Remote - Containers 是个 Visual Studio Code 插件，藉由 Docker 的帮助，这个插件可以让整个在 VS Code 内的开发环境都执行在容器中，包括 VS Code 内的编辑、终端、除错与执行等。

只要使用了 Remote - Containers ，我们就可以在一个只安装 Docker 与 VS Code 的环境下，使用最舒适的方式进行各种开发作业，像是 Node.js 、 Python 、 Java 等，而不需要再去安装对应的执行、编译软件。

安装 Remote - Containers

由於 Remote - Containers 内部使用 Docker 进行容器化的相关程序，因此需要先安装 Docker Desktop 。

在安装完 Docker 後，使用 code 指令安装 Remote - Container ：

code --install-extension ms-vscode-remote.remote-containers

这样就可以开始使用 Remote - Containers 开发了。

使用 Remote - Containers

安装完成後，可以看到 VS Code 的左下角多了一个按钮。

按下去後会开启一个指令列，按下 Add Development Container Configuration Files... 。

进去後它会列出不同环境的预配置，选择你开发所需的环境（如果没有找到可以选择 Show All Definitions ，它会提供更多的选择），按下去後依照程序做相关的设定，结束後会建立一个 .devcontainer 的目录。

root /
|- .devcontainer /
  |- devcontainer.json
  |- Dockerfile

这个目录会有两个档案 devcontainer.json 与 Dockerfile 。

• devcontainer.json ： Remote - Container 的配置档。
• Dockerfile ：依据所选环境产生的 Docker Image 设定。

这样我们的配置就完成了。

接着再按一次左下角的 Remote - Container 图示，并且执行 Reopen in Container 。

它会将整个 Visual Studio Code 重启，并执行在容器中，当开启完成後，在左下角可以看到所开启的容器名称。

如此一来，我们就可以使用容器做开发了。

在容器中预设插件

Remote - Container 预设容器内要安装的插件，可以在 devcontainer.json 中的 extensions 属性中加入想要预设的插件。

{
  // ...
  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "yzhang.markdown-all-in-one",
    "davidanson.vscode-markdownlint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker",
    "editorconfig.editorconfig",
    "bierner.markdown-preview-github-styles"
  ]
}

也可以在插件页中按下齿轮选择 Add to devcontainer.json 。

按下按钮後， VS Code 会帮你将此插件的 ID 加入 devcontainer.json 中。

容器中的预设配置

在 devcontainer.json 中设定 settings 属性可以配置 VS Code 的预设值。

{
  // ...
  // Set *default* container specific settings.json values on container create.
  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.markdownlint": true
    },
    "[ignore]": {
      "editor.defaultFormatter": "foxundermoon.shell-format"
    }
  }
}

本文重点整理

• 在传统的开发中，需要安装多种软件、执行环境与工具才能开始进入开发的工作。
• 藉由 Remote - Container 的帮助，可以将 VS Code 中的开发环境搬至容器中，藉由容器的帮助，不需要再安装许多的软件，可以立即开始开发。
• 依照 Remote - Container 的步骤，可以产生一个名为 .devcontainer 的目录，里面会有：
  • Dockerfile ：依照配置步骤所建立的 Docker image 设定档。
  • devcontainer.json ： VS Code 容器的相关配置。
• 在 devcontainer.json 中可以使用 extensions 属性设定需要预安装的插件。
• 在 devcontainer.json 中可以使用 settings 属性设定需要的预配置。

参考资料

• Visual Studio Code ： Developing inside a Container
• Visual Studio Code Marketplace ： Remote - Containers