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. JavaSE09-(练手)简易学生管理系统

    1.学生管理系统实现步骤 案例需求 系统主要功能如下: 添加学生:通过键盘录入学生信息,添加到集合中 删除学生:通过键盘录入要删除学生的学号,将该学生对象从集合中删除 修改学生:通过键盘录入要修改学生 ...

  2. git远程仓库Github

    一.克隆项目 git clone 网址 1.配置信息 git config user.name '用户名' git config user.email '邮箱号' 2.推送项目到远程仓库 # 工作区代 ...

  3. react第十单元(children的深入用法-React.Children对象上的方法)

    第十单元(children的深入用法-React.Children对象上的方法) #课程目标 理解什么是children 掌握React.Children对象上的方法 #知识点 什么是children ...

  4. [日常摸鱼]HDU2157 How many ways??

    hhh我又开始水题目了 题意:给一张有向图,多次询问一个点到另一个点刚好走$k$步的方案数取模,点数很小 每个$a,b,k$的询问直接把邻接矩阵$map$自乘$k$次后$map[a][b]$就是答案了 ...

  5. SSH,公钥,私钥的理解

    参考大佬的文章:https://blog.csdn.net/li528405176/article/details/82810342    https://www.cnblogs.com/Bravew ...

  6. python pip命令的安装与实验安装scrapy

    大家在使用python时候,很多时候导入模块都会发现该模块不存在,那么我们就需要下载安装,可是有时候安装会出现各种问题,大家回去请教别人,大部分程序员会回答你:pip install 什么等,可是你p ...

  7. Demo分享丨看ModelArts与HiLens是如何让车自己跑起来的

    摘要:基于HiLens Kit已经基本开发完成,可部署到HiLens Kit,模型的选择为基于DarkNet53的YOLOv3模型,权重为基于COCO2014训练的数据集,而车道线的检测是基于Open ...

  8. js表单简单验证(手机号邮箱)

    1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncod ...

  9. JavaDailyReports10_20

    1 package varycode; 2 class Grandparent 3 { 4 public Grandparent() 5 { 6 7 System.out.println(" ...

  10. 原来大数据 Hadoop 是这样存储数据的

    HDFS概述 产生背景 随着数据量越来越大,在一个操作系统中存不下所有的数据.需要将这些数据分配到更多的操作系统中,带来的问题是多操作系统不方便管理和维护.需要一种系统来管理多台机器上的文件,这就是分 ...