🐧

Linux 使いになりたい人向けの Intel N100 ミニ PC で構築する開発環境（１０）- VS Code の設定

2024/05/19に公開

Linux

VS Code

Windows

tech

はじめに

これは、Linux 使いになりたい人向けに Intel N100 ミニ PC を使って開発環境を構築する方法を解説する記事の第１０弾です。第１弾はLinux 使いになりたい人向けの Intel N100 ミニ PC で構築する開発環境（１） - 構築する開発環境についてにあり、そこから第２弾へと続いています。そちらからご覧ください。

ここで使用する Intel N100 ミニ PC の仕様は次のものを前提とします。

項目	内容
OS	Windows 11 Pro
CPU	Intel N100
メモリ	16GB
ストレージ	SSD 512 GB
画面出力端子	HDMI×2
WiFi	5G/2.4G
イーサネット	RJ45×1
Bluetoot	BT4.2
USB	USB3.0×2/USB2.0×2

このマシンで最終的に Windows と Ubuntu Desktop が使えるように環境構築することを目指します。zenn.dev を購読している人のレベルを考えると、画面キャプチャはそれほど必要がないと考えているため少なめです。また、説明についても明示しないとわかりにくいと思われるものに絞っているので少なめです。

今回は VS Code（Visual Studio Code）の設定方法について説明します。コマンド実行にあたっては Linux に慣れるということも考慮して、基本的に Git Bash や WSL を使うようにします。

VS Code とは

VS Code は、Microsoft が開発・提供するオープンソースで高機能なコードエディタです。正式名称は Visual Studio Code で、略称として VS Code、VSCode、vscode が使われることもあります。

公式サイトは https://code.visualstudio.com で、ソースコードは GitHub の microsoft/vscode で公開されています。無償で利用することができ、次の特長があります。

豊富な機能
高い拡張性
クロスプラットフォーム対応
軽量
無料

VS Code は豊富な機能を備えており、プログラミング言語のシンタックスハイライト、コード補完、エラーチェック、デバッグなど、エディタ以外の基本的な開発用機能も搭載しています。

また、拡張機能によって機能を拡張することができ、様々なプログラミング言語やフレームワークに対応することができます。VS Code の拡張機能をインストールすることで、標準では用意されていない機能を後から追加することができます。そのため、自分が必要としている機能を持つ、より使いやすいエディタにすることができるという魅力があります。

Windows、Mac、Linux といった主要な OS に対応しているため、プログラムを開発するときの開発環境として VS Code を前提とすることができます。そうすることで、各 OS を利用する開発者の開発環境を統一することができます。

単体で利用する分には、軽快に動作します。ただし、たくさんの拡張機能をインストールして有効にすると、その分動作が重くなります。今回は、このあたりの問題に対応する設定方法についても説明します。

また、無償で利用することができます。なお、ソースコードは MIT ライセンスというオープンソースソフトウェア（OSS、Open Source Software）のライセンスですが、実行ファイルについては Visual Studio Code のライセンスというものになります。MIT ライセンスだと勘違いして、VS Code の再配布をしたり自分のソフトウェア製品の中に組み込むといったことのないように気をつける必要があります。

ちなみに、GitHub の microsoft/vscode のソースコードを使ってビルドされた実行ファイルについては MIT ライセンスのものが VSCodium というプロジェクトで公開されています。VS Code で使える拡張機能について、一部が使えなかったりしますが、基本的には VS Code と同じ機能を持つので、知っておくと役に立つことがあるでしょう。

VS Code は、次に挙げる様々な用途で使用できることができるため、多くの開発者に人気があります。

プログラミング: 様々なプログラミング言語の開発
Web開発: HTML、CSS、JavaScript などを使った Web サイトの構築
システム管理: 設定ファイルやスクリプトの編集
その他: テキストファイルの編集など

