首要我默许你运用的是mac电脑，windows电脑能够自行研究一下，原理基本相同。
针对前端工程师，咱们离不开几个东西（terminal、vscode、chrome），而proxy东西是可选的。有人会说把软件都装一遍就完事。其实咱们能够玩出一些把戏，进步大家开发功率（防止不断切换mac桌面）。
装备开发环境
VSCode Server
参阅VSCode Server官方文档，这儿咱们选用的是微软最新推出的VSCode的web server版别，该版别有别于desktop版别。它能够通过长途形式和本地形式来发动服务。长途形式运用 vscode.dev （无需借助codespace）进行长途开发访问。本文更多介绍的是本地形式。
首要装置依靠：
wget -O- https://aka.ms/install-vscode-server/setup.sh | sh
我这儿首要选用的是它的本地服务形式，运用以下指令本地发动：
code-server serve-local
在装置额定依靠包后，服务发动成功。你能够通过默许端口localhost:8000访问。此时你能够登陆的Github或许Microsoft账号来同步你的编辑器偏好设置。
VSCode Server是自带Web terminal，所以我的开发经验就是翻开localhost:8000，快捷键翻开terminal。该编辑器现已将code指令设置好了，当你想发动一个项目，你能够毫不犹豫地敲上code .，即可新开窗口翻开当时目录。
这样好处在于，我把前面所说三大东西terminal、vscode、chrome揉合在一起，都放在chrome里边。我只需求关注chrome这个窗口即可，调试页面会更加称心如意，不需求切换窗口。所以内存消耗都交给chrome处理，有效避免electron的功能忧虑（虽然vscode现已优化得非常好）。你一天的作业基本上离不开Chrome浏览器，除非你在摸鱼。
进程看护
VSCode Server是常常运用的，期望它进程常驻在后台，这儿咱们选用supervisor来看护进程。首要装置supervisor：
brew install supervisor
默许在初始目录/usr/local/etc/supervisor.d下装备一个vs-code-server.ini。运用以下装备文件确保你的项目是能够开机发动且主动重启的，并将日志放置在指定方位，确保报错信息有迹可循。
[program:code-server]
directory = /usr/local/bin
command = /usr/local/bin/code-server serve-local
autostart = true
startsecs = 5
autorestart = true
startretries = 3
user = weipingxiang
redirect_stderr = true
stdout_logfile_backups = 20
stdout_logfile=/usr/local/var/log/vs-code-server.log
stdout_logfile_maxbytes=10MB
stderr_logfile=/usr/local/var/log/vs-code-server-err.log
stderr_logfile_maxbytes=10MB
装备完成后，记住supervisorctl reload从头加载装备文件，装备文件才会收效。supervisorctl是可交互指令，能够查看当时服务运转状态。假如你的nodejs服务敞开过多导致卡死，直接选用killall node杀死所有nodejs进程，该vscode server也将会主动重启。
VSCode Server和Code Server
讲了许多VSCode Server的运用，大家肯定会拿它和Code Server进行比较，他们俩不是同一个东西，其中一个是官方东西，一个是第三方东西。Code Server同样是运用VScode源码改造的BS形式东西，有许多博文都现已介绍过了，这儿不再赘述。而VSCode Server的长途形式则比较麻烦，它发动，注册，并通过secure tunnel与微软官方进行通讯，需求你的机器命名。简而言之，就是它多了一层tunnel，将你的vscode web和服务器相连接。
为了体会VScode Server的长途形式，你还需求填写signup form，等待微软官方批阅方可运用。我有幸等到了它的答应，长途形式的体会仍是比较慢，开发体会算不上流畅。作用远不如本地形式，大家能够自行试用。
以下是它与Code Server的对比，Code Server更适合在自己建立服务器运用。VSCode Server还在开展的过程中，本地形式则是相对友好，期望它未来会开展得更好。
| VSCode Server | Code Server |
|---|---|
| 官方（亲儿子） | 第三方 |
| 长途形式要通过官方注册 | 长途形式只需登陆 |
| github验证 | 密码验证 |
| 自带code指令 | 无 |
装备署理东西
proxy东西是可选的，部分web项目会选用开发东西 webpack-dev-server 或许 vite 的 proxy 东西。这种方法是比较推荐的，由于它没有依靠署理东西的装备，做到了较好的开发体会（DX）。
当咱们遇到登陆模块页面等调试的时分，由于域名有限制，咱们想将远端域名署理到本地，咱们能够选用whistle（由这款nodejs开发的东西），全局装置npm install -g whistle即可。运用chrome的SwitchyOmega将设备的服务映射到端口上，方可运用 local.whistlejs.com 界面来办理署理规矩。
w2 start --init
署理规矩也极端简略，咱们能够通过简略的规矩让快速满意开发需求，通配符规矩能够参阅官方文档匹配形式。whistle服务是否常驻在后台，以你的开发需求习气而定。
总结
作为前端开发，咱们的方针是开发东西越轻量越好，尽可能进步本身的调试功率。期望VSCode Server会成为你的未来开发东西挑选之一（愿不远的将来，你也能够运用mac mini + ipad进行开发）。
