はじめに
今回はHP Chromebookの使用記の第十二弾としてHP ChromebookにVS Codeをインストールおよび設定を紹介します。
この機種の購入を考えておられるならば次を参照して下さい。
なお、Amazonについては、旧モデルのものを載せておきます。
| 商品画像 |  |
||
| 総品名 | HP Chromebook x360 14b-cb0000 シリーズ コンフォートモデル ンテル® Pentium® Silver N6000 プロセッサー(1.10GHz-3.30GHz, キャッシュ 4MB) 14b-cb0005TU （楽天市場、Yahoo!ショッピング） Google Chromebook HP ノートパソコン インテル Pentium® Silver 8GBメモリ 64GB eMMC 14インチ フルHDブライトビュー・IPSタッチディスプレイ 2in1 コンバーチブルタイプ 日本語キーボード HP Chromebook x360 14b （Amazon） |
||
| 商品の評価 | （レビュー総数433件） |
ーーー | ーーー |
| 価格はこちらから | Amazonから | 楽天市場から | |
この記事を読むと、次のことについて知ることができます。
- ChromebookにVS Codeをインストールする理由
- ChromebookのLinux環境にVS Codeをインストール
- Linuxパッケージのリストの更新とgnome-keyringのインストール
- ChromebookのCPUの種類の確認
- VS Codeプログラムのダウンロードとインストール
- VS Codeの日本語化及び基本的な設定
- VS Codeの日本語化以外の拡張機能のインストール
OS、機種などで説明の仕方が変わってくることがありますので、私の使用しているパソコン環境について記しておきます。
パソコンOS ： Windows10 Pro
Windowsバージョン ： 21H１
Chromebook ： Chromebook Pentium Silver N6000 8GB 128GB eMMC フラッシュメモリ 14.0型 IPS タッチディスプレイ Wi-Fi 6 HP Chromebook x360 14b (型番：48J49PA-AAAD)
ChromebookにVS Codeをインストールする理由
VS Codeは、プログラミングをする場合に大変便利なエディターであり、Windows版ではHTML、CSS、JavaScriptなどの勉強に利用しておりました。
しかし、ChromebookのChrome OSには直接のVS Codeをインストールすることはできません。
そこで、ChromebookのLinux環境であればVS Codeをインストールができますので、Chromebook上でもプログラミングができますし、プログラミングの勉強も可能となります。
Windows版のVS Codeの使い方などに関する記事は、次を参照してください。
ChromebookのLinux環境にVS Codeをインストール
ChromebookにVS Codeをインストールする前に、ChromebookにLinuxをインストールする必要がありますが、これについては既にインストールしているものとして話を進めます。
もし、ChromebookへのLinuxのインストールについて知りたいのであれば、次の記事を参照してください。
VS Codeのインストールについては、VsiualStudioコードのホームにある「Learning with VS Code on Chromebooks」を参照しました。
Linuxパッケージのリストの更新とgnome-keyringのインストール
ここで、gnome-keyringとは、Wikipediaによると「ユーザー名やパスワード、認証キーを適切なメタデータとともに保存するソフトウェア・アプリケーション」と書かれており、Windowsで言うところのパスワード管理ソフト（私は、Bitwardenを利用）と同等のものと思われます。
Linuxアプリからターミナルを起動します。
ターミナルに、次の2文を順次入力してリターンを押下します。
sudo apt-get update
sudo apt-get install -y gnome-keyring
ChromebookのCPUの種類の確認
ChromebookのCPUにより、VS Codeのダウンロードするプログラム種類が違ってくるので、ChromebookのCPUの種類を確認します。
次の文をターミナルに入力してリターンを押下します。
dpkg --print-architecture
結果は、「amd64」と表示されましたので、VS Codeのプログラムパッケージとして「amd64」のLinuxのプログラムパッケージを選択すればよいことになります。
ターミナルは閉じてください。
VS Codeプログラムのダウンロードとインストール
VS Codeのホームに移り、「↓ .deb」をクリックします。
「Linux用VS Codeをダウンロードしていただきありがとうございます。」とブラウザー上に表示されます。この時点でダウンロードが開始されない場合は、その下に表示される「直接ダウンロードリンクをお試しください。」をクリックしてください。
Chromebookのダウンロードフォルダー（ダウロードフォルダーを変更している場合は変更したホルダー）にVS Code のインストールプログラム（code_1.60.1-1631294805_amd64.deb）がダウンロードされます。
この「code_1.60.1-1631294805_amd64.deb」をダブルクリックすると、Linuxでアプリをインストール画面が表示されますので、「インストール」をクリックします。
「Linuxでアプリをインストール」ウインドウが表示され、右隅にプログラムのインストールの進行状況が出ますが、それが消えたら、インストール終了ですので、「OK」をクリックします。
これで、VS Codeがインストールされているはずですので、Linuxアプリを見てみましょう。
なお、インストールしたVS Codeのバージョンは、1.60.1でした。
VS Codeの日本語化及び基本的な設定
VS Codeのの日本語化を含め基本的な設定についての詳細は、次の記事を参照してください。
ここでは、主要な図のみを載せて説明します。
起動したVS Codeの左メニューの一番下にある「Extensions」をクリックし、上部の検索欄に「japanese」と入れて表示される拡張機能の中から「Japanese Language Pack for Visual Studio Code Microsoft」を選択して、「install」をクリックし、インストールが終わった後に再起動するとメニューが日本語化されていることが分かります。
VS Codeの日本語化以外の拡張機能のインストール
これも、前の記事を参考にしていただき、「Bracket Pair Colorizer」、「Code Spell Checker」、「Auto Rename Tag」、「Path Autocomplete」、「IntelliSense for CSS class names in HTML」、「Live Server」、「HTMLhint」、「zenkaku」などをインストールしておいた方がよいでしょう。
