VS codeで表示がおかしい

Visual Studio CodeとVirtualBox

VirtualBox上でubuntu16.04を動かしていて、Visual Studio codeをインストールしたら、動作がおかしい。

起動はするものの、白い矩形が表示されて、移動できない。
消えない。ウインドウサイズを変えると、新たに現れたり…。

まあ、こんな感じになってしまう。

ちなみに、ホストマシンはWindows10 / MacOS Sierra のどちらでも再現する。

vscodeを終了すると消えることから、vscode自体に問題がある。

調べてみると、gpuとの相性が悪いらしい。

【解決方法】

1. Virtualboxの3DアクセラレーションをOFFにする。
2. 起動時にオプションを付ける
3. 起動スクリプトにオプションを付ける

これぐらいしか無い。

ただし、3Dアクセラレーションをオフにすると、 vmのフォーマンスが劇的に悪くなる。Ubuntuの場合Dashboardの表示がのっそりになったりして、ストレスが大きいのお勧めしない。

そこで、起動時オプションを付加する方法が確認するには簡単。

$ code --disable-gpu

これだけで、GPUを使わずに動作する。
すると、白い矩形や窓は表示されなくなり、まともに動作するようなる。

ところが、この方法は、 端末（terminal）からの起動しか効かないので、GUIの人には不便だし、毎回オプションを書くのは面倒。

そこで、最後の方法で、起動時のスクリプトにオプションを付加しておく。

CUI用

$ which code
/usr/bin/code

と返してくるので、こいつをエディタで開く。

ディストリビューションが異なる場合は、パスが違うかもしれないので、上記で確認のこと。

#!/usr/bin/env bash
#
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See License.txt in the project root for license information.
# If root, ensure that --user-data-dir is specified
if [ "$(id -u)" = "0" ]; then
for i in $@
do
if [[ $i == --user-data-dir=* ]]; then
DATA_DIR_SET=1
fi
done
if [ -z $DATA_DIR_SET ]; then
echo "It is recommended to start vscode as a normal user. To run as root, you must specify an alternate user data directory with the --user-data-dir argument." 1>&2
exit 1
fi
fi
if [ ! -L $0 ]; then
# if path is not a symlink, find relatively
VSCODE_PATH="$(dirname $0)/.."
else
if which readlink >/dev/null; then
# if readlink exists, follow the symlink and find relatively
VSCODE_PATH="$(dirname $(readlink -f $0))/.."
else
# else use the standard install location
VSCODE_PATH="/usr/share/code"
fi
fi
ELECTRON="$VSCODE_PATH/code"
CLI="$VSCODE_PATH/resources/app/out/cli.js"
ELECTRON_RUN_AS_NODE=1 "$ELECTRON" "$CLI" "$@"

と書かれているので、最後の行にオプションを付加

ELECTRON_RUN_AS_NODE=1 "$ELECTRON" "$CLI" "--disable-gpu" "$@"

これで、OK。
ただし、これは端末で開く時にしか効かない。

GUI用

GUI操作の場合（Dashboardやランチャーに登録の場合）は、設定ファイルが別になる。
/usr/share/applications/code.desktop
を編集すれば良い。

管理者で上記ファイルを開く

[Desktop Entry]

Name=Visual Studio Code

Comment=Code Editing. Redefined.

GenericName=Text Editor

Exec=/usr/share/code/code --no-sandbox --unity-launch %F

Icon=com.visualstudio.code

Type=Application

StartupNotify=false

StartupWMClass=Code

Categories=Utility;TextEditor;Development;IDE;

MimeType=text/plain;inode/directory;application/x-code-workspace;

Actions=new-empty-window;

Keywords=vscode;

X-Desktop-File-Install-Version=0.24

[Desktop Action new-empty-window]

Name=New Empty Window

Exec=/usr/share/code/code --no-sandbox --new-window %F

Icon=com.visualstudio.code

このファイルの5行目、Exec行にオプションを付加する。

Exec=/usr/share/code/code --no-sandbox --disable-gpu --unity-launch %F

これで完了。

実際にメニューから起動してみると、正常に動作するのが分かる。

ちなみに、VMを使用していないマシン上では、何の問題もなく動作するのでvirtualboxのgpu関連と上手くいっていない模様。

そのうちvirtualboxがアップデートされて動作するようになるかもしれないし、vscode側で環境見てgpuを切るかもしれないので、何にせよ時間が解決するとは思う。

それまで凌ぐ方法です…。

レイアウトを変更したら、コード部分が読みにくいCSSが適用されていたので、CUI関係の部分のみ書き直しました…。