Chromebook でVScodeをセットアップする

はじめに

Chromebook (Chromebook Plus)を購入したので、Visual Sutido Code (以下VScode)をインストールして利用可能にするまでの作業の流れをメモとして、記載していきます。

ChromebookにVScodeをインストールする記事はWeb上に多々ありますが、月日の経過で機能Updateされたのか、少しだけ手順が違う部分もありましたので、2025年2月時点のセットアップメモとして記載しています。
同様にセットアップする方の参考になればと思います。

環境

今回セットアップした環境です。

• 機種: ASUS Chromebook Plus CX34 (CX3402)
• バージョン: 132.0.6834.208（Official Build） （64 ビット）

Linux環境を有効にする

ChromebookにVScodeをインストールする前に、Linux開発環境を有効にする必要があります。

1. 設定を開く
2. サイドバーの「ChromeOSについて」から、「デベロッパー」-「Linux開発環境」を選択する
3. Linux開発環境をオンにする
4. 仮面の指示に従って、Linux環境を設定する
   - デフォルトの設定のまま
   - ユーザー名やディスクサイズは適宜
5. 終わると、ターミナルが表示される
   - ターミナルはChromebookのメニューから、いつでも開けます

Web上の記事でいくつかベータ版である旨が補記されている記事もありますが、ベータ表記がありませんでした。正式になったようですね。

Linux環境をアップデートする

ターミナル上にて、以下のコマンドで、最新の状態アップデートします。

$ sudo apt update && sudo apt upgrade -y

出来上がったLinux環境は以下の通りです。

$ cat /etc/os-release 
PRETTY_NAME="Debian GNU/Linux 12 (bookworm)"
NAME="Debian GNU/Linux"
VERSION_ID="12"
VERSION="12 (bookworm)"
VERSION_CODENAME=bookworm
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"
$ 

VScodeをインストールする

VScodeは、公式サイトから、パッケージをダウンロードして、インストールします。
VScodeをインストールするために、ブラウザでVScodeのダウンロードページへ行きます。

ダウンロードするパッケージを選択するため、自分のChromeboookのアーキテクチャを確認します。ターミナル上で以下のコマンドを実行します。

$ dpkg --print-architecture
amd64
$

今回、amd64でしたので .debパッケージ(debian)のx64をダウンロードします。

ダウンロードしたファイルを、ファイルエクスプローラー上で、ダブルクリックすると、インストールが始まります。

インストールが完了すると、Chromeのメニューに「Visual Studio Code」が追加されています。
以後、ChromeメニューからVScodeを利用できます。
VScodeのアイコンを「シェルフに固定」しておくと便利ですね。

VScodeインストール後の設定

もろもろ、好みに合わせて、VScodeをセットアップしましょう。

デフォルトではメニューは英語表示になっています。

日本語は何も設定しなくても変換、入力できました！
ただ、フォントがちょっとおかしいです（Linuxでありがちな中華フォントっぽい）ので、好みで。

VScodeの日本語フォント変更

フォントまわり、あまり詳しくないですが、今回はNotoフォントを以下のようにインストール＆設定。

1. ターミナルでfontをインストール

   $ sudo apt install fonts-noto-cjk fonts-noto-cjk-extra
   

2. VSCodeの設定(Settings)で、Editor: Font Familyを変更

   • 変更前：'Droid Sans Mono', 'monospace', monospace
   • 変更後：'Noto Sans Mono CJK JP', 'Noto Sans CJK JP', 'Noto Serif CJK JP', 'Droid Sans Mono', 'monospace', monospace

3. VSCodeの設定(Settings)で、Markdown › Preview: Font Familyを変更

   • 変更前：-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif
   • 変更後：'Noto Sans CJK JP', 'Noto Serif CJK JP', 'Noto Sans Mono CJK JP', -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif

インストールされているフォントは、ターミナル上で以下のコマンドで確認できます。

$ fc-list

日本語フォントだけであれば、以下で確認できます。

$ fc-list :lang=ja

Extensionsのインストール

お好みのものを。
自分は、Markdown All in One、markdownlint、Drawio. Integration、indent-rainbow、Rainbow CSVなどを入れています。

おわりに

Chromebookで、VScodeをインストールするときの手番をメモしました。
自分のほかにも、どなたかのお役ｎ立てたら幸いです。