愉快的使用 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 的路径书写方式不一致问题：

www.howtogeek.com/137096/6-wa…

系统要求

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

咱们能够在设置中选择系统—-关于-—Windows 规格，来查看 Windows 版本号，大于 16215 就能够了：

安装

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

首先，以管理员身份打开 PowerShell 并运行：

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
复制代码

以后，在 Microsoft Store 搜索 Linux，安装想要的 Linux 分发。

我这里选择的 Ubuntu，你能够装不少分发，并非只能安装一个。

Microsoft Store 装软件十分简单，只须要点一点就行了。以后开始菜单中就会出现 Ubuntu 的icon

点击启动！

使用

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

启动后就和使用虚拟机同样的感受：

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

跨平台执行

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

Windows 执行 bash

在 Windows 命令行中，能够直接使用 bash:

bash -c "sudo apt-get update"

bash 执行 windows

Linux 子系统中，只需在命令中加上 .exe 后缀，就能够直接执行：

试了一下甚至能够直接执行 chrome.exe，不过并无发现有什么特殊的地方。

开发环境配置

安装 oh-my-zsh

安装 oh-my-zsh 和在 Mac 中是同样的， 直接执行：

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

安装 Node.js

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

咱们直接在子系统中执行如下命令来安装 n 和 Node.js：

curl -L https://git.io/n-install | bash
复制代码

安装 git

因为是 Ubuntu，咱们能够直接使用 apt 来安装 git：

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 中进行开发。

首先咱们须要在 Windows 侧安装 Visual Studio Code Insiders：code.visualstudio.com/insiders/，安装过程当中记获得勾选上 添加到PATH 选项，不然咱们不能直接经过code-insiders命令开启 VS Code。

以后就能够在 WSL 中打开项目目录，经过 code-insiders . 打开 VS Code。第一次打开时须要安装一些依赖：

打开后能够看到在项目目录名后会增长 [WSL] 字样：

打开命令行试试，已是在 WSL 环境中了：

为了使用方便，咱们把默认 terminal 从 bash 改为 zsh，在 VS Code 的选项中修改：

如今 terminal 已是 zsh 了：

在 WSL 中进行开发

咱们用 node 打印一下项目路径试试，能够看到路径问题没有了🎉：

后记

虽然 macbook 十分高大上，但我仍是一直但愿能用 Windows 进行开发，一个最直接的缘由是 mac 实在是太贵了😓，钱不花够，性能会比 PC 差不少。如今用的 MacBook Pro：

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