VS Codeのワークスペースとは
VS Codeのワークスペースは、現在開いているプロジェクトに対して適用する設定やフォルダ構成を管理する単位です。
「ワークスペース」というと複数のフォルダをまとめる機能をイメージしやすいですが、必ずしも複数フォルダである必要はありません。
1つのリポジトリだけをワークスペースとして開くこともできます。
例えばNext.jsのリポジトリが次のようにあるとします。
repository-a/
├── app/
├── public/
├── package.json
└── ...
通常は repository-a フォルダをそのままVS Codeで開けます。
一方で、次のようなワークスペースファイルを作成することもできます。
repository-a.code-workspace
このファイルをVS Codeで開くことで、repository-a をワークスペースとして開きつつ、そのワークスペース専用の設定を持たせられます。
VS Codeでは、一般的な単一フォルダのワークスペース設定は .vscode/settings.json に保存されます。一方、.code-workspace ファイルを使ってワークスペースを開いている場合は、ワークスペース全体の設定を .code-workspace 側に持たせることができます。
違いを整理すると次のようになります。
| 開き方 | ワークスペース設定の主な保存先 |
|---|---|
| フォルダをそのまま開く | .vscode/settings.json |
.code-workspace を開く | .code-workspace |
.code-workspace は複数フォルダ専用のファイルではなく、1つのフォルダだけを登録して使うこともできます。
.code-workspaceファイルの構造
.code-workspace はJSON形式のファイルです。
例えば次のような構成になります。
{
"folders": [
{
"path": "./repository-a"
}
],
"settings": {
"files.watcherExclude": {
"**/.next/**": true,
"**/coverage/**": true
},
"search.exclude": {
"**/.next/**": true,
"**/coverage/**": true
}
}
}
大きく分けると、
folders
settings
という2つの役割があります。
folders は、そのワークスペースで開くフォルダを指定します。
settings は、そのワークスペースを開いている間だけ適用するVS Codeの設定です。
関係を図にすると次のようになります。
.code-workspace は、ソースコードそのものの設定ではなく、そのプロジェクトをVS Codeでどのように扱うかを設定するファイルと考えると分かりやすいです。
files.watcherExcludeとは
files.watcherExclude は、VS Codeのファイル監視から特定のファイルやディレクトリを除外する設定です。
VS Codeはワークスペース内のファイル変更を監視しています。
例えばファイルを変更したり、新しいファイルが作成されたりした場合に、その変更をVS Codeが認識できるのはファイル監視の仕組みがあるためです。
しかし、すべてのディレクトリを監視する必要があるとは限りません。
Next.jsでは .next にビルドや開発サーバーによって多数のファイルが生成されます。
また、テストツールによっては coverage にカバレッジレポートが生成されます。
repository-a/
├── app/
├── .next/
├── coverage/
└── package.json
これらはソースコードではなく生成物なので、ファイル変更をVS Codeが逐一監視する必要性は低い場合があります。
そこで次のように設定します。
"files.watcherExclude": {
"**/.next/**": true,
"**/coverage/**": true
}
これによって .next と coverage 以下をファイル監視対象から除外できます。
VS Code公式でも、変更が大量に発生するディレクトリを files.watcherExclude で除外することで、ファイル監視によるオーバーヘッドを減らせると説明されています。
search.excludeとは
search.exclude は、VS Codeの検索対象からファイルやディレクトリを除外する設定です。
例えばVS Codeで、
Cmd + Shift + F
を使ってプロジェクト全体を検索したとします。
.next の中にはNext.jsによって生成された大量のJavaScriptファイルなどが存在します。
これらまで検索対象になると、実際に編集しているソースコードではなく生成ファイルが検索結果に出てくる可能性があります。
そこで、
"search.exclude": {
"**/.next/**": true,
"**/coverage/**": true
}
と設定します。
これによってVS Codeの検索時に .next や coverage を除外できます。
VS Codeの search.exclude はglobパターンで対象を指定します。** は任意の階層にマッチするため、
**/.next/**
でワークスペース内の .next 以下を対象にできます。
files.watcherExcludeとの違い
files.watcherExclude と search.exclude は似ていますが、対象となる機能が異なります。
| 設定 | 除外するもの |
|---|---|
files.watcherExclude | ファイル変更の監視 |
search.exclude | VS Codeの検索 |
files.exclude | Explorerなどでの表示 |
例えば、
"files.watcherExclude": {
"**/.next/**": true
},
"search.exclude": {
"**/.next/**": true
}
と設定した場合、.next はファイル監視と検索から除外されます。
一方で files.exclude を設定していなければ、Explorer上では .next が表示される場合があります。
つまり「監視しない」「検索しない」「表示しない」は、それぞれ別の設定です。
debug.javascript.terminalOptionsとは
debug.javascript.terminalOptions は、VS CodeのJavaScript Debug Terminalで使用するデバッグ設定です。
VS Codeには、JavaScriptやNode.jsのプロセスをデバッガー付きで実行できるJavaScript Debug Terminalがあります。
debug.javascript.terminalOptions を使うと、このターミナルから開始するデバッグ処理に対して追加設定を指定できます。
例えばVS Code公式では次のような設定例があります。
"debug.javascript.terminalOptions": {
"skipFiles": [
"<node_internals>/**"
]
}
skipFiles に指定したファイルは、ステップ実行するときなどにデバッガーがスキップします。
そのため、
debug.javascript.terminalOptions
という項目だけでは具体的な動作は決まりません。
重要なのは、その中に何が設定されているかです。
.code-workspaceとsettings.jsonの関係
VS Codeの設定では .code-workspace と settings.json の違いが分かりにくくなりやすいですが、どちらもVS Codeの設定を保存できるファイルです。
例えばフォルダを直接開いている場合は、
repository-a/
└── .vscode/
└── settings.json
にワークスペース設定を持たせるのが一般的です。
{
"search.exclude": {
"**/.next/**": true
}
}
一方で .code-workspace を使う場合は、
{
"folders": [
{
"path": "./repository-a"
}
],
"settings": {
"search.exclude": {
"**/.next/**": true
}
}
}
のように settings の中へ記述します。
つまり設定内容そのものは似ていますが、どの方法でワークスペースを開いているかによって保存場所が変わるということです。
VS Codeの設定画面からも変更できる
.code-workspace はJSONファイルなので直接編集できますが、必ずJSONを手で変更する必要はありません。
VS Codeでは設定画面から変更できます。
macOSであれば、
Cmd + ,
でSettingsを開きます。
設定画面には、
User
Workspace
などの設定範囲があります。
User はVS Code全体に適用される設定です。
Workspace は現在開いているワークスペースだけに適用される設定です。
例えば検索欄で、
files.watcherExclude
や、
search.exclude
を検索し、Workspace 側の値を変更できます。
VS Code公式でも、設定はJSONを直接編集する方法とSettings Editorから変更する方法の両方が用意されています。
設定画面と設定ファイルは別々の仕組みではありません。
関係は次のようになります。
settings の内容として保存
そのため、設定画面でワークスペース設定を変更する方法と、.code-workspace のJSONを直接編集する方法は、基本的には同じ設定を異なるUIから操作していると考えられます。
.code-workspaceを使う場合に注意すること
.code-workspace に設定を書いている場合、その設定を利用するにはその .code-workspace をワークスペースとして開く必要があります。
例えば、
repository-a.code-workspace
に、
"search.exclude": {
"**/.next/**": true
}
を設定していても、repository-a フォルダを単純に「フォルダを開く」で開いた場合は、別のワークスペースとして扱われます。
.code-workspace に保存した設定を前提として作業するのであれば、普段からその .code-workspace ファイルを使ってプロジェクトを開く必要があります。
この点を理解しておくと、
「設定したはずなのに別の日にVS Codeを開いたら設定が効いていない」
といった状況を切り分けやすくなります。