開発環境の一部として VS Code を使用することを前提とする場合は、VS Code の設定方法について、理解しておく必要があります。最近は開発環境の情報もバージョン管理することが必要なことも多くなっています。チーム開発などで、開発者がカスタマイズしやすくしつつ、設定ファイルのバージョン管理もできるようにするには、バージョン管理する設定ファイルについて、ルールを明確にしておくのが良いでしょう。

VS Code の設定について知っておきたいこと

開発環境について、VS Code を使う前提とする場合は次の点について、検討することになります。

VS Code 本体の設定
使用する VS Code の拡張機能と、それらの指定

自分の手元にあるコンピュータで個人で開発するなら、VS Code を好きなように利用しやすい設定にして環境構築をすれば良いのですが、チーム開発をしていて他の開発者と共同で作業する場合や、CI/CD 環境を導入して自動処理をする場合は、それらを考慮した設定が必要になります。

例えば、プログラムのコードフォーマットについて、フォーマットツールを使う場合に、そのルールを VS Code の設定で指定するのか、別のファイルで指定して VS Code から利用するようにするのかで、対応方法が変わってきます。一般的には CI/CD 環境は VS Code に依存しないようにするため、基本的に後者の方法で指定することが多いでしょう。

こういったことから、VS Code の設定について、どのような方法があるのか、どういった制限があるのか知っておくことが重要になってきます。

また、IaC (Infrastructure as Code) の拡張として、開発環境もコードで表現してバージョン管理したいという要望もあることでしょう。そうした場合に、VS Code 関連の設定ファイルについて、どのようにバージョン管理するのかについても決めておく必要があります。

なお、VS Code の設定については、ユーザー、プロファイル、ワークスペース、フォルダといった単位で指定することができます。これらについての説明は、この後に詳しくしますが、どの単位で指定すると良いのか、内容に応じてきちんと検討してから設定する必要があります。

設定ファイルのバージョン管理の方針

最初のうちは管理方法がわからないでしょうから、基本的に対象外としておくのが無難です。その場合は、たとえば、.gitignore ファイルへ次のようなエントリーを記述して、バージョン管理の対象外としておくと良いでしょう。

*.code-workspace
.vscode

参考までに、筆者の設定ファイルのバージョン管理の方針について説明しておきます。

筆者の方針としては、開発プロジェクトで固有となる VS Code 関連の設定については、基本的に推奨設定を VS Code のワークスペースファイルのサンプルで用意して、これをバージョン管理するようにしています。

こうするのが、なぜ良いかというと、開発者の手元である程度のカスタマイズができる余地を入れておいた方が良いのと、用意したワークスペースファイルについて問題があったときに、簡単に設定回避ができるようにしておいた方が良いからです。

なお、チーム開発の場合は複数名の開発者が利用することを想定してワークスペースファイルのサンプルを用意しますが、自分しか開発者がいない個人開発の場合は、サンプルではなく、ワークスペースファイルをそのままバージョン管理しています。

また、必要に応じてフォルダーに適用される設定ファイルをバージョン管理することもあります。これは、ワークスペースファイルの設定は VS Code でワークスペースファイルを開いたときしか適用されないため困る場面があるからです。たとえば、プログラミング言語 Java で開発をする時に、VS Code でフォルダーを開くと、デフォルトの設定が適用された状態で Java 用の拡張機能が自動で動作することがあります。そういったときに、ワークスペースの設定にあわせるため、フォルダーに適用される設定ファイルを用意して問題が起きないようにします。

設定が適用される優先度については、ワークスペースファイルで指定したものが、フォルダーに適用される設定ファイルで指定するものよりも優先度が高くなります。そのため、フォルダーに適用される設定ファイルで指定したものについて、カスタマイズが必要な場合は、ワークスペースファイル側で指定すれば済みます。

こういったことを考慮して設定ファイルを用意するようにしましょう。

VS Code の設定について

