https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

这个插件允许我们在容器中运行 Visual Studio Code

在项目的根目录中,您需要创建一个名为 .devcontainer 的文件夹。我们将在此处存储环境设置。

然后在此文件夹中创建两个文件,devcontainer.json 和一个 Dockerfile

命名很重要,因为 Visual Studio Code 希望我们提供一些文件夹和文件名才能成功运行容器。

您的文件夹结构应如下:

Dockerfile 中,我们选择 Docker 镜像并在安装镜像后运行所需的任何命令(例如全局安装)。

FROM node:12.14.1-stretch
RUN npm install -g eslint prettier

然后,在 devcontainer.json 中,我们可以配置所有设置。

devcontainer.json 基本上是一个配置文件,该文件确定如何构建和启动 dev 容器。

{
"name": "Node.js Sample",
"dockerFile": "Dockerfile",
"appPort": 3000,
"extensions": ["dbaeumer.vscode-eslint"],
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
"postCreateCommand": "yarn install",
// Comment out the next line to run as root instead. Linux users, update
// Dockerfile with your user's UID/GID if not 1000.
"runArgs": ["-u", "node"]
}
  • dockerFile - 您要用作镜像的 Dockerfile 的路径。
  • appPort - 在容器运行时应在本地提供的端口或端口数组。
  • extensions - 扩展 ID 的数组,这些 ID 指定创建容器时应在容器内部安装的扩展。
  • settings - 将默认 settings.json 值添加到特定于容器/机器的设置文件中。
  • postCreateCommand - 创建容器后要运行的命令字符串或命令参数列表。
  • runArgs - 运行容器时应使用的 Docker CLI 参数数组

这是 devcontainer.json 选项的完整列表。

检查一下

容器运行并连接后,您应该在状态栏的左下方看到远程上下文(remote context)更改:

安装了“Remote — Containers”扩展后,您将在最左侧看到一个新的状态栏项目。

远程状态栏项目可以快速向您显示在哪个上下文中运行 VS Code(本地或远程),单击该项目将弹出“Remote — Containers”命令。

选择在容器中重新打开。

等待容器构建

如果这是您的第一次连接,则将下载并构建 Docker 镜像,并将启动运行 VS Code Server 副本的容器。第一次可能需要几分钟,但以后的连接仅需几秒钟。

检查环境

在容器中进行开发的有用的事情之一是,您可以使用应用程序所需的特定版本的依赖关系,而不会影响本地开发环境。

node --version
npm --version
我是为少。
微信:uuhells123。
公众号:黑客下午茶。
谢谢点赞支持!

Happy Hacking!

1 分钟上手,在容器中运行 Visual Studio Code的更多相关文章

  1. 在 Ubuntu 中使用 Visual Studio Code

    前言 我一直在 Linux 桌面系统下的探索寻找各种界面美观.使用舒适的软件工具.对于Linux下的开发人员来讲,这几年最大的福利就是 MicroSoft 推出的 Visual Studio Code ...

  2. Visual Studio Code 远程开发探秘

    摘要: IDE新时代! 作者:SHUHARI 的博客 原文:Visual Studio Code 远程开发探秘 Fundebug按照原文要求转载,版权归原作者所有. 在以前的文章 有趣的项目 - 在浏 ...

  3. ASP.NET Core 中文文档 第二章 指南(1)用 Visual Studio Code 在 macOS 上创建首个 ASP.NET Core 应用程序

    原文:Your First ASP.NET Core Application on a Mac Using Visual Studio Code 作者:Daniel Roth.Steve Smith ...

  4. ubuntu中安装visual studio code-(转载)

    在Ubuntu中安装Visual Studio Code 编译自:http://itsfoss.com/install-visual-studio-code-ubuntu/ 作者: Abhishek ...

  5. Visual Studio Code 显示隐藏的.git文件和目录

    在默认设置中,Visual Studio Code 将下列文件文件排除在显示列表中: "files.exclude": { "**/.git": true, & ...

  6. Java on Visual Studio Code的更新 – 2021年8月

    Nick Senior Program Manager, Developer Division at Microsoft 大家好,欢迎来到 8 月版的 Visual Studio Code Java ...

  7. 在Linux和Windows的Docker容器中运行ASP.NET Core

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 译者序:其实过去这周我都在研究这方面的内容,结果周末有事没有来得及总结为文章,Scott H ...

  8. Docker容器中运行ASP.NET Core

    在Linux和Windows的Docker容器中运行ASP.NET Core 译者序:其实过去这周我都在研究这方面的内容,结果周末有事没有来得及总结为文章,Scott Hanselman就捷足先登了. ...

  9. Alpine容器中运行go的二进制文件

    Alpine容器中运行go的二进制文件 kuSorZ · 3月之前 · 214 次点击 · 预计阅读时间 1 分钟 · 2分钟之前 开始浏览 原文出处:https://cloud.tencent.co ...

随机推荐

  1. 浅析Python项目服务器部署

    基础理论 关于Web服务器和应用服务器 基本概念: Web服务器主要功能就是存储.处理.传递网页,客户端和服务器之间基于HTTP协议进行通信. 应用服务器主要是处理动态请求,调用相应的对象完成对请求的 ...

  2. 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent

    stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...

  3. git基本操作(适合新手)

    本人也是刚刚开始学习 大家可以一起交流,大佬可以在教一下 目录 git配置 git本地仓库 SSH提交方式,git提交远程仓库 一.git配置 git config --global user.nam ...

  4. ctf/web源码泄露及利用办法

    和上一篇文章差不多,也算是对web源码泄露的一个总结,但是这篇文章更侧重于CTF 参考文章: https://blog.csdn.net/wy_97/article/details/78165051? ...

  5. SpringBoot从入门到精通教程(一)

    写在前面的话: 在很早之前,记笔记时候,我就一直在思考一个问题,我记笔记是为了什么,我一直想不明白 ,后面发现技术跟新迭代的速度实在太快了,笔记刚纪完,技术又跟新了,于是我想了想干脆边写博客,边记笔记 ...

  6. Ubuntu替换清华源或者阿里源

    倒腾pygame包的问题(Ubuntu 19.10),安装好pip后,又要安装一个pygame的包,倒腾了两天两夜,硬是因为网络问题(可能被强大的墙阻挡了),安装不成功,后面在网上找了篇帖子,用清华源 ...

  7. webform中DropdownList绑定多个字段

    说明 ListItem中有Attributes属性,手动创建一个自定义属性,赋值需要绑定的字段的值. 这样的话,前台js也可以获取到,能够显示到前台html,进行控制. 代码 foreach(Data ...

  8. 使用CDN后如何配置Apache使其记录访客真实IP

    今天想看看哪些地区的人访问过我的网站,于是打开Apache网站响应日志,把访客IP复制到百度,发现搜到的全部都是我是用的CDN的节点IP,真实的访客IP并没有被记录. 如图所示,上面的103.45.7 ...

  9. 超详细的第一个Servlet程序

    Servlet的第一个程序! 首先查看官方文档,来编写我们的第一段代码 1.先启动Tomcat,确保我们能够正常访问. 2.http://localhost:8080/examples/     查看 ...

  10. java集合大总结

    Java集合大总结 java集合框架简图(API关系图): 虚线框表示接口,实线框表示类. 特点和使用总结: Collection: 单列单值. List: 有序(查询顺序和插入顺序一致),有下标(索 ...