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

2023-06-24 12:26:22 +08:00
 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 开发环境和相关脚本了。

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

6713 次点击
所在节点    前端开发
79 条回复
ilaipi
2023-06-25 13:02:18 +08:00
我最近整理了一个脚本,自动安装 scoop ,完成 node16 18 ,python2 python3 的安装,同时配置 Windows terminal ,使用 git bash 做默认,安装好 zsh ,配置好 p10k 主题。之前用 wsl2 用了好久,现在更想用这个模式了。

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

最近有空再折腾折腾,把一些目录做成可传参修改的
theprimone
2023-06-25 15:20:57 +08:00
@ilaipi 秀的,不过这个有个问题怎么导出开发环境的镜像呢?像 WSL 我直接导出就好了,搞个 U 盘就可以哪里没有装哪里了,哈哈
ilaipi
2023-06-25 16:13:07 +08:00
@theprimone #62 我是 nvim 开发,所以不太需要导出。nvim 在脚本里都安装好了,其实还可以把 nvim 的配置也完善到脚本里。代码的话,基本都提交到 GitHub ,所以基本不需要迁移,到那里跑一下脚本就行
theprimone
2023-06-25 19:35:17 +08:00
@ilaipi 这就不明觉厉了,nvim 当 IDE 吗?
hgaogao
2023-06-25 20:05:24 +08:00
ip 怎么固定手机 debugger 很烦
ilaipi
2023-06-25 20:53:54 +08:00
@theprimone #64 搞 node ,不需要 ide ,就编辑器+终端,nvim 反正是用习惯了觉得编辑功能太舒服了
theprimone
2023-06-25 22:48:53 +08:00
@ilaipi 恐怖如斯,能有 IDE 那样的代码补全和 TypeScript 支持吗?
theprimone
2023-06-25 22:54:38 +08:00
@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
2023-06-25 23:47:38 +08:00
我是台式机 WSL + docker + devcontainer ,然后自己的 mac 有些项目会 ssh 到 container 了 (我有公网 ip )。这么做主要是 devcontainer 可以给我一个干净的开发环境,因为有些项目拉下一跑全是跑错。

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

这是我用的配置 https://github.com/Dunqing/dotdevcontainer
ilaipi
2023-06-26 07:48:05 +08:00
@theprimone #67 都有,eslint 这些都没问题😃
theprimone
2023-06-26 09:01:22 +08:00
@dengqing 有公网 IP 可以的
theprimone
2023-06-26 09:02:17 +08:00
@ilaipi 大佬能截个图看看开发时的效果吗?👀
ilaipi
2023-06-26 09:17:22 +08:00



@theprimone #72 在 wsl 2 里可以用 tmux ,Windows terminal 现在本身也支持窗口拆分,还不错
theprimone
2023-06-26 09:37:57 +08:00
@ilaipi 秀啊,终端能玩成这样 😦
charlie21
2023-06-26 12:06:42 +08:00
theprimone
2023-06-26 13:41:17 +08:00
@charlie21 发现 star 过,不过现在看起来好像没咋维护了?
charlie21
2023-06-26 14:16:59 +08:00
能正常运行
hjl233
2023-06-26 14:45:56 +08:00
我的 wsl 直接桥接物理网络
theprimone
2023-06-26 19:22:48 +08:00
@hjl233 听起来有点神奇啊 😦

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/951174

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX