我的 WSL 前端开发体验优化之路

[theprimone]

WSL 诞生之前基于 Windows 的开发体验在我印象中很差，大概记得之前还是在 CMD 或者 PowerShell 终端中操作。特别是每次需要重新安装开发环境的时候，是我很不愿意面对的，我都是现打开各种网站下载安装的。另外就是对于开发环境和项目的管理，每次也都会很纠结，这个或者那个东西放哪里合适，多少会有些强迫症。

接触 WSL 之后当时就觉得这种开发方式太 Amazing 了。所以从 WSL 1 一直用到了现在的 WSL 2 ，绝大多数开发时间都是 WSL 上。当然，对于一个相对陌生的环境熟悉起来多少是有点痛苦的，这里有一篇文章总结了大部分的遇到的问题：《当一名前端攻城狮把 WSL 作为主力开发系统之后……》

另外即使是像 Linux 这样的系统已经很方便我们去配置各种东西了，但是由于需要手动去找到各种配置文件再设定合理的配置，这对于上了年纪的人来说并不友好。所以去年又总结了一下自己开发环境的搭建流程：《我的 Windows 开发环境搭建手册》

当时是立了 flag 会弄个脚本的，直到这个端午假期，终于行动起来了。契机是想通过 SSH 连上 WSL ，一通折腾搞定之后赶紧总结了一下，心想着下次再配置开发环境这一套走下来人都麻了吧。

所以前两天爆肝把脚本搞了出来，目前效果还行，满足了基本需求，那之后我就能在任意满足需求的电脑上快速创建出一套统一的开发环境出来，不由得让人很振奋。当然，如果都初始化了一套 WSL 环境出来了，那也完全可以导出镜像之后重复利用，下一步是有这个打算的，不过看起来导出的镜像挺大的，放到云盘的话感觉下载是个大问题 😂

One more thing，脚本搞定之后我又尝试用必剪做了个演示视频，第一次正经尝试做视频，虽然很麻烦，但还挺有意思的。

WSL 2 开发环境脚本搭建演示

这下算是把我对 WSL 做的各种工作梳理完了，一通搞下来也算是为了安利 WSL 吧，毕竟目前还没接触到同好，欢迎各位朋友入坑，有什么意见欢迎交流讨论。接下来的工作就是不断优化 WSL 开发环境和相关脚本了。

最后，本来端午是打算看龙舟的，净折腾这个了，哈哈哈。

[fd9xr]

生命苦短

[murmur]

其实不考虑 node 版本，windows 自己开发前端就挺好的

[gordon96]

wsl + docker 目前体验良好，不需要 linux 开发机了，就是感觉 wsl 有点内存泄漏。。。。。

[theprimone]

@fd9xr 您用 Python ？

[theprimone]

@murmur 在 Windows 上开发体验没有给我留下什么好印象 😂 特别喜欢 Linux 下有丰富的终端可以选择，还能各种定制，Windows 好用的大概就 Git Bash 了，没太多了解，后来发现 Git Bash 也能安装 Zsh ，应该可玩性高了不少。

另外现在 Windows Terminal 有了，Windows 下的终端至少看起来也不至于太拉了 😂

[theprimone]

@gordon96 Docker 之后我也打算整一个学习学习，内存泄漏感觉是有的，偶尔 wsl --shutdown 一下

[fox0001]

没看文章，心想，不就是微软商店双击一下 Debian 或者 Ubuntu 嘛。

看了下文章，原来很大部分都是 Linux 方面的配置了。

[theprimone]

@fox0001 安装当然很简单啦，追求的怎么实现始终如一的开发体验 😄

[azusematsuri]

powershell 现在可以装很多插件了，还有 oh-my-posh 美化，使用体验完全没有以前那么糟糕，可以看下这个教程
https://beebom.com/how-customize-windows-terminal-2/

[cylx3124]

@gordon96
@theprimone

wsl 1.3.10 增加了闲置内存回收，不知道实际效果怎么样 https://github.com/microsoft/WSL/releases/tag/1.3.10

Memory reclamation idle detection, drop_caches. To use add the below to %userprofile%\.wslconfig
[experimental]
autoMemoryReclaim=true

[fox0001]

