在 WSL 上的 Arch Linux 里运行 VSCode

2018-07-25 发布#技术

上次我们用 LxRunOffline 安装了 Arch Linux，下一步就要在 WSL 之上构建开发环境了。开发环境的一个很重要的部分就是代码编辑器（或者 IDE），这里就要在 WSL 上安装运行 VSCode。

¶准备工作

本文假设你已经有基本的 Arch Linux 使用经验；
你需要在 WSL 上安装好 Arch Linux，并配置了 Arch Linux 中文社区仓库；
安装 VcXsrv。（虽然 VcXsrv 有个导致 VSCode 花屏的 bug，但是我不喜欢那个夹带了一堆我用不到的功能的 MobaXterm，所以就还是用 VcXsrv 了。这个 bug 的解决方案是：当花屏时，使用 Ctrl + Shift + P 输入 reload 回车重新加载窗口。）

¶安装字体

安装你喜欢的字体。我的选择是 noto-fonts noto-fonts-cjk noto-fonts-emoji otf-fira-code。

安装字体后需要设置默认字体。编辑 ~/.config/fontconfig/fonts.conf：

 1<?xml version="1.0"?>
 2<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
 3<fontconfig>
 4
 5  <match target="font">
 6    <edit name="embeddedbitmap" mode="assign">
 7      <bool>false</bool>
 8    </edit>
 9  </match>
10
11  <match>
12    <test qual="any" name="family">
13      <string>serif</string>
14    </test>
15    <edit name="family" mode="prepend" binding="strong">
16      <string>你喜欢的英文衬线字体，如 Noto Serif</string>
17    </edit>
18  </match>
19  <match target="pattern">
20    <test qual="any" name="family">
21      <string>sans-serif</string>
22    </test>
23    <edit name="family" mode="prepend" binding="strong">
24      <string>你喜欢的英文非衬线字体，如 Noto Sans</string>
25    </edit>
26  </match>
27  <match target="pattern">
28    <test qual="any" name="family">
29      <string>monospace</string>
30    </test>
31    <edit name="family" mode="prepend" binding="strong">
32      <string>你喜欢的等宽字体，如 Fira Code</string>
33    </edit>
34  </match>
35
36  <match>
37    <test name="lang" compare="contains">
38      <string>zh</string>
39    </test>
40    <test name="family">
41      <string>serif</string>
42    </test>
43    <edit name="family" mode="prepend">
44      <string>你喜欢的中文衬线字体，如 Noto Serif CJK SC</string>
45    </edit>
46  </match>
47  <match>
48    <test name="lang" compare="contains">
49      <string>zh</string>
50    </test>
51    <test name="family">
52      <string>sans-serif</string>
53    </test>
54    <edit name="family" mode="prepend">
55      <string>你喜欢的中文非衬线字体，如 Noto Sans CJK SC</string>
56    </edit>
57  </match>
58  <match>
59    <test name="lang" compare="contains">
60      <string>zh</string>
61    </test>
62    <test name="family">
63      <string>monospace</string>
64    </test>
65    <edit name="family" mode="prepend">
66      <string>你喜欢的中文等宽字体，如 Noto Sans Mono CJK SC</string>
67    </edit>
68  </match>
69
70</fontconfig>

¶安装 VSCode

安装 visual-studio-code。使用 XLaunch 启动 VcXsrv，在倒数第二步勾选“Native openGL”。这里还建议勾选“Clipboard”并取消勾选“Primary selection”以获得最佳体验。（如果你担心每次都要手动勾选太麻烦的话，在最后一步点击“Save configuration”导出设置，以后就可以直接双击打开导出的设置运行 VcXsrv 了。）最后设置环境变量，在 ~/.bashrc 内添加以下内容：

1export DISPLAY=localhost:0.0
2export LIBGL_ALWAYS_INDIRECT=1

重启 BASH，然后就可以执行 code 运行 VSCode 了。

¶中文输入

WSL 内的输入与 Windows 的输入法并不通用，需要在 WSL 内单独安装输入法。安装 fcitx fcitx-gtk2 fcitx-configtool，然后执行 fcitx 即可启动输入法。在 fcitx 启动后运行 fcitx-configtool 进行设置。在 ~/.bashrc 内设置环境变量：

1export GTK_IM_MODULE=fcitx
2export QT_IM_MODULE=fcitx
3export XMODIFIERS=@im=fcitx

重启 BASH，运行 code，就可以使用中文输入了。

¶美化主题

系统默认的外观非常丑陋。你可以安装自己的 GTK+ 2 主题、图标主题、鼠标指针主题来美化。我使用的是 gnome-themes-extra gtk-engine-murrine arc-icon-theme arc-gtk-theme 和 windows8-cursor（AUR）。

安装好软件包之后需要分别进行设置。编辑 ~/.gtkrc-2.0 应用 GTK+ 2 主题和图标主题：

1gtk-icon-theme-name = "<图标主题>"
2gtk-theme-name = "<GTK+ 2 主题>"
3gtk-font-name = "<字体名称> <字号>"

例如：

1gtk-icon-theme-name = "Arc"
2gtk-theme-name = "Arc-Dark"
3gtk-font-name = "Noto Sans 10"

编辑 ~/.icons/default/index.theme 应用鼠标指针主题：

1[icon theme]
2Inherits=<鼠标指针主题，如 Windows8-cursor>

Enjoy~

到这里为止，整个图形环境都配置完成了。撒花🎉！