마이크로소프트에서 개발한 텍스트 에디터로, 2015년 4월 29일에 소개되고 2016년 4월 15일에 1.0.0 정식판이 발표되었다. Electron 프레임워크를 기반으로 만들었다. MS의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터이며 윈도우, macOS, 리눅스를 모두 지원한다. GitHub에서 배포되는 소스 코드는 MIT 라이선스하에 배포되는 오픈 소스지만, 실제로 공식 사이트에서 배포되는 릴리즈 바이너리는 마이크로소프트의 독자적 라이선스(EULA의 일종)하에 배포되는 것으로 오픈 소스가 아니다. 대부분 사용자들은 릴리즈 바이너리를 설치하므로 마이크로소프트의 독자적 라이선스 하에 VS Code를 사용하고 있다.
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node/.devcontainer/base.Dockerfile
# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
# 시간 및 날짜 설정
ENV TZ Asia/Seoul
RUN apt-get update && apt-get install -y locales
# 한국어 설정
RUN locale-gen ko_KR.UTF-8
RUN export LC_ALL=ko_KR.UTF-8
# 테마 적용
RUN sed -i 's/codespaces/agnoster/' /home/node/.zshrc
RUN sed -i'' -r -e "/prompt_hg/a\ prompt_newline" /home/node/.oh-my-zsh/themes/agnoster.zsh-theme
# [Optional] Uncomment if you want to install an additional version of node using nvm
ARG EXTRA_NODE_VERSION=16.14.0
RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
# [Optional] Uncomment if you want to install more global node modules
RUN su node -c "npm install -g yarn @vue/cli parcel-bundler"
5. Visual Studio Code 의 devcontainer.json 알아보자
Dockerfile 을 실행 하면서 devcontainer.json 에서 extensions, features 대한 설정 값을 지정 할 수 있습니다.
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node
{
"name": "DataUs Frontend",
"build": {
"dockerfile": "Dockerfile",
// Update 'VARIANT' to pick a Node version: 16, 14, 12.
// Append -bullseye or -buster to pin to an OS version.
// Use -bullseye variants on local arm64/Apple Silicon.
"args": { "VARIANT": "16-bullseye" }
},
// Set *default* container specific settings.json values on container create.
"settings": {
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.validate": ["javascript", "typescript"]
},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"dbaeumer.vscode-eslint",
"eamodio.gitlens-insiders",
"octref.vetur",
"Orta.vscode-jest",
"MS-CEINTL.vscode-language-pack-ko",
"ritwickdey.LiveServer",
"csstools.postcss",
"ms-python.python",
"bradlc.vscode-tailwindcss",
"mechatroner.rainbow-csv"
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [4231],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",
// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node",
"features": {
"git": "latest",
"sshd": "latest",
"homebrew": "latest",
"python": "latest",
"java": "lts"
}
}
6. Visual Studio Code 를 이용하여 Remote - Containers 를 실행 하자
6.1 폴더 구성
6.2 VSCode 에서 Remote - Containers 실행 하기
6.2.1 VSCode 실행 및 설정
위의 그림에서 폴더는 #5.1에서 다운로드(vscode-remote-containers.zip) 받아서 압축을 해제
아래의 그림 처럼 실행.
이 환경 설정 값을 통해 Remote - Containers 를 사용하게 되면 동일한 개발 환경을 제공하게 됩니다.