VS Code の設定については、ユーザー単位で指定するのが基本となります。また、このユーザー設定について、作業内容に応じて設定を簡単に切り替えることができるように、プロファイルという機能があります。　VS Code を使う際に、使用するフォントを指定したり、キーボードのショートカットを指定したり、全体で共通のカスタマイズをする場合は、これらを使います。

また、開発プロジェクト単位で設定を指定したい場合があります。これには、使用するプログラミング言語向けの拡張機能の細かい指定や、プログラムのデバッグや実行に関する設定などが含まれます。その場合は、フォルダー用の設定ファイルやワークスペース用の設定ファイルを用意します。

ここでは、これらについて順番に説明します。

ユーザー設定

VS Code では、ユーザー設定でVS Code の動作や見た目を自分の好みに合わせてカスタマイズするために使用します。使用するテーマや配色、ショートカットキーなどを指定することができます。

ユーザー設定は、この後に説明するプロファイルという機能を使って使用する設定の切り替えが簡単にできるようになっています。初期のプロファイルとしては「既定」という名前のものがあり、これがユーザーの基本設定となり、ユーザーが VS Code を使用するときの初期設定は、このプロファイルで指定します。

ユーザー設定のためのファイルがある場所は、OS によって変わり、次のようになります。

OS	ファイルパス
Windows	`%APPDATA%/Code/User/`
Linux	`${HOME}/.config/Code/User/`
macOS	`${HOME}/Library/Application Support/Code/User/`

なお、ユーザー設定を保存するためのファイルとしては次のようなものがあります。ここでは Linux のものを示していますが、他の OS でも基本的に同じです。

${HOME}/.config/Code/User/
├── History/ ... VS Code の編集履歴を保存
├── globalStorage/ ... VS Code の拡張機能に関する設定などを保存
├── keybindings.json ... ショートカットキーの設定を保存
├── profiles/ ... プロファイルの設定を保存
├── settings.json ... VS Code のユーザー設定を保存
├── snippets/ ... スニペットに関する設定を保存
└── workspaceStorage/ ... ワークスペースに関する設定を保存

ここで、settings.json で指定する共通の設定例としては、次のようなものがあります。設定内容の詳細についての説明はしませんが、各行の : の左側が設定項目を表し、右側が値を表します。たとえば、"git.confirmSync": false は、リモートの Git リポジトリーと同期する前に確認しないという設定を指定することになります。

settings.json

{
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "window.titleBarStyle":"custom",
  "workbench.editor.customLabels.patterns": {
    "**/README.md": "${dirname}/${filename}"
  },
  "workbench.startupEditor": "none",

  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.fontFamily": "'Noto Sans Mono CJK JP','JetBrains Mono','HackGen', 'Droid Sans Mono', 'monospace'",
  "editor.minimap.enabled": false,

  "explorer.confirmDelete": false,

  "git.confirmSync": false,

  "files.associations": {
    "hosts": "plaintext"
  },
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },

  "terminal.integrated.fontFamily": "'HackGen Console NF', 'Droid Sans Mono', 'monospace'",

  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[txt]": {
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "editor.codeActionsOnSave": {
        "source.addMissingImports": "explicit",
        "source.organizeImports": "explicit",
        "source.fixAll.eslint": "explicit"
    }
  },
}

また、筆者はターミナルで使うショートカットキーについて、Linux の bash を使う時に合わせるために、次のような内容で keybindings.json を用意して使っています。

keybindings.json

[
    {
        "key": "ctrl+p",
        "command": "",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+e",
        "command": "",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+f",
        "command": "",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+k",
        "command": "",
        "when": "terminalFocus"
    },
]

プロファイル

VS Code のプロファイルは、VS Code の設定、拡張機能、キーバインド、スニペット、ユーザータスク、UI の状態などをまとめて保存し、切り替えることができる機能です。

VS Code を使用するにあたって、使用するプログラミング言語や作業内容によって設定をまとめて変更したい場合があります。そういった場合はプロファイルを使います。

