如何配置前端工程师开发环境

首先我默认你使用的是mac电脑,windows电脑可以自行研究一下,原理基本相同。

针对前端工程师,我们离不开几个工具(terminal、vscode、chrome),而proxy工具是可选的。有人会说把软件都装一遍就完事。其实我们可以玩出一些花样,提高大家开发效率(防止不断切换mac桌面)。

配置开发环境

VSCode Server

参考VSCode Server官方文档,这里我们采用的是最新推出的VSCode的web server版本,该版本有别于desktop版本。它可以通过远程模式和本地模式来启动服务。远程模式利用 https://vscode.dev/ (无需借助codespace)进行远程开发访问。本文更多介绍的是本地模式。

首先安装依赖:

wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

我这里主要采用的是它的本地服务模式,利用以下命令本地启动:

code-server serve-local

在安装额外依赖包后,服务启动成功。你可以通过默认端口localhost:8000访问。此时你可以登陆的Github或者Microsoft账号来同步你的编辑器偏好设置。

VSCode Server

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将设备的服务映射到端口上,方可利用 http://local.whistlejs.com/ 界面来管理代理规则。

w2 start --init

代理规则也极其简单,我们可以通过简单的规则让快速满足开发需求,通配符规则可以参考官方文档匹配模式。whistle服务是否常驻在后台,以你的开发需求习惯而定。

总结

作为前端开发,我们的目标是开发工具越轻量越好,尽可能提高自身的调试效率。希望VSCode Server会成为你的未来开发工具选择之一。(愿不远的将来,你也可以使用mac mini + ipad进行开发)。

参考【译】让人倾倒的 11 个 npm trick

推荐阅读更多精彩内容