LoginSignup
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Aloha2691

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

Last updated at Posted at 2025-01-07

はじめに

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

まとめ

  1. extensions.json

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

  2. launch.json

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

  3. settings.json

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

  4. tasks.json

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

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

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

0
2
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
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?