プロファイル単位で設定を保存して管理することができるので、使用するプログラミング言語や作業内容によって、有効にする拡張機能や、使用可能なショートカットキーを簡単に切り替えることができます。

プロファイルとして用意したいものとしては、たとえば、ドキュメント編集時用の Markdown を使うための拡張機能を充実させた設定をした Markdown 用プロファイル、TypeScript のプログラムを開発するのに適した設定をした TypeScript 用のプロファイル、Python のプログラムを開発するのに適した設定をした Python 用のプロファイルなどがあります。作業内容や使用するプログラミング言語によって、プロファイルを切り替えます。

プロファイルを使うことには、次の作業が容易にできるようになるメリットがあります。

開発環境の切り替え
設定の試行錯誤
設定のエクスポートとインポート

仕事用とプライベート用、フロントエンド開発とバックエンド開発など、異なる開発環境をプロファイルとして保存しておくと良いでしょう。

また、設定を試行錯誤する際に、現在の設定を破損せずに新しいプロファイルを作成して試すことができます。

なお、プロファイルの設定は、エクスポートして保存することができます。エクスポートして保存してあったものをインポートすることもできます。これらの機能を使うことで、プロファイルの設定をバックアップすることができます。

プロファイルの管理をするには、アクティビティバーの管理をクリックすると表示されるメニューから「プロファイル」をクリックします。すると、プロファイルの選択や作成削除ができる管理メニューを表示することができます。

VS Code のメニューで「ファイル」-「ユーザー設定」-「プロファイル」とクリックすることで管理用メニューを表示することもできます。

既定の設定は、初期状態で残しておくとして、ここでは「sample」というプロファイルを作成して色々と試してみると良いでしょう。プロファイルの管理用メニューから「プロファイルの作成」をクリックします。

すると、作成するプロファイルの指定をする入力画面が表示されます。プロファイルを追加するときは、コピー元の指定をするのですが、「既定」以外にもあらかじめ用意されている選択肢があります。Python、Java General、Node.js といったものがあります。

ここでは、プロファイル名に「sample」、コピー元に「既定」を指定します。アイコンとして表示されている歯車アイコンをクリックすると、他のアイコンが選択できるので、好きなものを選択します。プロファイルで構成する内容については、すべてチェックしておくと良いでしょう。それから「作成」をクリックすると、新しく sample プロファイルが作成されて、これが選択された状態になります。

ちなみに、手元の Ubuntu では ${HOME}/.config/Code/User/profiles/4cdb83ed/ という新しいディレクトリーが作成されて、そこに設定用のファイルが保存されました。この例を見てわかるように、プロファイルの設定ファイルは、ユーザー設定のためのファイルがあるフォルダーにプロファイル用の profiles フォルダーが用意されて、その中に作成されます。

なお、具体的に作成されたファイルは次のようなものでした。

${HOME}/.config/Code/User/profiles/4cdb83ed/
├── extensions.json ... 拡張機能の設定ファイル
├── globalStorage/
│   └── state.vscdb
├── keybindings.json ... ショートカットの設定ファイル
├── settings.json ... プロファイルの基本設定ファイル
└── snippets/

これらの設定ファイルの内容を更新するにあたって、普通は VS Code で用意されている設定画面から指定します。あらかじめ JSON での設定がわかっている場合は、ここにある JSON フォーマットのファイルを直接編集することで VS Code のプロファイルの設定を変更することもできます。

VS Code フォルダー用設定ファイル

VS Code フォルダー用設定ファイルは、特定のフォルダー内にあるファイルに対してのみ適用される設定を記述するためのファイルです。このファイルを使用することで、フォルダーごとに異なる設定を適用することができ、開発効率を上げることができます。

