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. 前端:css3的过渡与动画

    一.css3过渡知识 (一).概述 1.CSS3过渡是元素从一种样式逐渐改变为另一种的效果.      2.实现过渡效果的两个要件:    规定把效果添加到那个css属性上.    规定效果时长 定义 ...

  2. Nginx(一):安装与常用命令

    简介   Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少,并发能 力强,事实上nginx的并发能力确实在同类型的网页服务器中表现 ...

  3. 开源一套原创文本处理工具:Java+Bat脚本实现自动批量处理对账单工具

    原创/朱季谦 这款工具是笔者在2018年初开发完成的,时隔两载,偶然想起这款小工具,于是,决定将其开源,若有人需要做类似Java批处理实现整理文档的工具,可参考该工具逻辑思路来实现. 该工具是运行在w ...

  4. ReentrantReadWriterLock源码(state设计、读写锁、共享锁、独占锁及锁降级)

    ReentrantReadWriterLock 读写锁类图(截图来源https://blog.csdn.net/wangbo199308/article/details/108688148) stat ...

  5. 利用Java Flight Recorder(JFR)诊断timing及内存问题

    Java Flight Recorder(JFR), 以下简称JFR,请注意这个只有Oracle JDK 1.7(7u40)或以上版本才有, OpenJDK木有这东西. 启用: Java命令行启动参数 ...

  6. SSRF深入学习

    爆出来的直接关于SSRF的漏洞有俩,①是weblogic,②是discuzz SSRF漏洞最主要的部分并不是SSRF 探测内网,而是可以写shell,反弹shell,虽然很多厂家把它归为低危漏洞,仔细 ...

  7. 干货满满,32个常用 Python 实现,你学废了嘛!

    1. 冒泡排序 lis = [56,12,1,8,354,10,100,34,56,7,23,456,234,-58] def sortport(): for i in range(len(lis)- ...

  8. python 字符串拼接 + 与 join 的区别

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 python在进行字符串的拼接时,一般有两种方法,一种是使用+直接相加,另一种是使用join a = ...

  9. 一个简单的CSS示例

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...

  10. cmake的安装

    安装cmake有2种方式 安装方式1:源码安装 1.下载cmake源码包(https://cmake.org/download/),解压后进入解压目录 2.执行安装配置命令:配置软件二进制安装到/us ...