VS Code の外観をいい感じに設定する

Chromebook でも Visual Studio Code (VS Code) が快適に動きます。そこでコードや文章を書いているときに集中できるよう、自分にあったカスタマイズをしておきたいところです。というわけで、Chromebook の Linux 開発環境で動く VS Code の外観を簡単にカスタマイズする方法を紹介します。

この記事の最終目標はこんな感じです。

この記事の最終目標

VS Code のインストール

VS Code のインストール方法についてはたくさん資料がありますし、公式の説明 (Learning with VS Code on Chromebooks) もあるので、ここではさらっといきます。

設定から「Linux 開発環境」を有効にします。
ターミナルから sudo apt-get update && sudo apt-get install -y gnome-keyring を実行します。
VS Code の公式サイトから deb パッケージをダウンロードします。AMD64 版と ARM64 版があり、字面が似ているので間違いやすいので注意。自分の環境に合わせて選んでください。ターミナルから dpkg --print-architecture で調べられます。
ダウンロードした .deb ファイルを、ファイルアプリからダブルクリックして開きます。
インストーラーの指示に従ってインストールしてください。

ダウンロードした .deb ファイルをコマンドラインからインストールするときは、ターミナルから sudo dpkg -i code_1.64.2-1644445741_amd64.deb のようにします。一度インストールすると apt リポジトリもインストールされますので、sudo apt update && sudo apt upgrade -y とすると最新版に更新されます。

VS Code やそれ以外の Linux アプリも日本語で利用したい場合は、Linux 開発環境のシステムのロケールを日本語にしておくと便利です。ターミナルから次のコマンドを実行しておきます。

# 日本語ロケールの設定を追加し、有効にします。
$ sudo sed -i -E 's/# (ja_JP.UTF-8)/\1/' /etc/locale.gen && \
    sudo dpkg-reconfigure --frontend noninteractive locales

# システムのデフォルト ロケールを日本語に切り替えます。
$ sudo update-locale LANG=ja_JP.UTF-8

# ロケールの切り替えを反映させるには Linux 開発環境の再起動が必要です。

インストールが終わったら、シェルフから VS Code のアイコンを開くと VS Code が立ち上がります。

インストール直後の状態

ユーザインタフェースを日本語にする

システムのロケールに日本語を設定していると、VS Code が起動したときに「表示言語を日本語にするには言語パックをインストールします。」というメッセージと「インストールして再起動」というボタンが表示されます。日本語にしたくない方は歯車ボタンを押して「Don't show again」を選びましょう。

日本語パックのインストールを促すメッセージ

ここでは日本語で話を進めますので、「インストールして再起動」ボタンを押します。すると自動的に言語パックがインストールされ、 VS Code が再起動してユーザインタフェースが日本語になっているはずです。

インターフェースを日本語に設定

タイトルバーをカスタムにする

デフォルトでは VS Code ウィンドウの上部にあるタイトルバーとメニューバーはそれぞれ独立した領域になっていますが、タイトルバーにメニューを統合して表示することもできます。エディタの領域を広げられるので、このような設定にして使っている人も多いでしょう。

設定を変更するにはメニューから「ファイル」-「ユーザー設定」-「設定」で設定を開きます。Ctrl+, でも設定画面が開きます。上部に「設定の検索」があるので、ここに「window.titleBarStyle」と入力するとタイトルバーの設定が表示されます。デフォルトでは「native」になっていると思いますので、これを「custom」にします。再起動を促されるので指示に従って再起動すると、タイトルバーの表示が変わっているはずです。

タイトルバーをカスタムに設定

ユーザインターフェースのフォントを設定する

Chromebook にインストールした VS Code のユーザインターフェイスのフォントは、デフォルトで Roboto、日本語については Noto になっています。

参考：Chromebook の Linux 開発環境におけるフォント設定

このままでも充分見やすいと思いますが、別のフォントに変更してみましょう。これは GTK3 の設定を変更すると反映されます。 DConf ではなく settings.ini の方を参照するようなので、そちらを変更します。

ここでは Koruri を設定してみましょう。ターミナルから次のようにコマンドを実行します。

# フォントを置くディレクトリを作成します。
$ mkdir -p $HOME/.local/share/fonts/Koruri