なお、VS Code のフォルダーは、Linux ではディレクトリーと対応するものになります。VS Code のメニューで「フォルダー」とあるため、基本的にはフォルダーと表現しますが、Linux 系のターミナルなどでコマンドを実行する時は、Linux に合わせてディレクトリーと表現します。

VS Code フォルダー用設定ファイルには、いくつか種類があります。

.vscode/settings.json
.vscode/launch.json
.vscode/tasks.json
.vscode/extensions.json

.vscode/settings.json は、VS Code の設定を指定するためのものです。

.vscode/launch.json は、VS Code でデバッグと実行をするときに使う設定を指定するためのものです。

.vscode/tasks.json は、特定のコマンドを VS Code で簡単に実行できるようにするためのものです。ここで定義したタスクはコマンドパレットから簡単に実行できるようになります。また、.vscode/launch.json からも利用できます。

.vscode/extensions.json は、VS Code で使用する拡張機能に関して、推奨するものや非推奨のものを指定するためのものです。

フォルダー用設定ファイルで設定できる項目は、VS Code のユーザー設定で設定できる項目と基本的に同じです。

VS Code ワークスペースファイル

VS Code ワークスペースファイルを使うと、ワークスペース単位での設定指定ができます。ここで、ワークスペースがどういうものか知らない人もいるでしょうから、それについて説明します。

VS Code のワークスペースは、複数のフォルダをまとめて開き、プロジェクトとして管理するための機能です。ワークスペースを作成するメリットは次のとおりです。

複数のフォルダをまとめて編集可能
ワークスペース固有の設定が可能
簡単にデバッグや実行が可能
簡単にタスク実行が可能

ワークスペースを用意することで、複数のフォルダにまたがるプロジェクトを、ひとつの VS Code の画面でまとめて管理することができます。

またワークスペースに適用する VS Code の設定については、ワークスペースファイル（.code-workspace という拡張子のファイル）に保存して管理することができます。

ワークスペースファイルには、デバッグや実行に関する設定（.vscode/launch.json に相当）を含めることができ、ワークスペース内のファイルに対して、簡単にデバッグや実行をすることができます。

他に、タスクを定義すること（.vscode/task.json に相当）、推奨する拡張機能を指定すること（.vscode/extensions.json に相当）もできます。

例として Python アプリ用のワークスペースファイルを次に示します。この例では settings.json、launch.json、extensions.json と対応する設定項目が含まれたものとなっています。

app001.code-workspace

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "python.defaultInterpreterPath": "/workspace/app001/.venv/bin/python",
        "python.analysis.extraPaths": [
            "/workspace/app001"
        ],
        // `PYTHONPATH=/workspace/app001 python api/main.py` で実行可能
    "[python]": {
      "editor.defaultFormatter": "ms-python.black-formatter",
      "editor.formatOnSave": true
    },
  },
  "launch": {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Python デバッガー: 現在のファイル",
        "type": "debugpy",
        "request": "launch",
        "program": "${file}",
        "env": {
          "PYTHONPATH": "/workspace/app001"
        },
        "console": "integratedTerminal"
      }
    ],
    "compounds": []
  },
  "extensions": {
    "recommendations": [
      "ms-python.python",
      "ms-python.black-formatter"
    ]
  }
}

なお、VS Code ワークスペースには、1つのフォルダを開いたワークスペースであるフォルダーワークスペースと、複数のフォルダを開いたワークスペースのマルチルートワークスペースの2種類があります。

基本はフォルダーワークスペースを使うことが多いですが、慣れてきたらマルチルートワークスペースも使ってみると良いでしょう。

ワークスペースを作成するには、ルートとなるフォルダが必要なので、最初にフォルダーを開きます。それから、VS Code のメニューで「ファイル」-「名前をつけてワークスペースを保存」をクリックします。

ファイルを保存する画面が表示されたら、ワークスペースファイルのファイル名を指定して保存します。これで、開いていたフォルダーをルートとするワークスペースファイルが用意されます。また、VS Code の画面はワークスペースを開いた状態になります。

