LoginSignup
8
7

Visual Studio Code 入門 : 2回 : 設定

Last updated at Posted at 2020-12-08

記事ガイド

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

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

設定の概要

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

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

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

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

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

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

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

VS Code はワークスペース(マルチルートワークスペースを含む)1つに付き VS Code のウィンドウが1つ開かれる事になります。 ( このワークスペースとウィンドウの1対1の関係は 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
        ...
    },
    ...
}

言語別の設定、1つ注意点があって、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": { }
}

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

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

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

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

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7