settings.json とは

settings.json とは、Visual Studio Code（VSCode）のカスタマイズが可能な設定情報を管理するためのJSON形式のファイルを指す。

実体がJSONファイルなので、チーム開発時にGit管理するなどして設定を共有することもできる。

settings.json には、VSCode全体に対して適用される User settings と、特定のworkspace（プロジェクト）に対してのみ適用される Workspace settings が存在する（Multi-root workspacesでのみ適用される Folder settings というものもある）。

User settings

VSCode全体に対して適用される。

設定の変更

設定値を変更する方法には、

JSONファイルを直接エディタから編集する方法
VSCodeのGUIから編集する方法

がある。

JSONファイルを直接編集する場合

settings.json は以下のパスに配置されている。

OS	settings.json の配置
Windows	`%APPDATA%\Code\User\settings.json`
macOS	`$HOME/Library/Application\ Support/Code/User/settings.json` （※`Application\ Support` は `Application Support` ディレクトリのこと）
Linux	`$HOME/.config/Code/User/settings.json`

JSON のキーは setting ID と呼ばれ、GUIから編集する場合にも取得することができる。

GUIから編集する場合

画面左下の設定ボタンから「Settings」を選択する。

左側の「User」タブを選択する。

歯車アイコンをクリック先から settings.json の setting ID を取得することができる。

Workspace settings

特定のプロジェクトに対して適用される。User settingsよりも優先度が高いため、User settings による設定値をプロジェクトごとに異なる値で上書きできる（一部上書きできない項目もある）。

設定の変更

設定値を変更する方法には、JSONファイルを直接エディタから編集する方法とVSCodeのGUIから編集する方法がある。

JSONファイルを直接編集する場合

プロジェクトフォルダ直下の .json/settings.json を編集する。

User settingsのsettings.jsonはプロジェクトフォルダ内に含まれるため、プロジェクトと一緒にGitによるバージョン管理をすることができる。

GUIから編集する場合

画面左下の設定ボタンから「Settings」を選択する。

右側の「Workspace」タブを選択する。

歯車アイコンをクリック先から各設定項目の settings.json の setting ID を取得することができる。

tasks.json とは

tasks.json とは、VSCodeでタスクを定義するためのJSONファイルを指す。

タスクとは開発中に頻繁に行うビルド、テスト、スクリプト実行などの作業を指す。

タスクを定義することで、頻繁に実行するコマンドなどに任意の名前をつけて簡単に実行することができるようになる。

tasks.json の作成

「Terminal」から「Configure Tasks」を選択する。

「Create tasks.json file from template」を選択する。

「Others」を選択する。

プロジェクトのルートフォルダに .vscode/tasks.json が作成される。

配置場所

tasks.json はworkspace内の .vscode フォルダ内に保存される。

設定項目

タスクは tasks キーに対してオブジェクトの配列として設定する。各タスクには以下のキーを設定することができる。

設定項目は「コントロール（ctrl）　+　スペース（space）」キーにてIntelliSenseとして表示させることができる。

設定項目	説明
`label`	タスクの名前
`type`	`shell` : シェルコマンド `process` : プロセス
`command`	実行したいコマンド
`args`	コマンドに渡す引数
`group`	タスクのグループ名。`test`や`build`などがあり、グループ化したタスクはコマンドパレットからまとめて実行することができる。
`windows` / `linux` / `osx`	コマンドが実行される環境ごとの固有の設定
`presentation`	実行方法と実行結果の出力方法
`options`	コマンドの実行環境に関わる設定

タスクの例

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "my script",
      "type": "shell",
      "command": "echo",
      "args": ["hello", "world"],
    }
  ]
}

`command`

実行したいコマンドが複数ある場合、スクリプトファイルを作成して、そのスクリプトファイルを　command に指定する。

スクリプトファイルを実行させる

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "my script",
      "type": "shell",
      "command": "./scripts/myscript.sh",
    }
  ]
}

`presentation`

`presentation`	各設定値
`reveal`	`always` : タスク実行のたびにターミナルを表示する `silent` : タスクが実行されてもターミナルを表示しない（ただし、エラー発生時は表示する） `never` : タスクが実行されてもターミナルを表示しない（エラー発生時も表示しない）
`focus`	`true` : タスク実行後にターミナルにフォーカス移動する `false` : フォーカスを移動しない
`panel`	`shared` : 実行結果を表示するターミナルを他のタスクと共有する `dedicated` : 実行結果を表示するターミナルを、タスクが同じであれば共有し、異なるタスクであれば共有しない `new` : 実行結果を実行の度に新しいターミナルを起動して表示する
`close`	`true` : タスク実行後にターミナルを閉じる `false` : ターミナルを閉じない
`clear`	`true` : タスクを実行する前にターミナルをクリアする `false` : ターミナルをクリアしない

presentationの例

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "my task",
      "type": "shell",
      "command": "echo Hello",
      "presentation": {
        "reveal": "always",
        "focus": true,
        "panel": "shared",
        "clear": true
      }
    }
  ]
}

`options`

`options`	各設定値
`cwd`	タスクを実行するディレクトリのパス（workspaceのパスを`$workspaceFolder`として使用できる）
`env`	タスク実行時の環境変数を定義できる（上書きも可能）
`shell`	タスクを実行するシェルに関わる設定 `executable` : 使用するシェルのパス `args` : シェルに渡す引数
`windows` / `linux` / `osx`	コマンドが実行される環境ごとの固有の設定

optionの例

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "my task",
      "type": "shell",
      "command": "echo",
      "args": ["Hello ${MY_VAR}"],
      "options": {
        "cwd": "${workspaceFolder}/scripts", 
        "env": {
          "MY_VAR": "world"
        }
      }
    }
  ]
}

タスクの実行

「Terminal」から「Run Task」を選択する。

設定したタスク名を選択する。

workspace

VSCode上で開いた特定のフォルダーをプロジェクトとして管理するための機能。

settings.jsonやtasks.json、VSCodeの拡張機能のような設定情報をプロジェクトごとに異なる値で保持することができる。

Single-folder workspaces

VSCodeからフォルダを開くと、既に Single-folder workspaces として扱われている。

そのため開いたフォルダを workspace として、workspace に対する設定を編集することができる。

「Settings」を選択する。

「Workspace」に対する設定ができる。

Multi-root workspaces

複数のフォルダを一つの workspace として扱うことができる機能。

Multi-root workspaces に対する設定は、settings.jsonではなく拡張子が
.code-workspace（ワークスペース名.code-workspace）のファイルに保存される。

2つのフォルダ project-1 と project-2 がある状態。

「Save Workspace As」を選択する。

ワークスペース名.code-workspace があることを確認する

Multi-root workspaces に含まれる各フォルダには name キーによって表示名をつけることができる。

Multi-root workspaces に対する設定

Multi-root workspaces に対する設定は ワークスペース名.code-workspace の settings キーに保存される。

各Folder に対する設定

Multi-root workspaces では、Single-folder workspaces の User settings、Workspace settings に加えて Folder settings という概念が追加される。

Folder settings は各Folder に対する設定のことで、それぞれのフォルダ内の .vscode/settings.json に保存される。

優先順位は Folder settings > Workspace settings > User settings となる。

各Folder に対する設定では、設定を行う対象の Folder を選択することができる。

「hello」を選択する。

変更した設定情報は、対象Folder の .vscode/settings.json に保存される。