VS Code

المتطلبات الأساسية

1. VS Code
2. إضافة Dev Containers (ms-vscode-remote.remote-containers)
3. Docker أو Podman يعمل على جهازك (انظر البدء). تدعم إضافة VS Code Dev Containers أيضًا Podman كواجهة خلفية.

البدء السريع

git clone https://github.com/f5-sales-demo/devcontainer.git
code devcontainer

يكتشف VS Code ملف .devcontainer/devcontainer.json ويعرض إشعارًا: “إعادة الفتح في الحاوية”. انقر عليه، أو استخدم لوحة الأوامر:

Dev Containers: Reopen in Container

يقوم VS Code ببناء (أو سحب) الصورة، ويشغّل الحاوية، ويثبّت الإضافات، ويفتح طرفية داخل الحاوية.

كيف يعمل

يخبر ملف .devcontainer/devcontainer.json برنامج VS Code باستخدام Docker Compose:

"dockerComposeFile": ["../docker-compose.yml", "../docker-compose.build.yml"],
"service": "dev",
"workspaceFolder": "/workspace"

يتضمن تكوين devcontainer بشكل صريح ملف البناء، حتى يتمكن VS Code من بناء الصورة محليًا عند استخدام “إعادة الفتح في الحاوية” أو “إعادة بناء الحاوية”.

الإضافات

يتم تثبيت الإضافات تلقائيًا داخل الحاوية:

الإضافة	الوصف
Python	دعم لغة Python
ESLint	فحص أكواد JavaScript/TypeScript
Prettier	تنسيق الأكواد
Docker	دعم Dockerfile و compose
Terraform	دعم لغة HCL
Go	دعم لغة Go
Rust Analyzer	دعم لغة Rust
YAML	دعم لغة YAML
Kubernetes	دعم ملفات Kubernetes

لإضافة إضافات، عدّل مصفوفة customizations.vscode.extensions في .devcontainer/devcontainer.json.

إعادة توجيه المنافذ

يقوم VS Code تلقائيًا بإعادة توجيه المنافذ المحددة في ملف compose. شاشة noVNC متاحة على http://localhost:6080/vnc.html — سيُعلمك VS Code عندما يكون المنفذ جاهزًا.

يمكن إعادة توجيه منافذ إضافية حسب الطلب من لوحة المنافذ في VS Code.

بديل سطر أوامر Devcontainer

إذا كنت تفضل سطر الأوامر على واجهة VS Code:

npm install -g @devcontainers/cli

devcontainer up --workspace-folder .
devcontainer exec --workspace-folder . zsh

إعادة البناء

بعد تغيير Dockerfile أو ملفات compose:

Dev Containers: Rebuild Container

يؤدي هذا إلى إعادة بناء الصورة وإعادة تشغيل الحاوية. تستمر وحدات التخزين المسماة (workspace، home) عبر عمليات إعادة البناء.