日语版已先行更新
https://kuritan.github.io/welcome-to-vscode-remote-containers/kuritan.github.io
本来想坚持一个月更新一次博客,但实际做起来真是难啊。。。
废话不多说,这次主要安利一波VSCode的Remote Containers拓展。
instruction
当前时间点(2020/06),RemoteContainers仍处于Preview阶段,但不可否认,这一功能给使用VSCode的开发带来了巨大的变化。之前我还有所犹豫,但有了它,高级语言的IDE完全可以只用VSCode!
具体好在哪里呢?
省去了折腾开发环境的烦恼!
不知道亲们碰没碰到过这样的场景:
- 打算着手新产品开发,但光调试开发环境就耗了一整天,折腾下来已经什么都不想干了
- 新人入组,分享一下文档,让新人自己动手调试出开发环境,怎么着都得消耗一周时间
- 手里的开发机装了一大堆版本控制app (pyenv, rbenv, tfenv...),同时碰多个项目的话,光调对版本就够受得
自从我用上了Remote-Containers,以上这些都迎刃而解!
trial
上手碰一碰最有说服力。我们来装上它看看~
- 具体安装过程就不多说了。在VSCode里打开Extensions搜索安装即可
- 在目标项目的dir中,Command Palette里输入remote搜索,选择Open Folder in Container
3. 会跳出一堆doker image的选项。这里我用自己的博客举例子,我的博客用hexo搭建,使用的是node.js 10
4. VSCode会开始pull image起环境,这里需要我们稍等片刻。成功后,会有一个.devcontainer目录被创建出来,其中包含着Dockerfile和devcontainer.json两个文件
5. 从VSCode的状态栏中选择[View] -> [Terminal],会激活一个终端,我们可以从这里看到项目已经处在了container环境中
6. 之后还需要一点点小调试。刚才也说了,我的博客用的是hexo,需要安装hexo和语言支持,时区也得调整一下。很简单,通过Dockerfile都可以解决。具体如下:
#-------------------------------------------------------------------------------------------------------------
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#-------------------------------------------------------------------------------------------------------------
# To fully customize the contents of this image, use the following Dockerfile instead:
# https://github.com/microsoft/vscode-dev-containers/tree/v0.122.1/containers/javascript-node-10/.devcontainer/Dockerfile
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-10
# ** [Optional] Uncomment this section to install additional packages. **
#
# RUN apt-get update
# && export DEBIAN_FRONTEND=noninteractive
# && apt-get -y install --no-install-recommends <your-package-list-here>
# Verify git and needed tools are installed
RUN apt-get install -y git procps locales
&& sed -i '/^#.* ja_JP.UTF-8 /s/^#//' /etc/locale.gen
&& locale-gen
&& ln -fs /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
&& dpkg-reconfigure -f noninteractive tzdata
# Remove outdated yarn from /opt and install via package
# so it can be easily updated via apt-get upgrade yarn
RUN rm -rf /opt/yarn-*
&& rm -f /usr/local/bin/yarn
&& rm -f /usr/local/bin/yarnpkg
&& apt-get install -y curl apt-transport-https lsb-release
&& curl -sS https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/pubkey.gpg | apt-key add - 2>/dev/null
&& echo "deb https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/ stable main" | tee /etc/apt/sources.list.d/yarn.list
&& apt-get update
&& apt-get -y install --no-install-recommends yarn
# Install eslint
RUN npm install -g eslint
&& npm install -g hexo-cli
&& npm install hexo -g
# Clean up
RUN apt-get autoremove -y
&& apt-get clean -y
&& rm -rf /var/lib/apt/lists/*
# Set the default shell to bash instead of sh
ENV SHELL /bin/bash
ENV LANG='ja_jp.utf8'
其中一部分是VSCode自动生成的,还有一部分是我加入的。
之后在Command Palette里remote: rebuild一下就顺利完成了。
这样一来,不管你手边的机器有什么样的环境什么样的版本,项目本身可以在container中隔离运行。
把设置文件通过git共享给整个组,即可做到所有人都是同样的开发环境,大大减少调试环境的烦恼之处。
最后上一张我用Remotecontainers来写这篇博客时的截图。
早用早享受!