.vscodeフォルダ徹底解説：拡張機能の推奨からデバッグ構成、タスク管理

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

https://github.com/noriyukitakei/aoai-rag-starter/tree/main/.vscode

## 1. `.vscode/extensions.json`
```json
{
  "recommendations": [
    "ms-azuretools.vscode-azurefunctions",
    "ms-python.python",
    "ms-azuretools.vscode-azurestaticwebapps",
    "azurite.azurite"
  ]
}
```
- **役割**  
  このファイルに記述された拡張機能は、「このワークスペースではこれらの拡張機能を使うと便利なので導入を推奨しますよ」という **“推奨リスト”** です。  
- **このファイルがあるとどうなるか**  
  - VS Code でこのフォルダ（ワークスペース）を開いた際に、拡張機能パネルに **「推奨拡張機能」** として表示されます。  
  - 開発メンバー全員に「この拡張機能があると、開発やデバッグがしやすいですよ」と明示できるので、チーム開発での環境差異を減らすことができます。


## 2. `.vscode/launch.json`
```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`
```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`
```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` として定義されたタスクを実行し、アプリを起動してからデバッグを開始したりできます。



## まとめ

1. **extensions.json**  
   - ワークスペース内で推奨する拡張機能を記述し、プロジェクトメンバーや自分自身の開発環境を統一・向上させる。  

2. **launch.json**  
   - デバッグ構成の定義。URL やポート、アプリ起動前のタスクなどを指定し、複数のデバッグプロファイルを使い分けられる。  

3. **settings.json**  
   - このワークスペースだけの VS Code 設定。Azure Functions のデプロイフォルダや仮想環境パスなど、プロジェクト固有の設定が中心。  

4. **tasks.json**  
   - VS Code 上で実行するタスク（ビルド、デプロイ、ローカルサーバー起動など）を定義。  
   - デバッグ時の `preLaunchTask` と連携させれば、一連の作業を半自動化できる。

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

---

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

https://qiita.com/ShortArrow/items/0bacd3a4bcbcbac50e60

https://dev.classmethod.jp/articles/tasks-json-vscode-automation/

https://qiita.com/osorezugoing/items/bd17be156881c1fa0426