打造“终极”前端Windows开发环境

2,139 阅读2分钟

打造“终极”前端Windows开发环境

序言

众所周知在Windows上开发往往会遇到很多莫名其妙的开发环境问题,此时肯定有人说使用Linux来开发不就好了。诚然,Linux开发是解决了开发环境的问题,但是又会出现诸如微信、QQ、钉钉等软件无法使用的各种问题,那么难道没有一种很好的解决方案吗?当然有!本文将打造一个“终极”前端Windows开发环境 因为本人是前端所以只针对Vscode编辑器来开发

思路

在Vscode上有一款扩展插件 Remote-WSL 可以用于远程连接到 WSL 上的代码仓库,这样我们就可以通过这个插件远程连接到WSL上进行开发,此时Vscode的终端就已经是WSL的终端了,到这一步我们已经可以享受到Linux上的开发环境了,并且由于我们的宿主系统依旧是Windows,上述软件当然都可以正常运行。

前言图片.png

0x00 安装WSL2

安装WSL2的方法非常简单,打开微软商店-->输入WSL2选择一个你喜欢的Linux发行版即可,这里我选择的是Ubuntu 20.04 LTS

0x01.png

这里推荐一个在Windows上很好用的终端工具 Windows Terminal 安装的方式一样也是在微软商店上搜索即可

image-20220107172732102.png

这些都安装好了之后,打开Windows Terminal就可以看到你安装的Linux发行版了。

image-20220107172921796.png

自此WSL就是安装好了。

0x01 安装Remote-WSL并且连接上WSL

首先打开Vscode,在扩展商店中搜索Remote-WSL并且安装就是前言里面的那个

安装好了之后Vscode的侧边栏会显示多一个图标:

image-20220107173422192.png

点进去我们就可以发现,之前安装好了的WSL

image-20220107173506021.png

右键选择连接到WSL之后,注意下面的的连接标识

image-20220107173557729.png

此时我们就已经成功的连接到了WSL的内部,我们可以通过打开文件夹 or 从远程仓库Clone我们的代码下来,这样就可以开始愉快的开发了!

0x02 使用SourceTree管理WSL内的代码仓库

SourceTree 是一款开源免费的Windows/Mac的Git GUI客户端。SourceTree对WSL也有支持,只需要使用\\wsl.localhost\${你的WSL发行版}\${你的项目地址}即可管理你在WSL中的项目。比如说我的WSL是Ubuntu 20.04 LTS 项目地址是在用户文件夹下的hello_world,那么地址就是\\wsl.localhost\Ubuntu-20.04\home\${你的用户名}\hello_world

image-20220107175017346.png

0x03 开始愉快的开发吧!