一次配置，处处开发(Configure Once Develop Anywhere)——VSCode篇

一、问题

日常开发过程中我们可能会因为各种各样的原因丢失开发环境。

• 电脑坏掉了。
• 电脑在公司没带回家，有紧急 bug 要在家解决。
• 团建临时使用其他同学的电脑。

又或者是某个开发环境在自己的电脑上安装不上，在别人的电脑上却可以安装，然后花费大量的时间去找问题。

• python2、python3 因为路径问题而冲突
• node、yarn、npm 版本不匹配。
• FFmpeg 依赖的 debug 环境太过复杂，很难安装上

那么，有没有一个东西能让我们做到：

一次配置，处处开发(Configure Once Develop Anywhere) ？

非常幸运的是 Docker 能实现我们的愿望，只要我们的一切开发环境都部署在Docker上。

理想很丰满，现实很骨感。虽然python、node 这些东西都能通过命令行安装和使用，但是大部分程序员都是使用 IDE 来进行代码开发，典型的 IDE 有下面这些：

• JetBrains 全家桶： IntelliJ IDEA(Java)、Android Studio(Android)、WebStorm(前端)、PyCharm(python)、Gogland(go) 等等
• VSCode：大前端、python、c/c++
• Vim：c/c++、go
• Eclipes：Java
• Visual Studio：c/c++、c# 等等
• Xcode：iOS、iPad、Mac

上面这些 IDE 里面：JetBrains全家桶、VSCode、Vim、Eclipse 都能被部署到 Docker 镜像里，然后通过浏览器访问，可以说已经能够满足 70%的程序员了。

• JetBrains 全家桶可以通过 Projector 来云端化。
• VSCode可以通过 Code-Server 来云端化。
• Vim不用说了，直接使用远程命令行就行，也可以结合 Code-Server 使用。
• Eclipse可以通过 Eclipse Che 来云端化。

今天这篇文章我将通过一次性配置 TS-Node 环境来介绍 VSCode 环境的云端化，你需要做的工作非常少，跟我一起来看看吧!

二、快速使用起来

视频教程

1.快速部署

(1).Mac系统

第一步：安装Docker，非常简单我就不重复了。

第二步：运行 git clone git@github.com:whenSunSet/Node-CODA-Init-Data.git node-vscode-dev-env，建议放在用户根目录，例如：~/node-vscode-dev-env

第三步：如果第二步目录没有变，那么 cd ~/node-vscode-dev-env。否则进入你的目录，将 docker-compose-mac.yml 里面的配置路径改成你的路径。

第四步：在当前目录下执行，sudo docker-compose -f docker-compose-mac.yml up -d && docker exec -it node-vscode /bin/zsh，等待加载完毕，再执行 exit 退出容器。

第五步：访问 http://localhost:8080，输入密码： 20211215.test.vscode，你就能看见 VSCode 的界面了。

如果上面任意步骤出现了一些问题想要重新来过的话，那么可以先删除 node-vscode-dev-env，然后执行 docker stop node-vscode && docker rm node-vscode

(2).Linux系统

第一步：安装Docker，非常简单我就不重复了。

第二步：运行 git clone git@github.com:whenSunSet/Node-CODA-Init-Data.git node-vscode-dev-env，建议放在用户根目录，例如：/root/node-vscode-dev-env

第三步：如果第二步目录没有变，那么 cd /root/node-vscode-dev-env。否则进入你的目录，将 docker-compose-linux.yml 里面的配置路径改成你的路径。

第四步：在当前目录下执行，sudo docker-compose -f docker-compose-linux.yml up -d && docker exec -it node-vscode /bin/zsh，等待加载完毕，再执行 exit 退出容器。

第五步：访问 http://localhost:6630，输入密码： 20211215.test.vscode，你就能看见 VSCode 的界面了。

如果上面任意步骤出现了一些问题想要重新来过的话，那么可以先删除 node-vscode-dev-env，然后执行 docker stop node-vscode && docker rm node-vscode

2.TS-Node开发

因为上面这个环境已经是 TS-Node 的开发环境了，所以我们可以直接进入开发，开发调试也很简单：

第一步：打开我们云端 vscode 的 ternimal，执行：git clone https://github.com/whenSunSet/ts-node-express-deploy.git ~/data/ts-node-express-deploy && cd ~/data/ts-node-express-deploy，clone 并进入我们的 TS-Node 测试项目

第二步：npm install && node dist/server.js，启动 TS-Node 服务

第三步：访问 http://localhost:6631, 就能看见 Hello World 页面了

3.小知识和小技巧

• 1.我们进入 VSCode 的终端执行ls，会发现一些目录，这里介绍一下我们常用的目录：
  • ~/data：这个目录就是我们 Mac 上的目录 ~/node-vscode-dev-env，建议所有 自己产生的数据(代码、文件) 都放在这里面。
  • ~/data/envconfig：这个目录里面存放着各种各样的配置，例如 vim配置、vscode 的快捷键和插件、ssh配置、git配置 等等，建议使用 git 进行版本管理。
• 2.~/data/envconfig 目录配置介绍：
  • envconfig/config/alias-ws-config：里面存放着 alias，如果你想添加一些自己的命令，可以往 alias-enter.zsh 里面加。
  • envconfig/config/person-ws-config/.ssh：需要将你本地的 ~/.ssh 复制进来，这样才能将代码 push 到 gitlab 上，或者登陆其他的主机。
  • envconfig/config/person-ws-config/.git/.gitconfig：需要改为你的名字和邮箱，这样你写的代码的 blame 才正确。
  • envconfig/config/vim-ws-config：里面是 vim 的配置，没有非常强烈的需求不建议更改。
  • envconfig/config/vscode-ws-config：里面是 vscode 的配置和快捷键，可以在文件里改，也可以通过 VSCode 修改
  • envconfig/config/zsh-ws-config：里面是初始化的配置，没有非常强烈的需求不建议更改。
  • envconfig/data：里面放着一些我们不需要修改但是 vscode 依赖的数据，强烈不建议更改。
• 3.建议使用 safari 进行 VSCode 的访问，有以下好处：
  • 1.便于和 Chrome 访问网站进行区分，safari 全屏之后，你将完全感觉不出是在浏览器上进行开发。
  • 2.Chrome 对于 https 的限制过于严格，使得我们自签名的 https 证书不太管用，safari 只需要信任了本网站即可。
  • 3.当然 Chrome 访问 VSCode 也是完全没有问题的，看各位的喜好。
• 4.如果你想要在其他地方重新部署服务的话，非常简单。将 ~/node-vscode-dev-env 目录拷贝到你需要的机器上，安装好 Docker 之后，直接进入目录运行 sudo docker-compose -f docker-compose-mac.yml up -d，所有的配置都会复用你之前的配置，不需要修改任何东西，你的开发环境就迁移好了。
• 5.envconfig/config/vscode-ws-config/config.yml 里面可以修改访问密码，修改完密码之后执行 docker restart node-vscode
• 6.容器中暴露了 6631-6639 这些端口，你可以将容器中的服务的端口设置为这些端口中的一个，然后访问 localhost:端口，以访问容器中的服务。
• 7.任意配置修改之后，如果不生效的话可以进入 ~/kds-vscode-dev-env 目录下执行 docker restart node-vscode 重启镜像

三、后续展望

本篇文章是《一次配置，处处开发》系列文章的开篇，后续还会分享更多不同的 IDE 云端化、容器化的构建方式，例如我目前已经投入生产环境的 IDEA、AndroidStudio。

最后你都看到这里了，不来点赞收藏一波吗？你们的喜欢是我写作的最大动力，我们下篇文章见！