@theprimone #8 我不追求始终如一的开发体验，因为不能追求。说多了都是泪…

[ty29022]

羡慕你们这种颇具仪式感的开光流程
我们 linux 用户就朴素多了，dotfile pull 下来就完事

[theprimone]

@azusematsuri 好家伙，原来 PowerShell 也可以了啊，有机会我试试。不过不知道各种命令和插件咋适配？还是说只是用来美化？

[theprimone]

@cylx3124 学习了，不过确实不好测试，但是可以保持关注

[theprimone]

@fox0001 😦 不能追求是什么说法

[dcsuibian]

我觉得像前端和 java 这种对平台依赖性不强的没有啥必要追求 wsl ，直接运行反而有更好的性能

[theprimone]

@ty29022 大佬细说，我怎么直接搜索 dotfile pull 感觉没有啥有效信息的感觉呢？倒是找到个这个 https://github.com/twpayne/chezmoi

[Frankcox]

我使用 wsl2 开发前端主要用 Vue ，但是有时候有些问题：
1.使用 npm run serve 的话有时候在 windows 里浏览器识别不到 web 服务，localhost:8080 、127.0.0.1:8080 或者 wsl-ip:8080 都无法访问。
2.不知道是不是 IO 问题，vscode 在 npm run serve 的时候编辑代码，有概率会断开 wsl2 连接，重启 wsl2 服务后才好用。

[theprimone]

@dcsuibian 开发体验是一点，其他优点的话，大概是更好的平台一致性吧，比如我本地编译跟 CI 环境基本就是一样的，甚至还有些 npm 包在 Windows 下有些奇奇怪怪的问题 😂

[theprimone]

@Frankcox 第一个问题我猜可能跟 Windows 动态端口范围有关，可以看看我这篇文章 https://juejin.cn/post/7037893084998270990#heading-3 第二个问题的话我极少数情况下会碰到 WSL 自己就终止的情况，我才可能跟内存有关系，基本都是在我开了很多东西之后才出现的。

[azusematsuri]

@theprimone 美化大概是最重要的，命令只能用 windows 体系的命令了，当然可以自己重命名，比如 New-Alias which get-command
插件我看了下其实只在用 PSReadLine ，可以根据历史记录补全命令，为了最新版的功能还装了 powershell7 。
毕竟是 win 平台，就算重 wsl ，有的时候还是要用用 powershell ，整的舒服点没毛病

[theprimone]

@azusematsuri 没毛病，抽空我也试试

[Moha]

wsl2 确实很优雅，一个终端就是 Linux ， "code ."直接打开 VSCode 项目，一直在用，没遇到什么问题。微软这一步走的做得还是不错的

[theprimone]

@Moha 没什么毛病吗？我这都是一路踩坑才到现在勉强算是如鱼得水的感觉 😂

[xiangyuecn]

贵圈真麻烦😅 我写代码经常一个 notepad 就够用了，除了 xcode 这玩意没办法外

[vituralfuture]

看来 op 的 blog 觉得到熟练使用 wsl 这一步真是太辛酸了，踩了不知道多少坑

[AloneHero]

楼主有遇到读写极慢的情况吗，我经常遇到跨文件引用的智能提示非常慢的情况，要加载很久才能提示

[phiysng]

Hyper-V 的那个动态端口非常坑，Hyper-V 保留了一堆端口，自己也没有用，也不准你用，netstat 也看不到占用，你不知道这件事真的一头雾水。

[Aloento]

@israinbow 请置评

[Routeros]

@phiysng 纳尼?怎么重现?证实?

[azusematsuri]

@phiysng 对的我前两天也被这个坑了，开 hyperv 之后一开机发现 clash 等等一堆服务监听不了

[Features]

纯前端开发，没有什么比 mac 更好的
一个 npm 插件，在宿主机上运行好好的，在 WSL 上出问题就够折腾半天
生命苦短，我用 mac

[kid1412621]

VPN 支持不行

[mattxlee]

如果只是 node 开发，为什么要用 wsl?，windows 原生 node 就挺好的，配个 vim 或者 vscode 。折腾 wsl 只是为了那些必须要在 linux 下完成的事情。

[theprimone]

@xiangyuecn 这就是返璞归真吗？

