Marketplace.visualstudio.com/items?itemN…

This plug-in allows us to run Visual Studio Code in the container.

In the root of your project, you need to create a folder called.devContainer. This is where we will store the environment Settings.

Then create two files in this folder, devContainer.json and a Dockerfile.

Naming is important because Visual Studio Code expects us to provide some folders and file names to run the container successfully.

Your folder structure should look like this:

In Dockerfile, we select the Docker image and run any commands we need (such as global install) after the image is installed.

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

Then, in devContainer.json, we can configure all the Settings.

Devcontainer.json is basically a configuration file that determines how to build and start the Dev container.

{
  "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"]}Copy the code
  • dockerFile– The path to the Dockerfile you want to use as the image.
  • appPort– Ports or an array of ports that should be provided locally while the container is running.
  • extensions– An array of extension ids that specify the extensions that should be installed inside the container when it is created.
  • settings– Adds default settings.json values to container/machine specific Settings files.
  • postCreateCommand– List of command strings or command parameters to run after the container is created.
  • runArgs– Docker CLI parameter array that should be used when running containers

Here is the complete list of devContainer.json options.

Check the

After the container runs and connects, you should see the remote context change in the bottom left of the status bar:

After installing the “remote-Containers” extension, you will see a new status bar item on the far left.

The Remote status bar project quickly shows you in which context VS Code (local or Remote) is running, and clicking on it brings up the “remote-containers” command.

Select re-open in the container.

Waiting for the container to build

If this is your first connection, the Docker image will be downloaded and built, and the container running the VS Code Server copy will be launched. The first connection may take a few minutes, but subsequent connections take only a few seconds.

Check the environment

One of the useful things about developing in a container is that you can use version-specific dependencies required by your application without affecting your local development environment.

node --version
npm  --version
Copy the code
I am for less. Wechat: uuhells123. Public account: Hacker afternoon tea. Thank you for your support 👍👍👍!Copy the code

Happy Hacking!