はじめに

VS Codeのワークスペースには、プロジェクト固有の設定やデバッグ構成、推奨拡張機能のリストなどを記述するための.vscodeフォルダが用意されています。このフォルダ内のJSONファイルを適切に設定することで、開発環境の構築や作業効率を大幅に向上させることができます。本記事では、.vscodeフォルダ内の主なJSONファイルの役割や内容を詳しく解説します。
本記事で引用したリポジトリはこちら↓

1. `.vscode/extensions.json`

{
  "recommendations": [
    "ms-azuretools.vscode-azurefunctions",
    "ms-python.python",
    "ms-azuretools.vscode-azurestaticwebapps",
    "azurite.azurite"
  ]
}

役割
このファイルに記述された拡張機能は、「このワークスペースではこれらの拡張機能を使うと便利なので導入を推奨しますよ」という “推奨リスト” です。
このファイルがあるとどうなるか
- VS Code でこのフォルダ（ワークスペース）を開いた際に、拡張機能パネルに 「推奨拡張機能」 として表示されます。
- 開発メンバー全員に「この拡張機能があると、開発やデバッグがしやすいですよ」と明示できるので、チーム開発での環境差異を減らすことができます。

2. `.vscode/launch.json`

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "[Web]SWA: Run rag-sample",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:4280",
            "preLaunchTask": "swa: start rag-sample",
            "webRoot": "${workspaceFolder}/src/frontend/src",
            "timeout": 30000
        },
        {
            "name": "[API]Attach to Python Functions",
            "type": "python",
            "request": "attach",
            "port": 9092,
            "preLaunchTask": "func: host start"
        },
        {
            "name": "[Indexer]Python: indexer",
            "type": "python",
            "program": "${workspaceFolder}/scripts/indexer.py",
            "request": "launch",
            "console": "integratedTerminal",
            "python": "${workspaceFolder}/scripts/.venv/bin/python",
            "envFile": "${workspaceFolder}/scripts/.env",
            "args": [
                "--docs",
                "./data/*"
//                "--remove"
            ]
        }
    ]
}

役割
VS Code でデバッグを行うときの構成（アプリの起動方法やデバッガのアタッチ方法など） が書かれています。
このファイルがあるとどうなるか
- VS Code のデバッガパネルで、ここに定義されている configurations が自動でリスト表示されます。
- たとえば "[Web]SWA: Run rag-sample" を選んでデバッグ実行すると、指定したポートでアプリを起動し、Chrome で該当 URL を開いてくれます。
- "[API]Attach to Python Functions" はポート 9092 にアタッチする設定になっており、Functions をホスト起動後にPythonデバッグをアタッチするなど、複数のデバッグパターンを切り替えて使えるようになります。

3. `.vscode/settings.json`

{
    "azureFunctions.deploySubpath": "src/backend",
    "azureFunctions.scmDoBuildDuringDeployment": true,
    "azureFunctions.pythonVenv": ".venv",
    "azureFunctions.projectLanguage": "Python",
    "azureFunctions.projectRuntime": "~4",
    "debug.internalConsoleOptions": "neverOpen",
    "azureFunctions.projectLanguageModel": 2,
    "azurite.location": ".azurite"
}

役割
プロジェクト固有の VS Code 設定 を記述するファイルです。通常のユーザー設定（グローバル設定）よりも、このワークスペースにフォーカスした設定を優先させたいときに使います。
このファイルがあるとどうなるか
- たとえば azureFunctions.deploySubpath や azureFunctions.pythonVenv などは、Azure Functions のツール関連の設定を ワークスペース単位 で行っています。
- Azurite（ローカルの Azure Storage エミュレーター）のデータ保持場所を .azurite に設定するなど、これもプロジェクト固有のパスをVS Codeに教えているイメージです。
- debug.internalConsoleOptions: "neverOpen" はデバッグ時に VS Code の内部コンソールを自動で開かないようにする設定で、開発スタイルに合わせた挙動をカスタマイズできます。

4. `.vscode/tasks.json`

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "func",
			"label": "func: host start",
			"command": "host start",
			"problemMatcher": "$func-python-watch",
			"isBackground": true,
			"dependsOn": "pip install (functions)",
			"options": {
				"cwd": "${workspaceFolder}/src/backend"
			}
		},
		{
			"label": "pip install (functions)",
			"type": "shell",
			"osx": {
				"command": "${config:azureFunctions.pythonVenv}/bin/python -m pip install -r requirements.txt"
			},
			"windows": {
				"command": "${config:azureFunctions.pythonVenv}\\Scripts\\python -m pip install -r requirements.txt"
			},
			"linux": {
				"command": "${config:azureFunctions.pythonVenv}/bin/python -m pip install -r requirements.txt"
			},
			"problemMatcher": [],
			"options": {
				"cwd": "${workspaceFolder}/src/backend"
			}
		},
		{
			"type": "shell",
			"label": "swa start",
			"command": "swa start http://localhost:5173/ --api-devserver-url http://localhost:7071 --run \"npm run dev\"",
			"isBackground": true,
			"problemMatcher": [
				{
					"pattern": [
						{
							"regexp": ".",
							"file": 1,
							"location": 2,
							"message": 3
						}
					],
					"background": {
						"activeOnStart": true,
						"beginsPattern": ".",
						"endsPattern": "Waiting for .+7071 to be ready"
					}
				}
			],
			"options": {
				"cwd": "${workspaceFolder}/src/frontend"
			}
		}
	]
}

役割
VS Code で使用する タスク（ビルドやデプロイ、テストなどの自動化手順）を定義します。
このファイルがあるとどうなるか
- コマンドパレット Ctrl+Shift+P (Win) / Cmd+Shift+P (Mac) で「タスクの実行」を選ぶと、ここで定義された タスクのラベル が出てきます。
- たとえば "label": "func: host start" を実行すると、Azure Functions をローカルで起動してホストをスタートするコマンドが実行され、 "dependsOn" で別タスクに依存関係を指定していれば、事前に pip install (functions) が走る、といった流れを自動化してくれます。
- デバッグ構成（launch.json）でも preLaunchTask として定義されたタスクを実行し、アプリを起動してからデバッグを開始したりできます。

まとめ

extensions.json
- ワークスペース内で推奨する拡張機能を記述し、プロジェクトメンバーや自分自身の開発環境を統一・向上させる。
launch.json
- デバッグ構成の定義。URL やポート、アプリ起動前のタスクなどを指定し、複数のデバッグプロファイルを使い分けられる。
settings.json
- このワークスペースだけの VS Code 設定。Azure Functions のデプロイフォルダや仮想環境パスなど、プロジェクト固有の設定が中心。
tasks.json
- VS Code 上で実行するタスク（ビルド、デプロイ、ローカルサーバー起動など）を定義。
- デバッグ時の preLaunchTask と連携させれば、一連の作業を半自動化できる。

結果として、これらのファイルを整備しておくことで 開発環境構築やデバッグ・デプロイが一貫して行いやすくなる のが大きな利点です。
もし不要になったり、別の方法で管理する場合は削除・変更しても構いませんが、多くのチーム開発ではこれらを利用して 誰でも同じ手順で開発やデバッグができるように ワークスペース設定を共有しているケースが多いです。

◾️その他役立ちそうな記事