首先我默認(rèn)你使用的是mac電腦嚣镜，windows電腦可以自行研究一下，原理基本相同辰狡。
針對(duì)前端工程師锋叨，我們離不開(kāi)幾個(gè)工具（terminal、vscode宛篇、chrome）娃磺，而proxy工具是可選的。有人會(huì)說(shuō)把軟件都裝一遍就完事叫倍。其實(shí)我們可以玩出一些花樣偷卧，提高大家開(kāi)發(fā)效率（防止不斷切換mac桌面）。
配置開(kāi)發(fā)環(huán)境
VSCode Server
參考VSCode Server官方文檔段标，這里我們采用的是最新推出的VSCode的web server版本涯冠，該版本有別于desktop版本炉奴。它可以通過(guò)遠(yuǎn)程模式和本地模式來(lái)啟動(dòng)服務(wù)逼庞。遠(yuǎn)程模式利用 https://vscode.dev/ （無(wú)需借助codespace）進(jìn)行遠(yuǎn)程開(kāi)發(fā)訪問(wèn)。本文更多介紹的是本地模式瞻赶。
首先安裝依賴：
wget -O- https://aka.ms/install-vscode-server/setup.sh | sh
我這里主要采用的是它的本地服務(wù)模式赛糟，利用以下命令本地啟動(dòng)：
code-server serve-local
在安裝額外依賴包后，服務(wù)啟動(dòng)成功砸逊。你可以通過(guò)默認(rèn)端口localhost:8000訪問(wèn)璧南。此時(shí)你可以登陸的Github或者M(jìn)icrosoft賬號(hào)來(lái)同步你的編輯器偏好設(shè)置。
VSCode Server是自帶Web terminal师逸，所以我的開(kāi)發(fā)經(jīng)驗(yàn)就是打開(kāi)localhost:8000司倚，快捷鍵打開(kāi)terminal。該編輯器已經(jīng)將code命令設(shè)置好了篓像，當(dāng)你想啟動(dòng)一個(gè)項(xiàng)目动知，你可以毫不猶豫地敲上code .，即可新開(kāi)窗口打開(kāi)當(dāng)前目錄员辩。
這樣好處在于盒粮，我把前面所說(shuō)三大工具terminal、vscode奠滑、chrome揉合在一起丹皱，都放在chrome里面。我只需要關(guān)注chrome這個(gè)窗口即可宋税，調(diào)試頁(yè)面會(huì)更加得心應(yīng)手摊崭，不需要切換窗口。所以內(nèi)存消耗都交給chrome處理杰赛，有效避免electron的性能擔(dān)憂（雖然vscode已經(jīng)優(yōu)化得非常好）爽室。你一天的工作基本上離不開(kāi)Chrome瀏覽器，除非你在摸魚(yú)。
進(jìn)程守護(hù)
VSCode Server是經(jīng)常使用的阔墩，希望它進(jìn)程常駐在后臺(tái)嘿架，這里我們采用supervisor來(lái)守護(hù)進(jìn)程。首先安裝supervisor：
brew install supervisor
默認(rèn)在初始目錄/usr/local/etc/supervisor.d下配置一個(gè)vs-code-server.ini啸箫。利用以下配置文件確保你的項(xiàng)目是能夠開(kāi)機(jī)啟動(dòng)且自動(dòng)重啟的耸彪，并將日志放置在指定位置，確保報(bào)錯(cuò)信息有跡可循忘苛。
[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重新加載配置文件，配置文件才會(huì)生效扎唾。supervisorctl是可交互命令召川，可以查看當(dāng)前服務(wù)運(yùn)行狀態(tài)。如果你的nodejs服務(wù)開(kāi)啟過(guò)多導(dǎo)致卡死胸遇，直接采用killall node殺死所有nodejs進(jìn)程荧呐，該vscode server也將會(huì)自動(dòng)重啟。
VSCode Server和Code Server
講了很多VSCode Server的使用纸镊，大家肯定會(huì)拿它和Code Server進(jìn)行比較倍阐。Code Server同樣是利用VScode源碼改造的BS模式工具，有很多博文都已經(jīng)介紹過(guò)了逗威，這里不再贅述峰搪。而VSCode Server的遠(yuǎn)程模式則比較麻煩，它啟動(dòng)凯旭，注冊(cè)概耻，并通過(guò)secure tunnel與微軟官方進(jìn)行通信，為你的機(jī)器命名罐呼。簡(jiǎn)而言之鞠柄，就是它多了一層tunnel，將你的vscode web和服務(wù)器相連接弄贿。
為了體驗(yàn)VScode Server的遠(yuǎn)程模式春锋，你還需要填寫(xiě)signup form，等待微軟官方審批方可使用差凹。我有幸等到了它的許可期奔，遠(yuǎn)程模式的體驗(yàn)還是比較慢，開(kāi)發(fā)體驗(yàn)算不上流暢危尿。效果遠(yuǎn)不如本地模式呐萌，大家可以自行試用。
以下是它與Code Server的對(duì)比谊娇，Code Server更適合在自己搭建服務(wù)器使用肺孤。VSCode Server還在發(fā)展的過(guò)程中，本地模式則是相對(duì)友好，希望它未來(lái)會(huì)發(fā)展得更好赠堵。
| VSCode Server | Code Server |
|---|---|
| 官方（親兒子） | 第三方 |
| 遠(yuǎn)程模式要經(jīng)過(guò)官方注冊(cè) | 遠(yuǎn)程模式只需登陸 |
| github驗(yàn)證 | 密碼驗(yàn)證 |
| 自帶code命令 | 無(wú) |
配置代理工具
proxy工具是可選的小渊，部分web項(xiàng)目會(huì)采用開(kāi)發(fā)工具 webpack-dev-server 或者 vite 的 proxy 工具。這種方式是比較推薦的茫叭，因?yàn)樗鼪](méi)有依賴代理工具的配置酬屉，做到了較好的開(kāi)發(fā)體驗(yàn)（DX）。
當(dāng)我們遇到登陸模塊頁(yè)面等調(diào)試的時(shí)候揍愁，由于域名有限制呐萨，我們想將遠(yuǎn)端域名代理到本地，我們可以采用whistle（由這款nodejs開(kāi)發(fā)的工具）莽囤，全局安裝npm install -g whistle即可谬擦。利用chrome的SwitchyOmega將設(shè)備的服務(wù)映射到端口上，方可利用 http://local.whistlejs.com/ 界面來(lái)管理代理規(guī)則朽缎。
w2 start --init
代理規(guī)則也極其簡(jiǎn)單惨远，我們可以通過(guò)簡(jiǎn)單的規(guī)則讓快速滿足開(kāi)發(fā)需求，通配符規(guī)則可以參考官方文檔匹配模式饵沧。whistle服務(wù)是否常駐在后臺(tái)锨络，以你的開(kāi)發(fā)需求習(xí)慣而定赌躺。
總結(jié)
作為前端開(kāi)發(fā)狼牺，我們的目標(biāo)是開(kāi)發(fā)工具越輕量越好，盡可能提高自身的調(diào)試效率礼患。希望VSCode Server會(huì)成為你的未來(lái)開(kāi)發(fā)工具選擇之一是钥。（愿不遠(yuǎn)的將來(lái)，你也可以使用mac mini + ipad進(jìn)行開(kāi)發(fā)）缅叠。