[theprimone]

@vituralfuture 哈哈哈，说多了都是泪，不过死磕下来还是收获不少的。

[theprimone]

@AloneHero 我配置了保存自动 eslint fix 和 prettier format ，有时候会碰到卡很久的情况，不知道是不是你说的这种情况

[theprimone]

@phiysng 确实，当我看到有人提示也是大受震撼，原来是 Hyper-V 导致的吗，不过我记录的这两个命令不是能查看吗？

netsh int ipv4 show excludedportrange protocol=tcp
netsh int ipv4 show dynamicport tcp

[MEIerer]

wsl 启动有点卡，不知是不是我装插件多了的问题

[theprimone]

@Features 这不巧了吗，我上个工作就是用了公司一年多的 macbook ，真不习惯，还是 Windows + WSL 舒服，哈哈哈。

[theprimone]

@kid1412621 我是用的 Windows 上的，如果装在 WSL 上，没有 UI 多少有些不方便了，而且刚好 Windows 不也得用吗。不过最好还是软路由之类的外设方案感觉更舒服，虽然我一直想弄，但是第一步买哪个设备我都不清楚 😂

[theprimone]

@mattxlee 我追求的时更好开发体验和可玩性，能够拥抱整个 Linux 生态，这不是很酷吗？符合我对科技的想象，虽然还没深入使用 Linux ，但是发展潜力巨大 😂 至于开发体验包括了终端美化和插件支持，还有上文说过的平台一致性，能跟 CI 环境一致，以及可以避免一些跨平台的奇葩问题等等。

[theprimone]

@MEIerer 现在我家里的设备服役有点久了，感觉启动也有点慢，我配置了开机启动 WSL ，再加少重启可以解决 😂

[lilei2023]

配合 Windows Terminal 终端目前体验还不错， 就是存在内存泄漏，还不能再配置文件里面限制，否则一旦开多了项目就容易卡死，只能重启，这个很蛋疼。不过没用过 最新的 1.3 版本

[ShadowPower]

初略看了一下楼主的文章，大多数内容还是用 Linux 开发时折腾的那些
我当年还在折腾 WSL1 用 Docker 、WSL2 用 Systemd 之类的……

[yunyuyuan]

同前端，工作机 arch ，个人机 Windows 。用过 wsl 闪退就弃了，而且有一个 wsl 无法解决的问题：nvim 自动切换输入法的插件，无法对微软拼音生效。非常影响开发体验

[leeyuzhe]

我给 wsl 以及 jetbrain 提了无数 bug ，直到上个月对我而言才没有已知 bug 。你知道我这两年怎么过的吗.jpg

[theprimone]

@lilei2023 内存限制我记得可以的吧 https://learn.microsoft.com/en-us/windows/wsl/wsl-config#configuration-setting-for-wslconfig 不是这个吗？

[theprimone]

@ShadowPower 毕竟是前端，哈哈哈，大部分是 Windows 和 WSL 互操作的问题。不过现在使用 Docker 和 systemd 还有坑吗？我刚尝试 systemd 管理 sshd 呢。

[theprimone]

@yunyuyuan arch 太秀辣。才知道还有自动切换输入法的插件，这是根据什么判断哦？另外我没有自带输入法 😂

[theprimone]

@leeyuzhe 是两者结合上的 bug 吗？

[lilei2023]

@theprimone 是可以设置，但设置了太小的话，一旦开太多的项目，就会卡死！我后来索性就放开了

[mdn]

我的 mbp 的性能比较差，目前在用 vscode ssh 开发，有几个问题，wsl 应该也存在
1. 不擅长开发需要 GUI 的应用，比如 playwright ，只能 headless 启动
2. 开发微信小程序也比较困难

[theprimone]

@lilei2023 跟我一样，我也设置过，发现不如不设置

[Moha]

@theprimone #24 当然是有的，不过之前经历过 Linux 的各种问题，解决的比较快。也可能是因为我还没有用的那么深，基本使用还是非常香的

[theprimone]

@mdn WSL 2 支持 GUI 了，之前用 puppeteer 控制 GUI Chrome 还凑活，微信小程序好像是不太行？没试过 😂

[tairan2006]

