建议立刻将 WSL + VSCode 作为你的最强生产力环境,起飞吧

发布于:2024-04-28 ⋅ 阅读:(24) ⋅ 点赞:(0)

为什么要用 WSL

Cygwin 和 Git Bash 都是 Windows 上的终端、双系统或者虚拟机也是常见的解决方案,但是它们都存在一些问题,极其不利于需要 Linux 和 Windows 的开发者,无法做到既要又要。

而 Visual Studio Code WSL 扩展允许我们直接从 VS Code 使用 Windows Subsystem for Linux (WSL) 作为全职开发环境。我们可以在基于 Linux 的环境中进行开发,使用特定于 Linux 的工具链和实用程序,并在 Windows 上舒适地运行和调试基于 Linux 的应用程序。

WSL + VSCode 现在强大到下载编译和查看 AOSP 都可以,简直香的不行,话不多说,进入正题。

打造最强大的 WSL + VSCode 环境

安装配置 WSL

  1. 打开 Windows 的 Microsoft Store,搜索 wsl 并安装 Ubuntu。

a1.png

  1. 安装完后点击启动,如果有报错则按照错误提示开启 BIOS 的虚拟化,同时在控制面板 - 程序 - 启用或关闭 Windows 功能中开启 Windows Subsystem for Linux 和 虚拟机平台。

a2.png

  1. 然后从 Windows 的开始中搜索 Ubuntu,打开 Ubuntu,如果终端进入正常则说明安装成功 。

  2. 默认安装位于 C 盘,如果你的磁盘空间不够,可以修改迁移下已经安装的 Ubuntu 的位置。

     # 先看下自己安装的 WSL 名字是什么,下面是我的名字是 Ubuntu-22.04,你要做替换
     wsl -l
     # 进入 D 盘,然后新建 wslubuntu 文件夹,你可以叫其他名字,用来承载新迁移的目录
     mkdir D:\wslubuntu
     cd D:\wslubuntu
     # 接着开始迁移
     wsl --export Ubuntu-22.04 d://wslubuntu//ubuntu-22.04.tar
     wsl --unregister Ubuntu-22.04
     wsl --import Ubuntu-22.04 d://wslubuntu//ubuntu-22.04.tar
     # 再次使用 wsl -l 命令查看,然后启动 Ubuntu-22.04 看下是否迁移正常。
    

安装配置 VSCode 插件

  1. 怎么安装 VSCode,可以参考 ,不再多说,以及怎么安装你喜欢的插件也不再多说了。
  2. 这里我们着重需要给 VSCode 安装 WSL 插件,打开 VSCode,点击左下角插件图标,搜索 WSL,安装插件。

a3.png

VSCode 以及 WSL 插件使你能够直接从 VSCode 使用 WSL 作为实时开发环境。 我们可以无缝体验到:

  • 在基于 Linux 的环境中进行开发
  • 使用特定于 Linux 的工具链和实用程序
  • 从 Windows 轻松运行和调试基于 Linux 的应用程序,同时保持对Windwows 下譬如 Office 等生产力工具的访问
  • 使用 VSCode 内置终端来运行选择的 Linux 发行版
  • 利用 VSCode 签到的 IDE 扩展功能,譬如 Intellisense 代码提示补全、linting、调试支持、代码片段和单元测试等
  • 使用 VSCode 的内置 Git 轻松管理版本控制
  • 直接在 WSL 项目上运行命令和 VSCode 扩展
  • 在 Linux 或已装载的 Windows 文件系统(例如 /mnt/c)中编辑文件,而无需担心路径问题、二进制兼容性或其他跨 OS 难题

说到底就是 WSL + VSCode,让你可以像在 Linux 上开发一样在 Windows 上开发,既能享受 Windows 的开发环境,又能享受 Linux 的开发环境,非常香。

WSL + VSCode 常规使用

有两种打开方式关联 VSCode,一种是直接在 WSL 中打开 VScode,另一种是在 VSCode 中打开 WSL。

  1. 在 WSL 中打开 VSCode,在终端输入 code .,然后就可以在 VSCode 中开发了。

    前提你已经启动 WSL 终端然后在 Ubuntu 子系统中通过命令行新建了文件或文件夹,然后在 VSCode 中开发。

a4.gif

   上面 code 命令打开时只有首次需要走下载配置的过程,之后就可以直接打开。

2. 在 VSCode 中打开 WSL 的项目。