VS Code のエクスプローラーの画面を見ると開いているワークスペース名がわかるように表示されます。フォルダーの場合は「フォルダー名」となっている欄が、ワークスペースの場合は「ワークスペース名（ワークスペース）」となります。「（ワークスペース）」という文字列の有無で、現在 VS Code で開いているものがフォルダーなのかワークスペースなのか区別がつくようになっています。

ワークスペースを閉じるには、VS Code のメニューで「ファイル」-「ワークスペースを閉じる」をクリックします。これで、現在開いているワークスペースが閉じて、VS Code は初期の画面になります。

ワークスペースを開くには、VS Code のメニューで「ファイル」-「ファイルでワークスペースを開く」をクリックします。すると、ファイルを選択する画面となるので、ワークスペースファイル (*.code-workspace) を選択して「開く」をクリックします。

ワークスペースを削除するには、ワークスペースを閉じてから、ワークスペースファイルを削除します。

VS Code の設定画面

ここまでで、VS Code の設定についての基本事項を理解できたはずです。次に、VS Code の設定画面について説明します。

VS Code の設定画面を開く方法は、次のようにいくつかあります。

ID	説明
ａ	アクティビティバーの管理から開く
ｂ	メニューから開く
ｃ	ショートカットキーを使う
ｄ	コマンドパレットを使う

いずれも選択されているプロファイルの設定画面が表示されます。なお、VS Code を起動すると、初期状態では「既定」のプロファイルが選択されています。プロファイルを追加してから、それを選択状態にして設定画面を開くと、そのプロファイルの設定画面が表示されます。
　
　ａの場合は、VS Code のアクティビティバーの管理をマウスクリックして表示されるメニューから「設定」をクリックします。これで設定画面がエディタ領域に表示されます。

ｂの場合は、VS Code のメニューで「ファイル」-「ユーザー設定」-「設定」と開いてクリックします。

ｃのショートカットキーを使う場合は、OS によって使うキーが変わります。

OS	ショートカットキー
Linux	Ctrl + ,
Windows	同上
macOS	⌘ + ,

ｄのコマンドパレットを使う場合は、「Ctrl + Shift + P」を入力（CtrlキーとShiftキーとpキーを同時に入力）するかメニューの「表示」-「コマンドパレット」をクリックしてコマンドパレットを開きます。それから入力欄に「settings」と入力すると表示される選択肢にある「設定を開く」をクリックします。

設定項目

設定画面では、様々な単位で設定ができるようになっていて、影響範囲によってタブで区切られて表示されています。

単位	影響範囲
ユーザー	現在使用しているユーザーで共通
ワークスペース	開いているワークスペースが対象
フォルダー	使用中のフォルダーが対象

ユーザーの設定で指定した内容は、先程説明したプロファイル用の settings.json に保存されます。ワークスペースの設定は、開いているワークスペースファイルの settings: プロパティに保存されます。フォルダーの設定は、使用中のフォルダーの .vscode/settings.json ファイルに保存されます。

このように、ユーザーがカスタマイズ指定した内容はファイルへ保存されます。プログラム開発で使用しているワークスペースファイルでの設定やフォルダーでの設定については、リポジトリでバージョン管理することもできるので、意識するようにしましょう。

なお、無効となっている設定については、暗い表示となってわかるようになっています。フォルダーの設定で指定しても、ワークスペースの設定に同じ項目を指定して、ワークスペースの設定が有効になっていると、フォルダーの設定は無効となります。これについては、設定ファイルを直接参照した方が確認しやすいです。.code-workspace ファイルや .vscode にある設定ファイルを直接 VS Code で開いて設定が有効になっていることを確認するようにしましょう。

参考資料

ここで紹介した VS Code の設定について、公式のドキュメントは次のリンクにあります。ただし、英語での説明になります。参考資料として示しておきます。