Chromebook C101PA に VSCode をインストールして手軽なプログラミング環境を構築する

用意したもの

ここでの説明はChromeOSのLinux対応(Crostini)でARM系OP1搭載のものに関する説明になります。 下記の機種が対象です。

事前準備

Chromebookを最新の状態にする

この記事では、Stable の バージョン69です。

Linux を有効にする

ChromeOSの設定からLinux(ベータ版)をオンにします f:id:AXON_K:20181007132926p:plain Linuxのインストールにはしばらく時間がかかります。 f:id:AXON_K:20181007132538p:plain

オープンソースVSCodedeb パッケージをダウンロードする

下記のページの Pre-built deb package にある Latest のパッケージをダウンロードしておきます。

www.reddit.com

日本語フォントをダウンロードする

ここでは「源ノ角ゴシック Code」を Latest release からダウンロードしておきます。

github.com

インストールを始める

VSCode のインストール

ChromeOS上で「ファイル」を開いてダウンロードした code-ossdeb ファイルを、「Linux ファイル」 へドラッグアンドドロップします。 deb ファイルを 「Linux ファイル」へ移動すると、コンテキストメニューに 「Linux(ベータ版)でのインストール」が表示されるのでクリックして、しばらく待つとインストールが完了します。 f:id:AXON_K:20181007133237p:plain

日本語フォントのインストール

ChromeOS上で「ファイル」を開いてダウンロードした source-han-code-jp の 圧縮 ファイルを開きOTFフォルダを「Linux ファイル」 へドラッグアンドドロップします。

Terminalを開いて下記のコマンドを入力してフォントをインストールします。

$ mkdir ~/.fonts
$ cp ./OTF/* ~/.fonts
$ sudo fc-cache -fv

インストールしたフォントは下記のコマンドで確認できます。

$ fc-list | grep "Source Han"
VSCode のフォント設定に「源ノ角ゴシック Code」を追加

VSCode で Settings を開き、「Search settings」に font と入力して、Editor: Font Family の先頭に「Source Han Code JP L」を追加します。(太さはお好みで)

Editor: Font Family
Controls the font family.
'Source Han Code JP L', 'Droid Sans Mono', ...
VSCode の Extension gallery を有効にする

Terminal の vi で下記のファイル開きます。

$sudo vi /usr/share/code-oss/resources/app/product.json

下記の内容をjsonファイルの最後(checksumsの次)に追加します。

    "extensionsGallery": {
        "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
        "cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
        "itemUrl": "https://marketplace.visualstudio.com/items"
    }

github.com

設定後に VSCode を開くとExtension gellery が有効になっているはずです。

日本語メニューに変更する

VSCode の Extension gellery で 「japanese」と検索すると「Japanese Language Pack for Visual Studio Code」がありますので、インストールします。もしここで説明文の日本語が表示されていない場合は、フォントのインストールが間違っていますので、上記の日本語フォントのインストールを見直してください。

インストール後にUIを日本語にするかの確認がありますのでいずれかを選択します。

以上でVSCodeのインストールは終了です。

おまけ

VSCodeのアイコンを変更する

上記でオープンソース版のVSCodeをインストールした状態では、アイコンがCrostiniのデフォルトのものになっていると思いますが、任意のアイコンに変更することができます。

f:id:AXON_K:20181007133803p:plain

ChromeOSで適当にアイコンのPNGファイル探してダウンロードして 「Linux ファイル」へ保存しておきます。ここでは名前を vscode.png とします。

Terminal を開いて下記のコマンドでアイコンのPNGファイルをコピーします。

$ sudo cp ~/vscode.png /usr/share/pixmaps/

次にアイコンの設定を変更します。

$ sudo vi /usr/share/applications/code-oss.desktop

「Icon=」の箇所に上記のアイコンPNGファイルのパスを指定します。

Icon=/usr/share/pixmaps/vscode.png

ChromeOSをログアウトしてログインし直してVSCodeを開くとアイコンが更新されます。

f:id:AXON_K:20181007133807p:plain