通过使用 VSCode 快捷方式 CTRL+SHIFT+P 调出命令面板,键入 WSL,你将看到可用的选项列表,你可以在 WSL 会话中重新打开文件夹等。

a5.gif

WSL + VSCode 原理架构

为了更好的使用 WSL + VSCode,这里简单解释下原理架构如下图所示:

architecture-wsl.png

对于 WSL 中使用 Windows 磁盘路径的问题也是无缝使用的,可以在 WSL 中访问 Windows 文件系统(例如 /mnt/c 就是 windows 的 c 盘)中的文件,而无需担心路径问题、二进制兼容性或其他跨操作系统挑战。

VS Code WSL 内部的扩展

首次使用 WSL 的 VSCode 时你会发现原来你在 Windows 下安装的插件,部分在 WSL 下是完全无法使用的,因为 WSL 是一个独立的 Linux 环境,它没有安装 VSCode 的插件,所以需要我们手动安装。

因为 VSCode 在两个位置之一运行插件:

  • 本地 UI/客户端
  • 在 WSL 中运行

基于上面的 WSL + VSCode 原理架构和插件运行位置场景,我们可以得出结论,影响 VSCode UI 的插件(例如主题和代码片段等)是在本地 Windows 上安装的,其他大多数插件是在 WSL 中运行,这也就是为啥原来你在 Windows 下安装的插件,部分在 WSL 下是完全无法使用的根因,现象如下:

a4.png

我们可以在插件搜索界面选择过滤@disabled且显示了上图 Install in WSL 的插件,然后点击 Install in WSL,就可以在 WSL 中安装使用了。

开始你的生产力实践花活

到此你的 WSL + VSCode 无敌开发环境已经搭建好了,妥妥的生产力提升。你如果是一个 android 开发且需要编译查看 aosp 源码,又苦于使用的是 Windows 则现在就不用苦恼了,这不就是你的梦中情境吗?

这里我们以 WSL + VSCode 模拟开发具备大型工程化管理的 C/C++、Rust 等开发环境,让你领略下在 Windows GUI 中写 Linux 平台代码并编译的爽快感。

以下案例均在 Ubuntu 子系统中编译运行,而代码编写及调试均在 Windows 上 VSCode 中完成。

基于现代化 CMake + Ninja 的 C/C++ 开发体验

下图演示了我位于 WSL 环境的目录下的一个 CPP 项目的代码编写及编译运行过程(使用了 VSCode 的 CMake Tools 插件进行整个工程管理和编译):

a6.gif

下图演示了对上面工程在 WSL 的 Ubuntu 终端中通过命令行编译运行的效果:

a7.gif

下图演示了我位于 WSL 环境的目录下的一个 CPP 项目的代码 DEBUG 调试过程:

a8.gif

基于最时髦的 Rust 语言开发体验

上面体验了 C/C++ 开发,接下来我们试试 Rust。

下图演示了我位于 WSL 环境的目录下的一个 Rust 项目的代码编写及编译运行过程:

a9.gif

下图演示了对上面工程在 WSL 的 Ubuntu 终端中DEBUG 调试的效果:

a10.gif

简直强大的一逼,不接受反驳(当然,内存调试确实得承认他只是个编辑器扩展的 IDE,和专业的没法比,但是日常足矣)。

科学上网打通问题

Windows 下科学上网的方法有很多,这里我推荐使用 Clash Verge,但是安装配置了 WSL 后你会发现 WSL 里面终端无法科学上网,这个问题很简单。

为 WSL 内开启科学上网前ping www.google.com无法走通。

我们在 Windows 下的 Clash Verge 的设置中开启 Tun 模式就行,如下图:

a11.png

然后你在 WSL 内进行ping www.google.com可以走通,对于策略的控制依然在 Windows 下 Clash 中切换即可。

对于 WSL 中 VSCode 或插件需要科学上网可以对 VSCode 的设置进行如下配置:

a12.png

总结

工欲善其事必先利其器,磨刀不误砍柴工,开启你的新质生产力环境吧。

本人日常 Mac(x86 + Apple Silicon)、Windows、Ubuntu 多平台使用,基于自身诉求来说,如果非要取一个能满足自己百分之 95% 开发生产力的强大并集,那么 WSL + VSCode 就可以了。

新媒体简约大气横版二维码__2024-04-10+23_48_13.jpg

demo.png


网站公告

今日签到

点亮在社区的每一天
去签到