前后端都写过，前端确实还是 mac 不折腾。

后端就算了，很多三方库都没 arm 的动态链接库…直接用 linux 最简单，wsl 勉强能用。

[phiysng]

@Routeros 你正常开启 WSL 就有概率碰到这个问题，看你会不会恰好使用到 Hyper-V 保留的端口。我在多台 Windows PC 上都遇到过这个问题。

这个端口似乎是 Windows 启动后一段时间才被保留，刚开机是可以使用的。

[phiysng]

@theprimone 一开始不知道啊😂，一般遇到端口绑定失败第一反应是 netstat 看一眼哪个进程已经占据了端口。

[linhua]

@phiysng
netsh int ipv4 set dynamic tcp start=49152 num=16384
netsh int ipv6 set dynamic tcp start=49152 num=16384

https://zhaoji.wang/solve-the-problem-of-windows-10-ports-being-randomly-reserved-occupied-by-hyper-v/

[ilaipi]

我最近整理了一个脚本，自动安装 scoop ，完成 node16 18 ，python2 python3 的安装，同时配置 Windows terminal ，使用 git bash 做默认，安装好 zsh ，配置好 p10k 主题。之前用 wsl2 用了好久，现在更想用这个模式了。

配置： https://github.com/ilaipi/dotfiles

最近有空再折腾折腾，把一些目录做成可传参修改的

[theprimone]

@ilaipi 秀的，不过这个有个问题怎么导出开发环境的镜像呢？像 WSL 我直接导出就好了，搞个 U 盘就可以哪里没有装哪里了，哈哈

[ilaipi]

@theprimone #62 我是 nvim 开发，所以不太需要导出。nvim 在脚本里都安装好了，其实还可以把 nvim 的配置也完善到脚本里。代码的话，基本都提交到 GitHub ，所以基本不需要迁移，到那里跑一下脚本就行

[theprimone]

@ilaipi 这就不明觉厉了，nvim 当 IDE 吗？

[hgaogao]

ip 怎么固定手机 debugger 很烦

[ilaipi]

@theprimone #64 搞 node ，不需要 ide ，就编辑器+终端，nvim 反正是用习惯了觉得编辑功能太舒服了

[theprimone]

@ilaipi 恐怖如斯，能有 IDE 那样的代码补全和 TypeScript 支持吗？

[theprimone]

@hgaogao Windows 主机 IP 固定好之后，Windows 再来个脚本去动态更新要转发到 WSL 端口，类似 https://medium.com/geekculture/enable-ssh-access-into-wsl-from-a-remote-computer-f2e4a962430 中 Use Task Scheduler to automate the script 的方案。

[dengqing]

我是台式机 WSL + docker + devcontainer ，然后自己的 mac 有些项目会 ssh 到 container 了 （我有公网 ip ）。这么做主要是 devcontainer 可以给我一个干净的开发环境，因为有些项目拉下一跑全是跑错。

这套方案和 github codespaces 类似。之前用 github codespace 比较多 然后太贵了就自己搭了 刚好有限制的台式电脑

这是我用的配置 https://github.com/Dunqing/dotdevcontainer

[ilaipi]

@theprimone #67 都有，eslint 这些都没问题😃

[theprimone]

@dengqing 有公网 IP 可以的

[theprimone]

@ilaipi 大佬能截个图看看开发时的效果吗？👀

[ilaipi]

@theprimone #72 在 wsl 2 里可以用 tmux ，Windows terminal 现在本身也支持窗口拆分，还不错

[theprimone]

@ilaipi 秀啊，终端能玩成这样 😦

[charlie21]

考虑使用 LxRunOffline 导入导出和创建 wsl
/t/700201

powershell 以管理员权限运行
choco install lxrunoffline

https://p3terx.com/archives/manage-wsl-with-lxrunoffline.html
https://hfakhraei.github.io/Install-multiple-instance-of-same-Linux-Distribution-on-WSL
https://www.junmajinlong.com/others/custom_wsl_install_location/

[theprimone]

@charlie21 发现 star 过，不过现在看起来好像没咋维护了？

[charlie21]

能正常运行

[hjl233]

我的 wsl 直接桥接物理网络

[theprimone]

@hjl233 听起来有点神奇啊 😦