# Koruri フォントをダウンロードして展開します。
$ curl -L https://github.com/Koruri/Koruri/releases/download/20210720/Koruri-20210720.tar.xz \
    | tar xJ -C $HOME/.local/share/fonts/Koruri

# $HOME/.config/gtk-3.0/settings.ini にフォントを設定します。
$ mkdir -p $HOME/.config/gtk-3.0
$ echo -e "[Settings]\ngtk-font-name = Koruri 10" > \
       $HOME/.config/gtk-3.0/settings.ini

これで VS Code を再起動すれば Koruri が適用されているはずです。

ユーザインタフェースのフォントを変更 (上から変更前、変更後)

エディタのフォントを設定する

次に、エディタで利用するフォントをインストールします。私は普段 Fira Code Nerd Font を使っています。ベースとなっている Fira Code は合字や文脈に応じた句読点など、機能の多いフォントで使いやすいと思います。 Fira Code Nerd Font はそこに図形などのフォントを加えたものです。

ここでは Fira Code Nerd Font Mono をインストールしますが、もちろん他のフォントでも構いません。ターミナルに戻って次のコマンドを実行し、フォントをインストールします。

# フォントを置くディレクトリを作成します。
$ mkdir -p $HOME/.local/share/fonts/FiraCode\ Nerd\ Font

# Fira Code Nerd フォントをダウンロードしてインストールします。
$ curl -L -o $HOME/.local/share/fonts/FiraCode\ Nerd\ Font/Fira\ Code\ Regular\ Nerd\ Font\ Complete.ttf \
    https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/FiraCode/Regular/complete/Fira%20Code%20Regular%20Nerd%20Font%20Complete.ttf

VS Code にインストールしたフォントを設定するには、VS Code の設定から「editor.fontFamily」を検索します。「Editor: Font Familly」の設定が開きますので、先頭に「'FiraCode Nerd Font', 」と入力します。次の例を参考にしてください。

変更前）'Droid Sans Mono', 'monospace', monospace
変更後）'FiraCode Nerd Font', 'Droid Sans Mono', 'monospace', monospace

エディタのフォントを変更 (上から変更前、変更後)

あわせて合字 (リガチャー ; Ligature) も有効にしておくといいでしょう。同じ設定画面から「editor.fontLigatures」を検索すると「Editor: Font Ligatures」が開きます。この設定はなぜか settings.json で設定するようになっているので、「settings.json で編集」をクリックします。

すると設定ファイルが開きます。元はおおよそこんな感じになっていると思います。順番や数は人によって変わります。

{
    "window.titleBarStyle": "custom",
    "editor.fontFamily": "'FiraCode Nerd Font', 'Droid Sans Mono', 'monospace', monospace"
}

最後の } の直前の行のうしろに , (カンマ) を追加し、次の行に合字を有効にする設定を書いてください。すると次のようになるはずです。

{
    "window.titleBarStyle": "custom",
    "editor.fontFamily": "'FiraCode Nerd Font', 'Droid Sans Mono', 'monospace', monospace",
    "editor.fontLigatures": true
}

設定ファイルを保存すると設定が反映されます。

合字の設定を変更 (上から変更前、変更後。:= の形が変わっている)

ターミナルのフォントを設定する

VS Code 内のターミナルのフォント、エディタのフォントが利用されます。そのままで問題ありませんが、別に設定することもできますので、ここでは他のフォントをインストールして設定してみます。ここでは FiraCode Victor Mono をインストールしてみます。

# フォントを置くディレクトリを作成します。
$ mkdir $HOME/.local/share/fonts/Victor\ Nerd\ Font

# Victor Nerd フォントをダウンロードしてインストールします。
$ curl -L -o $HOME/.local/share/fonts/Victor\ Nerd\ Font/Victor\ Mono\ Regular\ Nerd\ Font\ Complete\ Mono.ttf \
    https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/VictorMono/Regular/complete/Victor%20Mono%20Regular%20Nerd%20Font%20Complete%20Mono.ttf

ターミナルのフォントの設定は「terminal.integrated.fontFamily」に設定します。初めは空の状態になっていますので、「'VictorMono Nerd Font Mono'」入力します。