愉快的使用 Windows 开发!WSL 安装及前端开发环境配置

WSL 全称为 Windows Subsystem for Linux,是一个为在 Windows 10 上能够原生运行 Linux 二进制可执行文件(ELF格式)的兼容层。微软早在 16 年就推出了 WSL,前一阵更是发布了 WSL 2.0,现在想必已经相对完善了。最近我在自己的 Windows 笔记本上安装了 WSL 并进行了体验,总体来说体验很棒,下面是具体的内容。


2019.6.10 更新:

VS Code 发布了 May 2019 (version 1.35),现在 Remote Development 插件包可以在稳定版的 VS Code 中使用了!


Windows Subsystem for Linux 有什么用?跟虚拟机有什么区别?

相对于虚拟机,Windows Subsystem for Linux 有以下优点:

  1. 性能更好。

    由于实现更加底层,所以性能要比虚拟机好很多。

  2. 与 Windows 共享的文件系统。

    子系统是可以直接访问硬盘中的所有文件的,甚至可以执行 .exe 文件。

当前 Windows 有什么问题?

Windows 虽然是应用最广的桌面操作系统,但是在 web 开发领域,主流的选择却是 macOS。在前端方面,React Native 刚出的时候甚至没法在 Windows 下开发😓。用于 web 开发时,Windows 最主要的问题应该就是命令行工具了,Windows 下的 cmd 与 Linux 有很多不一样的地方。比如前一阵自己在开发中就遇到了 Windows 与 Linux 的路径书写方式不一致问题:

https://www.howtogeek.com/137096/6-ways-the-linux-file-system-is-different-from-the-windows-file-system/

系统要求

安装子系统要求 Windows 10 Fall Creators Update 及之后版本,从这个版本开始,子系统才正式对外发布,之前的版本需要打开开发者选项。

我们可以在设置中选择系统—-关于-—Windows 规格,来查看 Windows 版本号,大于 16215 就可以了:

Untitled-a391b113-61f7-4219-9458-0cc272d20e7a.png

安装

WSL 的安装已经十分简单了。

首先,打开 PowerShell 并运行:

1
wsl --install

之后,在 Microsoft Store 搜索 Linux,安装想要的 Linux 分发。

Untitled-35629728-7a3f-4421-8a20-8e3249cc0abe.png

我这里选择的 Ubuntu,你可以装很多分发,并不是只能安装一个。

Microsoft Store 装软件十分简单,只需要点一点就好了。之后开始菜单中就会出现 Ubuntu 的icon

Untitled-76f53c0f-9363-4480-a6cd-5aa491273834.png

点击启动!

使用

启动后,第一次需要初始化较长时间,之后会让设置一个系统的账号密码,和 Windows 的账号密码是有没有关系,的可以随便设,但遗忘不能找回,需要注意。

启动后就和使用虚拟机一样的感觉:

Untitled-bc9ca48e-3a4b-46c3-aa61-e03069743ca2.png

从子系统中是可以直接访问 Windows 路径中的文件的,Windows 中的磁盘挂载在了 /mnt 目录下。

Untitled-d459c3bd-a1e9-4e8f-9db6-e210c183beca.png

跨平台执行

子系统一个很强大的功能是可以跨平台执行,在 Linux 中执行 Windows 程序,在 Windows 中执行 Linux 程序。

Windows 执行 bash

在 Windows 命令行中,可以直接使用 bash:

bash -c "sudo apt-get update"

Untitled-17f9e8fc-9674-40d9-b8c7-741444acf7ba.png

bash 执行 windows

Linux 子系统中,只需在命令中加上 .exe 后缀,就可以直接执行:

Untitled-d0e8d184-204c-48db-abb7-accc4bb20159.png

试了一下甚至可以直接执行 chrome.exe,不过并没有发现有什么特殊的地方。

开发环境配置

安装 oh-my-zsh

首先安装 zsh:

1
sudo apt install zsh

安装 oh-my-zsh 和在 Mac 中是一样的, 直接执行:

1
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

顺便把 autosuggestion 也安装一下

1
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

修改 ~/.zshrc

1
2
3
4
plugins=( 
# other plugins...
zsh-autosuggestions
)

安装 build-essential

apt 中的 build-essential 包可以很方便的把 make gcc 等构建工具一次性装好。

1
sudo apt install build-essential

安装 Node.js

nvm 和 n 我没有体验出太大区别,我一般习惯使用 n 来管理 node 版本。node 的包管理在 Windows 上也有点复杂,虽然有 nvm-widnows 但是不很好用。

我们直接在子系统中执行以下命令来安装 n 和 Node.js:

1
curl -L https://bit.ly/n-install | bash

安装 git

由于是 Ubuntu,我们可以直接使用 apt 来安装 git:

1
sudo apt install git

VS Code 体验

开发环境,离不开代码编辑器。现在我们已经可以做到命令行工具运行在 Linux 下了,接下来要做的就是让 VS Code 适配 WSL。

在之前的版本,很多人试过各种办法:

  • 把 VS Code 的默认 terminal 改成 wsl.exe,但 VS Code 集成的 Git 工具还是运行在 Windows 中的。
  • 直接在 WSL 中打开 VS Code,过程十分复杂,坑也很多。

幸运的是现在已经不需要这些复杂的操作了!在 VS Code 的 insider 版本中,已经支持了 Remote Development with VS Code,Remote Development 功能可以让我们流畅的在 WSL 中进行开发。

Untitled-ba2e02d6-fea3-4c7d-ad62-b07d3926b5bc.png

首先我们需要在 Windows 侧安装 Visual Studio Code Insiders:https://code.visualstudio.com/insiders/,安装过程中记得到勾选上 添加到PATH 选项,否则我们不能直接通过code-insiders命令开启 VS Code。

然后安装 Remote Development 插件:https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

之后就可以在 WSL 中打开项目目录,通过 code-insiders . 打开 VS Code。第一次打开时需要安装一些依赖:

Untitled-36a66572-cd60-40b2-bd38-3cac3d6da450.png

打开后可以看到在项目目录名后会增加 [WSL] 字样:

Untitled-af96f548-8821-4cd6-ac69-eb720726dca2.png

打开命令行试试,已经是在 WSL 环境中了:

Untitled-717cb11a-a68d-4e52-88c4-860bf2ec12e8.png

为了使用方便,我们把默认 terminal 从 bash 改成 zsh,在 VS Code 的选项中修改:

Untitled-ec3b8438-d1e8-4c30-9000-59718e77517b.png

现在 terminal 已经是 zsh 了:

Untitled-04f61698-d250-4653-add9-49e4ce47c534.png

在 WSL 中进行开发

我们用 node 打印一下项目路径试试,可以看到路径问题没有了🎉:

Untitled-bfb9580e-b3d4-4566-9f25-f9b2bfebf3b9.png

Untitled-dd629f45-9517-4a27-9768-8d466458a9e7.png

后记

虽然 macbook 十分高大上,但我还是一直希望能用 Windows 进行开发,一个最直接的原因是 mac 实在是太贵了😓,钱不花够,性能会比 PC 差很多。现在用的 MacBook Pro:

Untitled-a81dca34-4c9c-4ebd-b649-ec90f70c8d57.png

CPU 实在是不给力。

正在变成开源公司的微软现在对开发者越来越重视了,对大家来说真是个好消息。

相关文章

  1. Windows Subsystem for Linux Overview
  2. Announcing WSL 2
  3. Awesome-WSL
  4. Setting Up Windows for Web Development
  5. Remote Development with VS Code
  6. Developing in WSL