在 WSL 上的 Arch Linux 里运行 VSCode

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

准备工作

  1. 本文假设你已经有基本的 Arch Linux 使用经验;
  2. 你需要在 WSL 上安装好 Arch Linux,并配置了 Arch Linux 中文社区仓库
  3. 安装 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-themewindows8-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~

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