記事ガイド

読みたいところだけ読めばよいように記事を分割してあるので、順番に読んで行く必要はありません。気になったところだけ好きにお読みください。

VS Code v1.51.1 の情報ベースに記述しています。コマンド名などはバージョンによって若干変わったりするので、一致するモノが見当たらない場合、それっぽいモノを探してください。

設定の概要

この記事では VS Code の設定全般の概要を解説します。

VS Code の設定には大きく、カテゴリ、スコープ、言語の３軸が存在します。

カテゴリ: メイン、キーボードショートカット、デバッグ、タスク、拡張、スニペットといった種別
スコープ: ユーザー(グローバルとも表現されます)、ワークスペース、ワークスペースフォルダー(単にフォルダーとも表示されます)
言語: 言語別の設定

こう書いてしまうと、とても仰々しいものに見えてしまうかもしれませんが、少なくとも普段使いの範囲ではそう構える必要のあるものではありませんのでそこはご安心ください。( とは言っても、デバッグやタスクあたりの設定は骨が折れるかもですが )

VS Code の各種設定は GUI が用意されてる部分もありますが、基本的に全て JSON で記述されます。プログラマーでない方には JSON での設定は取っ付き難い事とは思いますが、一部、JSON でないと指定できない設定項目などがある上、なにより VS Code の強力な入力補完により、使用感としては GUI での設定とそう遜色ないレベルに仕上がってますので、まだ試された事がないようであれば騙されたと思って一度お試しください。

ワークスペースという概念について

VS Code においてワークスペースとは一般的には VS Code で《開いているフォルダー》と同義ですが、複数の《開いているフォルダー》としてのワークスペースを１つのワークスペースにまとめるマルチルートワークスペースと呼ばれるモノもあり、.code-workspace という拡張子の JSON ファイルで定義されます。マルチルートワークスペースに含まれるワークスペースはワークスペースフォルダーあるいは単にフォルダーと表現されたりします。

VS Code はワークスペース(マルチルートワークスペースを含む)１つに付き VS Code のウィンドウが１つ開かれる事になります。 ( このワークスペースとウィンドウの１対１の関係は VS Code のコアである Electron の都合から由来するモノであり将来的にも覆り難いです。 )

設定のスコープ

VS Code の設定のスコープについて表にまとめました。複数のスコープで、同じ設定項目に対して異なる設定が施されてる場合、より範囲の狭いスコープの設定が優先されます。(この表ではより下の設定が優先されます。)

スコープ	設定の保存場所	説明
ユーザー設定	ユーザー固有のディレクトリ( OS により具体的な場所は異なります。 )	VS Code 全体に対する設定で、グローバル設定とも呼ばれます。
ワークスペース設定	ワークスペースファイル or `.vscode`ディレクトリ	ワークスペース及びマルチルートワークスペースに対する設定。
フォルダー設定	`.vscode`ディレクトリ	マルチルートワークスペースに含まれるワークスペースの設定。ワークスペースフォルダー設定とも呼ばれます。

なお、言語別の設定については言語別の設定でしかオーバーライドされませんので、例えばユーザー設定で markdown のフォントサイズが指定されている場合、ワークスペース設定で言語を特定しないフォントサイズ設定が行われても markdown ファイルを開いた際にはユーザー設定の markdown のフォントサイズが優先されます。

`.vscode` ディレクトリ

ワークスペースの設定は《開いているフォルダー》に .vscode ディレクトリが作られ、そこに保存されます。

`settings.json` ファイル

一般的な設定は基本的に settings.json ファイルで指定されます。

この設定はユーザー/グローバルにもワークスペース(マルチルートワークスペースを含む)ごとにも指定できます。

VS Code のウィンドウ左下の歯車アイコンをクリックして表示されるメニューから設定を選択すると設定の GUI が表示されます。ワークスペースの settings.json であればサイドバーのエクスプローラーパネルから .vscode ディレクトリにある settings.json を開いても良いです。(無ければ自分で作成してください)

他にもコマンドパレット(Shift+Ctrl/Command+P)から以下のコマンドでアクセスできます。

コマンド	対象
`Preferences: Open Default Settings (JSON)`	デフォルト値確認用の読み込み専用JSON
`Preferences: Open User Settings`	ユーザー設定GUI
`Preferences: Open Settings (UI)`	ユーザー設定GUI
`Preferences: Open Settings (JSON)`	ユーザー設定の`settings.json`
`Preferences: Configure Language Specific Settings...`	ユーザー設定の`settings.json`内の言語別設定セクション
`Preferences: Open Workspace Settings`	ワークスペース設定GUI
`Preferences: Open Workspace Settings (JSON)`	ワークスペース設定の`settings.json`
`Preferences: Open Folder Settings`	ワークスペースフォルダー設定GUI
`Preferences: Open Folder Settings (JSON)`	ワークスペースフォルダー設定の`settings.json`

言語別の設定

言語別の次のように言語IDを [ ] で括った項目を作り、その中で定義するだけです。

{
    ...
    "editor.fontSize": 12,
    ...
    "[markdown]": {
        ...
        "editor.fontSize": 14
        ...
    },
    "[typescript]": {
        ...
        "editor.fontSize": 10
        ...
    },
    ...
}

言語別の設定、１つ注意点があって、VS Code 拡張内の定義で言語別の指定ができるかどうかの指定方法が VS Code のどこかのバージョンで変わったみたいなのと、実際に言語別の指定が有効かどうかとその指定が必ずしもは一致しない(これは基本的に VS Code 拡張側のバグ)問題があり、実際には言語別の指定ができるのに VS Code 本体がそれを認識できてない場合、言語別の設定の編集中に入力補完の候補に出てこない事があります。この場合、言語別でない設定として入力後、言語別の設定としてコピペするなりしてください。

