VsCode实战

VsCode+WSL+Docker 开发环境构建指南

Why——为什么整这种活

在实际开发中，我们遇到了以下类型的问题：

不同工程对nodejs版本要求不一样比如我们的工程A是基于angularjs1.5的，它要求nodejs版本为11.0.0，而工程B是基于vue+vite的，vite要求nodejs版本需要大于12.0.0。
某些npm包需要linux编译环境典型地，如node-sass这个包，所以需要本地具有可以编译它的环境，比如python，gyp等等，但是一般来说，我们的Windows上并没有这些环境，所以就会报一堆错，而Windows如果想要安装这种环境，又需要安装一些很冷门还很难装的软件与库，搞得及其烦人。
需要适应未来DevOps转型现在很多大厂已经转型DevOps了，云计算和容器化是一种大趋势，随着业务量与项目数量的增长，开发和运维都面临着向DevOps的转型，所以提前进行容器化开发，可以为未来容器化开发——容器化部署模式铺平道路。

方案简述

我们采用Vscode + Docker + WSL来解决上述问题。

VsCode :不必多介绍，一款流行的编辑器，在本方案中，它只需要安装两个插件即可：
Remote-Containers :用于连接远程容器
Remote-WSL :用于连接本地的WSL
WSL（windows subsystem linux）:Windows系统下的Linux子系统，它在这里主要起的作用是用来提供一个linux环境，一是提供给docker作为运行环境，二是用来解决上述某些npm包需要linux编译环境的问题。
Docker :一款容器应用，它可以提供比虚拟机更加快捷和对硬件资源消耗更少的虚拟化方案，为我们的提供一个虚拟的服务器和开发环境。

安装配置WSL 2.0版本

最新的Windws10默认都是直接支持WSL2的，我们只需要在windows应用商店搜索linux，就能看到支持的Linux子系统列表，选择其中一个安装就可以了。

当然，推荐的话，还是ubuntu比较流行，遇到问题也比较容易搜索到相关解决方案。为了更好地操作，推荐在应用商店中搜索windows terminal安装。

另外，由于WSL是基于Hype-V技术的，需要Windows开启相关功能，并且保证BIOS中的虚拟化选项开启，由于不同电脑BIOS的设置方式不同，请自行在网络上搜索相关设置方法。

如何判断电脑是否开启了虚拟化呢？打开任务管理器，切换到【性能】一栏，可以看到【CPU】下面的信息中标识了是否开启了虚拟化：

输入以下命令：

wsl -l --verbose

会列出本机现在安装的所有WSL发行版以及它的版本

  NAME      STATE           VERSION
* Ubuntu    Running         2

系统默认的那个发行版前会有一个*号，也就是，当你在windows Terminal中直接输入wsl时，打开的那个发行版：

安装配置Docker

Windows需要去官网下载Docker desktop最新版本，下载安装文件后直接安装即可。 https://docs.docker.com/desktop/windows/wsl/ 安装好之后，我们要进行以下配置，运行docker-desktop程序

修改一下docker镜像源和配置：

{
  "registry-mirrors": [
    "http://hub-mirror.c.163.com",
    "https://docker.mirrors.ustc.edu.cn"
  ],
  "insecure-registries": [],
  "debug": false,
  "experimental": false,
  "features": {
    "buildkit": true
  },
  "builder": {
    "gc": {
      "enabled": true,
      "defaultKeepStorage": "20GB"
    }
  }
}

安装配置VsCode相关插件

在WSL容器中开发调试应用

自动创建容器插件安装成功后，在VsCode中打开工程目录，会看到左下角有两个相对的箭头的标识，点击它，就会弹出命令选项，让我们选择在哪里打开：

在确保docker desktop 正常运行的前提下，我们可以选择在WSL中开发目录，也可以选择在容器内打开当前工程目录，这里我们选择在容器内打开。它会让我们选择要打开的目录，默认为当前目录：

VsCode在配置好相关环境后，会在当前目录下生成一个一个名为.devcontainer的文件夹，里面存放着容器的环境配置，有了这个配置，下次再在容器中打开工程目录时，就不会再让我们选择工程环境类型了。

当然，为了不污染项目文件，可以把这个目录加入到.gitignore文件中。

之后，我们就可以像在本地开发一样，在容器内进行开发了。

手动创建容器我们发现，在选择NodeJS版本那一步，只有少数几个版本，比如我们需要10.17.0的话，这里就没有，怎么办呢，我们有另一种方式。

在工程根目录下新建Dockerfile文件，

FROM node:10.17.0 # 这里写上需要的nodejs版本

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8090 # 这里是应用在开发时默认运行的端口

CMD [ "npm", "run", "serve"]  # 拆解的开发命令 npm run serve

然后新建docker忽略文件.dockerignore :

node_modules npm-debug.log 新建后，点击左下角远程容器按钮，选择【在WSL中打开】：

软硬件要求

官方System requirements文档

BIOS开启虚拟化添加Hyper-V（win10家庭版需要安装） WSL安装（控制台输入WSL -l检查是否安装，下载地址：WSL安装更新）将默认安装的Linux子系统版本设置为WSL2（控制台输入wsl.exe –set-default-version 2） 4GB系统内存 64位处理器带二级地址翻译（SLAT）

下载安装

下载Docker Desktop(各版本下载地址：docker desktop release-notes)，按正常的客户端程序安装即可，4.9+版本目前有不少小问题，可到官方的issue页面检索相关问题（https://github.com/docker/for-win/issues）；

参考资料

https://docs.docker.com/desktop/windows/wsl/

yangjava

Vscode实战