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

# はじめに の前に(2019/06/20追記)
こちらの記事に いいね を下さる方がいらっしゃって（本当にありがとうございます）忍びないので、走り書きになりますが追記をしておきます。

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

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

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

https://code.visualstudio.com/docs/remote/wsl

# はじめに
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](https://sourceforge.net/projects/vcxsrv/)をインストールしました。
特に何も気にせず、デフォルトのままインストールして終わりです。

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

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

```bash:~/.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](https://code.visualstudio.com/docs/setup/linux) にある通り、[.deb package (64-bit)](https://go.microsoft.com/fwlink/?LinkID=760868)から.debパッケージをダウンロードして、WSL側にインストールします。

```bash
# ダウンロード
$ 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
```

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

```bash
$ 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).
```

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

```bash
$ 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をインストール。

```bash
$ 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を起動すると、ライブラリエラーが出るので以下をインストールします。

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

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

```bash
$ code
```

# 日本語環境の整備

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

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

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

これで日本語表示まではできるようになりますが、まだ日本語入力ができません。
![vs_code.png](https://qiita-image-store.s3.amazonaws.com/0/138821/ee65debf-1160-29bb-513a-e6f0a26c4174.png)

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

```bash
# 言語パックのインストールとロケールの設定
$ 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
```

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

```bash
$ 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キーを入力]
$ 
```

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

```bash
$ fcitx-config-gtk3
```

![fcitx-config-gtk3](https://qiita-image-store.s3.amazonaws.com/0/138821/80d7b0a3-baf8-f326-5c02-69b7b857401e.png)

入力メソッドのオンオフ設定は、「Shift+Space」に変更してみました。
![fcitx-config-gtk3](https://qiita-image-store.s3.amazonaws.com/0/138821/25da735a-b955-4756-276e-372b922762f1.png)

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

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

![mozc_tool](https://qiita-image-store.s3.amazonaws.com/0/138821/f88fd757-b1e8-bf12-db08-9c9e82ed30c8.png)

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

![Mozc](https://qiita-image-store.s3.amazonaws.com/0/138821/f1c00a6a-589a-a6e1-bfe9-5c832093a2f5.png)

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

# 参考
- [Visual Studio Code on Windows Subsystem for Linux](https://int128.hatenablog.com/entry/2018/03/26/235159)
- [Bash on Ubuntu on Windows + XサーバでLXDEを起動](https://ponu2.blogspot.com/2016/11/bash-on-ubuntu-on-windows-xubuntu.html)
- [Running VS Code on Linux](https://code.visualstudio.com/docs/setup/linux)
- [Ubuntu 18.04 な WSL 上に日本語入力環境を構築する](https://qiita.com/maromaro3721/items/be8ce6e3cec4cbcdac00)