`tasks.json` ファイル

タスクに関する設定で、コマンドパレット(Shift+Ctrl/Command+P)での Tasks: Run Task およびクイックオープン(Ctrl/Command+P)での task (←最後は半角スペース) から実行できるタスクを設定します。

この設定はユーザー/グローバルにもワークスペース(マルチルートワークスペースを含む)ごとにも指定できます。

ワークスペースの tasks.json であればサイドバーのエクスプローラーパネルから .vscode ディレクトリにある tasks.json をクリックして開けます(無ければ自分で作成してください)。コマンドパレット(Shift+Ctrl/Command+P)のタスク関連のコマンドからもアクセスできます。

コマンド	対象
`Tasks: Open User Tasks`	ユーザー設定の`tasks.json`
`Tasks: Open Workspace Tasks`	ワークスペース設定の`tasks.json`

※ マルチルートワークスペースの場合、ワークスペースフォルダー設定のtasks.jsonにアクセスするコマンドが VS Code v1.51.1 では用意されてないようです。

`launch.json` ファイル

デバッグに関する設定で、クイックオープン(Ctrl/Command+P)での debug (←最後は半角スペース) およびサイドバーのデバッグパネル上部から実行できるデバッグを設定します。

これはワークスペース(マルチルートワークスペースを含む)ごとにしか設定できません。

サイドバーのエクスプローラーパネルから .vscode ディレクトリにある launch.json をクリックして開けますし(無ければ自分で作成してください)、コマンドパレット(Shift+Ctrl/Command+P)から Debug: Open launch.json を実行する事でもアクセス(作成)できます。

`extensions.json` ファイル

そのワークスペースにおいて推奨される拡張及び推奨しない拡張を指定できます。

これはワークスペース(マルチルートワークスペースを含む)ごとにしか設定できません。

サイドバーのエクスプローラーパネルから .vscode ディレクトリにある extensions.json をクリックして開けますし(無ければ自分で作成してください)、コマンドパレット(Shift+Ctrl/Command+P)から Extensions: Configure Recommended Extensions (Workspace Folder) を実行する事でもアクセス(作成)できます。

※ VS Code v1.51.1 で日本語設定にしている場合、本来、翻訳されないままにならなければならない部分が翻訳されてしまってて、拡張機能: Configure Recommended Extensions (Workspace Folder) と言うコマンド名になっています。

ワークスペースファイル ( `*.code-workspace` )

マルチルートワークスの設定は .code-workspace という拡張子のワークスペースファイルと呼ばれる JSON ファイルに格納されます。

settings.json, tasks.json, launch.json, extensions.json あたりにアクセスする為のコマンドをコマンドパレットから実行する事でアクセスできます。

内容的には以下のような構成になり、 folders[].path でワークスペースフォルダー(子ワークスペース)のパスを指定し、通常のワークスペースでの settings.json, tasks.json, launch.json, extensions.json に相当するマルチルートワークスペース全体に対する設定がそれぞれ settings, tasks, launch, extensions に格納されます。

{
    "folders": [
        {
            "path": "..."
        }
    ],
    "settings": { },
    "tasks": { },
    "launch": { },
    "extensions": { }
}

ワークスペースファイルの応用

ワークスペースファイルは基本的にはマルチルートワークスペースの為のモノなのですが、１つのワークスペースに対して複数のワークスペースファイルを用意するという逆の構成を組む事により、同一のワークスペースを異なる設定で利用する事ができるようになります。開発時とドキュメント作業時で設定を切り替えるみたいな利用方法もあれば、チーム内のメンバー同士で、どうにも折り合いが悪いなんて場合に、メンバーごと、あるいは派閥ごとに設定を持つという利用方法も可能になります。

このようなワークスペースファイルの使い方をする場合、当然ですが、ワークスペースファイルの設定はワークスペースフォルダーの設定でオーバーライドされてしまうので、本体となるワークスペースフォルダーの設定は可能な限り最小限にした方が良いでしょう。

`keybindings.json` ファイル

キーボードショートカットの設定です。

これはユーザー/グローバルにしか存在せず、ワークスペースごとに違う設定をする事はできません。

VS Code のウィンドウ左下の歯車アイコンをクリックして表示されるメニューからキーボードショートカットを選択するとキーボードショートカット設定の GUI が表示されますし、コマンドパレット(Shift+Ctrl/Command+P)から以下のコマンドでアクセスすることもできます。

コマンド	対象
`Preferences: Open Default Keyboard Shortcuts (JSON)`	デフォルト設定確認用の読み込み専用JSON
`Preferences Open Keyboard Shortcuts`	キーボードショートカット設定GUI
`Preferences Open Keyboard Shortcuts (JSON)`	`keybindings.json`

スニペット設定

スニペットは拡張によっても追加できますが、ユーザー設定としても追加できます。

これはユーザー/グローバルにしか存在せず、ワークスペースごとに違う設定をする事はできません。

コマンドパレット(Shift+Ctrl/Command+P)から Preferences: Configure User Snippets を実行する事でアクセス(作成)できます。

言語別の設定

settings.json ファイルと異なり、スニペットでの言語別の設定は言語別の JSON ファイルが作成される形になります。

内部的な情報

ここまで説明してきた設定の格納先以外にも VS Code とその拡張は内部的な情報を持ちます。ログイン情報などの機密性の高い情報や、設定というよりはちょっとしたスタータス情報などが Web ブラウザで言うところのローカルストレージに相当する場所やその他の場所に保存されます。

これらは基本的になんらかの理由があって、そうなっているモノなので、頑張って保存されてる情報を抜き出したりするような事はやめておきましょう。

設定 Tips