WSL(Ubuntu 18.04)上でVS Codeを動かす

はじめに の前に(2019/06/20追記)

こちらの記事に いいね を下さる方がいらっしゃって（本当にありがとうございます）忍びないので、走り書きになりますが追記をしておきます。

以下の内容は古い話で、現状では最近出たRemote Developmentの拡張機能がベターというか最高だと思ってます。

どうぞ、そちらをお試し下さい。

はじめに

WSLでVS Codeを利用してpythonを勉強していたのですが、困ることがありました。
gitも同じなのですが、環境をWSLとWindowsの両方に用意する必要があるのです。

例えば、pipでライブラリをインストールしてVS Code上の統合ターミナル(WSL)で実行すると問題なく動くのですが、一方でVS Code上のpylintはWindows側のpython環境を参照するためエラーを表示します。

そもそも、python自体もWSL環境とWindows環境の両方にインストールしないといけません。

これが非常に嫌だったので、WSL上でVS Codeが動くように設定してみました。

対象読者 or 前提条件 or 環境

• Windows10
• WSL@Ubuntu 18.04

Xサーバ(VcXsrv)のインストール

GUIが必要となるので、まずはWindows側にXサーバをインストールします。
なんでもよいと思いますが、今回はVcXsrv Windows X Serverをインストールしました。
特に何も気にせず、デフォルトのままインストールして終わりです。

作成されたショートカット「Xlaunch」からVcXsrvを起動します。
起動時のWindow設定では「Native opengl」はOffにして、その他はデフォルトのままにしました。

インストールしたら、WSLを開いて以下のように.bashrcにディスプレイ設定をしておきます。

~/.bashrc

$ echo 'export DISPLAY=localhost:0.0' >> ~/.bashrc
$ echo 'export LIBGL_ALWAYS_INDIRECT=1' >> ~/.bashrc
$ source ~/.bashrc

VS Codeのインストール

WSL側にVS Codeをインストールします。

Running VS Code on Linux にある通り、.deb package (64-bit)から.debパッケージをダウンロードして、WSL側にインストールします。

# ダウンロード
$ wget -O code.deb https://go.microsoft.com/fwlink/?LinkID=760868

# インストール
$ sudo dpkg -i code.deb
[sudo] password for xxx:
Selecting previously unselected package code.
(Reading database ... 34960 files and directories currently installed.)
Preparing to unpack code_1.25.1-1531323788_amd64.deb ...
Unpacking code (1.25.1-1531323788) ...
dpkg: dependency problems prevent configuration of code:
 code depends on libnotify4; however:
  Package libnotify4 is not installed.
 code depends on libnss3; however:
  Package libnss3 is not installed.
 code depends on libxkbfile1; however:
  Package libxkbfile1 is not installed.
 code depends on libgconf-2-4; however:
  Package libgconf-2-4 is not installed.
 code depends on libsecret-1-0; however:
  Package libsecret-1-0 is not installed.

dpkg: error processing package code (--install):
 dependency problems - leaving unconfigured
Processing triggers for mime-support (3.60ubuntu1) ...
Errors were encountered while processing:
 code

エラーになりました。
ライブラリが不足しているようなので、インストールします。

$ sudo apt install -y libnotify4
Reading package lists... Done
Building dependency tree
Reading state information... Done
You might want to run 'apt --fix-broken install' to correct these.
The following packages have unmet dependencies:
 code : Depends: libnss3 but it is not going to be installed
        Depends: libxkbfile1 but it is not going to be installed
        Depends: libgconf-2-4 but it is not going to be installed
        Depends: libsecret-1-0 but it is not going to be installed
 libnotify4 : Depends: libgdk-pixbuf2.0-0 (>= 2.22.0) but it is not going to be installed
              Recommends: notification-daemon
E: Unmet dependencies. Try 'apt --fix-broken install' with no packages (or specify a solution).

依存関係が壊れているようなので、修復します。

$ sudo apt --fix-broken install
Reading package lists... Done
Building dependency tree
Reading state information... Done
Correcting dependencies... Done
The following additional packages will be installed:
(略)

改めてVS Codeをインストール。

$ sudo dpkg -i code_1.25.1-1531323788_amd64.deb
(Reading database ... 57957 files and directories currently installed.)
Preparing to unpack code_1.25.1-1531323788_amd64.deb ...
Unpacking code (1.25.1-1531323788) over (1.25.1-1531323788) ...
Setting up code (1.25.1-1531323788) ...
Processing triggers for mime-support (3.60ubuntu1) ...

ここでVS Codeを起動すると、ライブラリエラーが出るので以下をインストールします。

$ sudo apt install -y libxss1 libgtk2.0-0 libasound2

ここまで出来たら、起動できるようになります。

$ code

日本語環境の整備

VS Codeの日本語化

VS Codeを起動したら、拡張機能の「Japanese Language Pack for Visual Studio Code」をインストールします。

ただ、このままでは文字化けしてしまうので、日本語フォントもインストールします。

$ sudo apt-get install fonts-noto-cjk fonts-noto-hinted

これで日本語表示まではできるようになりますが、まだ日本語入力ができません。

日本語入力の設定

fcitx-mozcをインストールして日本語入力ができるようにします。

# 言語パックのインストールとロケールの設定
$ sudo apt-get install language-pack-ja
$ sudo update-locale LANG=ja_JP.UTF-8

# D-Busのインストール
$ sudo apt install -y dbus-x11
$ sudo sh -c "dbus-uuidgen > /var/lib/dbus/machine-id"

# Mozcのインストール
$ sudo apt install -y fcitx-mozc
$ echo 'export GTK_IM_MODULE=fcitx' >> ~/.profile
$ echo 'export QT_IM_MODULE=fcitx' >> ~/.profile
$ echo 'export XMODIFIERS=@im=fcitx' >> ~/.profile
$ echo 'export DefaultIMModule=fcitx' >> ~/.profile
$ source ~/.profile

インストールができたら、ファイティクスを起動します。

$ fcitx-autostart
Fcitx seems is not running
$ (INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-autoeng.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-chttrans.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-classic-ui.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-clipboard.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-dbus.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-freedesktop-notify.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-fullwidth-char.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-imselector.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-ipc.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-ipcportal.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-keyboard.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-kimpanel-ui.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-lua.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-mozc.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-notificationitem.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-punc.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-quickphrase.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-remote-module.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-spell.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-unicode.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-vk.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-x11.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-xim.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-xkb.conf
(INFO-34 addon.c:151) アドオンの設定ファイルを読み込み: fcitx-xkbdbus.conf
I/O warning : failed to load external entity "/usr/share/X11/xkb/rules/xorg.extras.xml"

[Enterキーを入力]
$ 

以下のコマンドで設定画面を開きます。

$ fcitx-config-gtk3

入力メソッドのオンオフ設定は、「Shift+Space」に変更してみました。

Mozc自体の設定ダイアログは、以下のコマンドで開けます。

$ /usr/lib/mozc/mozc_tool --mode=config_dialog

起動してみる

設定が終わったら、再度codeを起動してみます。
エディタ内で、上記で設定した「Shift+Space」によって入力メソッドのダイアログが出てくるはずです。

なお、PCを起動しなおした場合は再度「fcitx-autostart」を実行する必要があるので、自動起動設定をしておくと便利かと思います。

参考

• Visual Studio Code on Windows Subsystem for Linux
• Bash on Ubuntu on Windows + XサーバでLXDEを起動
• Running VS Code on Linux
• Ubuntu 18.04 な WSL 上に日本語入力環境を構築する