Dev on Windows with WSL

# Visual Studio Code

TIP

以下步骤适用于 Windows 这边安装的 Visual Studio Code。2019 年 6 月的今天，我不仅因为 这里陈述的理由 推荐 VS Code，更因为 VS Code Stable 已经通过 Remote 插件家族直接支持了 WSL 下的开发调试。一句话：如果你希望使用 WSL 作为你的主要开发环境，请直接考虑 VS Code。

# 下载

WARNING

请注意，在 Windows 侧安装过程中务必：

  1. 安装至 C 盘（否则会有路径与访问权限的问题）
  2. 在「选择其他任务」界面勾选「其他」下的全部四个选项（为了后面在 WSL 中直接调用 code 命令来打开 Visual Studio Code 打下基础。）

DANGER

在 Windows 文件夹与文件中出现的名字不能有特殊符号，包括 Emoji，否则会出现无法识别 WSL 中的 Git 路径和无法打开终端直接进入相应文件夹的问题。

下载安装 Visual Studio Code 在这里 > Visual Studio Code | Code editing. Redefined.

# Remote-WSL 插件 new

前些天，VS Code 官方团队终于放出了正式的对 WSL 环境下利用 VS Code 开发的组件包：Visual Studio Code Remote - WSL，详见：Developing in WSL。

Remote-WSL 组件包已经正式上线 VS Code Stable 版本。可以正常使用。

# 安装并启动 Remote-WSL 插件 new

在 VS Code 插件中搜索「Remote - WSL」之后即可下载安装。

如果你在左下角选择 Remote 环境中选择了「Remote-WSL: New Window」，VS Code 会默认开启一个 Remote 环境的新窗口，之后会在其中下载必要的 VS Code Server，用来沟通 Remote 环境和本机环境。

上面就是 VS Code Server 在 WSL 环境中的下载过程，之后我们 VS Code 的新窗口就处于 WSL 环境中了。

# 在 WSL 环境中安装 VS Code 插件 new

需要了解的重要的一点是：VS Code 在 Remote 插件下的使用和在本机下的使用实际上是两个环境，插件系统并不共享。因此，我们一旦开启了 WSL 的 Remote 环境，所下载的插件也都是在这个环境下才能使用的。

以 Go 语言的开发环境插件为例子：如上图，可以看到，在 WSL 的 Remote 环境下下载的插件都主动标明了「Install on WSL」的标签。

同时，如上图侧边栏中显示的已安装插件：VS Code 为我们区分了本地安装的插件，和 WSL Remote 环境下安装的插件。当然，本地安装的插件（比如配色主题和图标主题等等）我们也是可以直接使用的。

# 打开 WSL 环境下的文件 new

打开文件这里应该是 Remote 环境和本地环境最不同的地方所在了。现在 WSL 下的全部文件我们都可以直接用 VS Code 打开并修改，比如曾经在 Linux 分区（以 /home/spencer/ 为例）在 Remote-WSL 的插件下就可以直接显示并打开，下图是一个例子：

当然，我们也可以通过 /mnt/C/Users/.. 来访问 Windows 用户文件夹下的内容，如下图例子：

# 默认的 WSL 终端 new

在 WSL 环境下的 VS Code 打开的终端默认就是 bash，也就是 WSL 的终端环境。

# 问题（不存在了！）deprecated

WARNING

这些问题在 2019 年 5 月，VS Code 官方团队实现了 Remote-WSL 插件之后基本不复存在了。

目前存在的一个问题是：VSCode 和 WSL 侧的工具链兼容性都很糟糕（除了 Node.js），都需要一定的配置才能丝滑工作。这也是一个当前微软 VSCode 各大语言插件组和 WSL 开发组都知道并在解决的问题（参考 VSCode Python 插件 Issue #67）。

由于 WSL 是一个 Runtime 环境，而 VSCode 只和 Windows 侧的组件进行沟通，因此当前一个比较好的解决方法是：在 Windows 侧手动创建一些脚本帮助 VSCode 和 WSL 侧安装的组件沟通。详见 Python 配置板块。

# 参考配置 deprecated

TIP

VS Code 配色方案因人而异，大家都有自己不同的喜好，这里仅仅留作参考。

为了方便参考，我使用的 Visual Studio Code 具体配置如下：

{
    "editor.fontFamily": "'Operator Mono', 'Iosevka', 'Sarasa Mono T SC', monospace"
}

{
    "workbench.colorTheme": "Cobalt2"
}
  • 图标方案：
{
    "workbench.iconTheme": "material-icon-theme"
}

← 集成终端使用 WSL →