الفصل المفقود في تعليم علوم الحاسوب › بيئة التطوير والأدوات 3 / 13 السابق التالي

بيئة التطوير والأدوات

بيئة التطوير (Development Environment) هي مجموعة من الأدوات المستخدمة لتطوير البرمجيات. في قلب بيئة التطوير توجد وظيفة تحرير النصوص (Text Editing)، إلى جانب ميزات مرافقة مثل تلوين الصيغة (Syntax Highlighting) والفحص النوعي (Type Checking) وتنسيق الكود (Code Formatting) والإكمال التلقائي (Autocomplete). بيئات التطوير المتكاملة (Integrated Development Environments - IDEs) مثل VS Code تجمع كل هذه الوظائف في تطبيق واحد. أما مسارات العمل المبنية على الطرفية (Terminal-Based Workflows) فتجمع بين أدوات مثل tmux (مُضاعِف الطرفية - Terminal Multiplexer)، وVim (محرر نصوص)، وZsh (مُعالج أوامر - Shell)، وأدوات سطر أوامر خاصة بلغة برمجة بعينها، مثل Ruff (مدقّق الكود (Linter) ومُنسِّق الكود الخاص بـPython) وMypy (المُدقِّق النوعي الخاص بـPython).

لكلٍّ من بيئات التطوير المتكاملة ومسارات العمل المبنية على الطرفية نقاط قوة وضعف. على سبيل المثال، قد يكون تعلّم بيئات التطوير المتكاملة الرسومية أسهل، كما أن بيئات التطوير الحالية عادةً ما تتمتع بتكاملات أفضل مع الذكاء الاصطناعي (AI) بشكل افتراضي مثل الإكمال التلقائي بالذكاء الاصطناعي؛ ومن ناحية أخرى، فإن مسارات العمل المبنية على الطرفية خفيفة الوزن، وقد تكون خيارك الوحيد في البيئات التي لا تتوفر فيها واجهة رسومية (GUI) أو لا يمكن فيها تثبيت برامج. ننصحك بتطوير إلمام أساسي بالمسارين معًا وإتقان واحد منهما على الأقل. وإذا لم يكن لديك بيئة تطوير متكاملة تفضّلها بالفعل، فننصحك بالبدء بـ VS Code.

في هذه المحاضرة، سنغطّي:

  • تحرير النصوص وVim
  • الذكاء اللغوي وخوادم اللغات
  • التطوير المدعوم بالذكاء الاصطناعي
  • الإضافات ووظائف بيئات التطوير الأخرى

تحرير النصوص وVim (Text Editing and Vim)

عند البرمجة، تقضي معظم وقتك في التنقل عبر الكود، وقراءة مقاطع منه، وإجراء تعديلات عليه، بدلًا من كتابة تدفقات طويلة أو قراءة الملفات من البداية إلى النهاية. Vim هو محرر نصوص مُحسَّن لهذا التوزيع من المهام.

فلسفة Vim. يقوم Vim على فكرة جميلة: واجهته هي بحد ذاتها لغة برمجة مصمَّمة للتنقل في النص وتحريره. ضغطات المفاتيح (بأسماء استذكارية - Mnemonic Names) هي أوامر، وهذه الأوامر قابلة للتركيب. يتجنّب Vim استخدام الفأرة لأنها بطيئة جدًا؛ بل يتجنّب حتى استخدام مفاتيح الأسهم لأنها تتطلب الكثير من حركة اليد. النتيجة: محرر يبدو كواجهة مباشرة بين الدماغ والحاسوب، ويطابق السرعة التي تفكّر بها.

دعم Vim في البرامج الأخرى. لا يتعيَّن عليك استخدام Vim نفسه للاستفادة من الأفكار الأساسية فيه. فالعديد من البرامج التي تتضمن أي نوع من تحرير النصوص تدعم "نمط Vim" (Vim Mode)، إما كوظيفة مدمجة أو كإضافة (Plugin). على سبيل المثال، لدى VS Code إضافة VSCodeVim، ولدى Zsh دعم مدمج لمحاكاة Vim، بل وحتى Claude Code يملك دعمًا مدمجًا لنمط محرر Vim. والأرجح أن أي أداة تستخدمها تتضمن تحرير النصوص ستدعم نمط Vim بشكل أو بآخر.

التحرير النمطي (Modal Editing)

Vim هو محرر نمطي (Modal Editor): له أوضاع تشغيل (Modes) مختلفة لفئات مختلفة من المهام.

  • العادي (Normal): للتنقل في الملف وإجراء التعديلات
  • الإدراج (Insert): لإدراج النص
  • الاستبدال (Replace): لاستبدال النص
  • البصري (Visual) (عادي، أو سطري، أو كتلي): لتحديد كتل من النص
  • سطر الأوامر (Command-line): لتنفيذ أمر

تختلف معاني ضغطات المفاتيح باختلاف وضع التشغيل. على سبيل المثال، الحرف x في وضع الإدراج سيدرج ببساطة الحرف "x" كحرف نصي، لكنه في الوضع العادي سيحذف الحرف الموجود تحت المؤشر، وفي الوضع البصري سيحذف التحديد.

في تكوينه الافتراضي، يعرض Vim الوضع الحالي في الأسفل على اليسار. الوضع الأولي/الافتراضي هو الوضع العادي. عمومًا ستقضي معظم وقتك بين الوضعين العادي والإدراج.

يمكنك تغيير الأوضاع بالضغط على <ESC> (مفتاح الهروب) للعودة من أي وضع إلى الوضع العادي. ومن الوضع العادي، تدخل وضع الإدراج بـi، ووضع الاستبدال بـR، والوضع البصري بـv، والوضع البصري السطري بـV، والوضع البصري الكتلي بـ<C-v> (Ctrl-V، ويُكتب أحيانًا ^V)، ووضع سطر الأوامر بـ:

ستستخدم مفتاح <ESC> كثيرًا عند استخدام Vim: فكِّر في إعادة تعيين مفتاح Caps Lock ليصبح مفتاح Escape (تعليمات لنظام macOS) أو أنشئ تعيينًا بديلًا لـ<ESC> بتسلسل مفاتيح بسيط.

الأساسيات: إدراج النص

من الوضع العادي، اضغط i للدخول إلى وضع الإدراج. الآن، يتصرف Vim كأي محرر نصوص آخر، حتى تضغط <ESC> للعودة إلى الوضع العادي. هذا، إلى جانب الأساسيات الموضحة أعلاه، هو كل ما تحتاجه للبدء في تحرير الملفات باستخدام Vim (وإن لم يكن بكفاءة خاصة إذا كنت تقضي كل وقتك في التحرير من وضع الإدراج).

واجهة Vim هي لغة برمجة

واجهة Vim هي لغة برمجة. ضغطات المفاتيح (بأسماء استذكارية) هي أوامر، وهذه الأوامر تتركَّب. يتيح ذلك حركة وتعديلات فعّالة، خاصةً بمجرد أن تصبح الأوامر ذاكرة عضلية، تمامًا كما تصبح الكتابة فعّالة جدًا بمجرد تعلُّمك تخطيط لوحة المفاتيح.

الحركة

ينبغي أن تقضي معظم وقتك في الوضع العادي، مستخدمًا أوامر الحركة للتنقل في الملف. تسمى الحركات في Vim أيضًا "الأسماء" (Nouns)، لأنها تشير إلى قطع من النص.

  • الحركة الأساسية: hjkl (يسار، أسفل، أعلى، يمين)
  • الكلمات: w (الكلمة التالية)، b (بداية الكلمة)، e (نهاية الكلمة)
  • الأسطر: 0 (بداية السطر)، ^ (أول حرف غير فارغ)، $ (نهاية السطر)
  • الشاشة: H (أعلى الشاشة)، M (وسط الشاشة)، L (أسفل الشاشة)
  • التمرير: Ctrl-u (أعلى)، Ctrl-d (أسفل)
  • الملف: gg (بداية الملف)، G (نهاية الملف)
  • أرقام الأسطر: :{number}<CR> أو {number}G (السطر رقم {number})
    • يشير <CR> إلى مفتاح الإرجاع/Enter
  • متنوعة: % (العنصر المطابق، مثل قوس أو قوس معقوف)
  • البحث عن حرف: f{character}، t{character}، F{character}، T{character}
    • البحث/الانتقال إلى الأمام/الخلف نحو {character} في السطر الحالي
    • , / ; للتنقل بين التطابقات
  • البحث عن نمط: /{regex}، ثم n / N للتنقل بين التطابقات

التحديد

أوضاع التحديد البصري:

  • البصري: v
  • البصري السطري: V
  • البصري الكتلي: Ctrl-v

يمكنك استخدام مفاتيح الحركة لتكوين التحديد.

التعديلات

كل ما كنت تفعله بالفأرة، تفعله الآن بلوحة المفاتيح باستخدام أوامر التعديل التي تتركَّب مع أوامر الحركة. هنا تبدأ واجهة Vim في الظهور كلغة برمجة. تُسمى أوامر التعديل في Vim أيضًا "الأفعال" (Verbs)، لأن الأفعال تؤثر على الأسماء.

  • i الدخول إلى وضع الإدراج
    • لكن للتلاعب بالنص أو حذفه، ستحتاج إلى أكثر من مفتاح Backspace
  • o / O إدراج سطر أدناه / أعلاه
  • d{motion} حذف {motion}
    • مثال: dw تحذف كلمة، d$ تحذف حتى نهاية السطر، d0 تحذف حتى بداية السطر
  • c{motion} تغيير {motion}
    • مثال: cw تغيّر كلمة
    • تعمل مثل d{motion} متبوعة بـi
  • x حذف حرف (تعادل dl)
  • s استبدال حرف (تعادل cl)
  • الوضع البصري + التلاعب
    • حدّد النص، ثم d لحذفه أو c لتغييره
  • u للتراجع (Undo)، و<C-r> لإعادة التنفيذ (Redo)
  • y للنسخ / "الانتقاء" (Yank) (بعض الأوامر الأخرى مثل d تنسخ أيضًا)
  • p للصق
  • المزيد لتتعلمه: على سبيل المثال، ~ يعكس حالة حرف (أحرف كبيرة/صغيرة)، وJ يدمج الأسطر معًا

العدّادات (Counts)

يمكنك دمج الأسماء والأفعال مع عدد (Count)، والذي سينفّذ إجراءً معيّنًا عددًا من المرات.

  • 3w انتقل 3 كلمات إلى الأمام
  • 5j انتقل 5 أسطر إلى الأسفل
  • 7dw احذف 7 كلمات

المعدِّلات (Modifiers)

يمكنك استخدام معدِّلات لتغيير معنى الاسم. بعض المعدِّلات هي i، والتي تعني "الداخل" أو "الوسط"، وa، والتي تعني "حول".

  • ci( غيّر المحتويات داخل زوج الأقواس الحالي
  • ci[ غيّر المحتويات داخل زوج الأقواس المعقوفة الحالي
  • da' احذف النص المفرد المقتبس، بما في ذلك علامات الاقتباس المفردة المحيطة به

تجميع كل ذلك معًا

هذا تنفيذ fizz buzz معطوب:

def fizz_buzz(limit):
    for i in range(limit):
        if i % 3 == 0:
            print("fizz", end="")
        if i % 5 == 0:
            print("fizz", end="")
        if i % 3 and i % 5:
            print(i, end="")
        print()

def main():
    fizz_buzz(20)

نستخدم تسلسل الأوامر التالي لإصلاح المشكلات، بدءًا من الوضع العادي:

  • الدالة main لا تُستدعى أبدًا
    • G للقفز إلى نهاية الملف
    • o لـفتح (o) سطر جديد أسفل
    • اكتب if __name__ == "__main__": main()
      • إذا كان محررك يدعم لغة Python، فقد يقوم ببعض الإزاحة التلقائية (Auto-indentation) أثناء وجودك في وضع الإدراج
    • <ESC> للعودة إلى الوضع العادي
  • يبدأ العد من 0 بدلًا من 1
    • / متبوعًا بـrange ثم <CR> للبحث عن "range"
    • ww للتحرك كلمتين إلى الأمام (يمكنك أيضًا استخدام 2w، لكن عمليًا، للأعداد الصغيرة من الشائع تكرار المفتاح بدلًا من استخدام خاصية العد)
    • i للتبديل إلى وضع الإدراج، وأضف 1,
    • <ESC> للعودة إلى الوضع العادي
    • e للقفز إلى نهاية (e) الكلمة التالية
    • a للبدء في إلحاق (a) نص، وأضف + 1
    • <ESC> للعودة إلى الوضع العادي
  • يطبع "fizz" لمضاعفات الرقم 5
    • :6<CR> للانتقال إلى السطر 6
    • ci" لتغيير (c) ما داخل (i) علامتي الاقتباس "، غيّره إلى "buzz"
    • <ESC> للعودة إلى الوضع العادي

تعلُّم Vim

أفضل طريقة لتعلُّم Vim هي تعلُّم الأساسيات (ما غطّيناه حتى الآن) ثم تفعيل نمط Vim في جميع برامجك والبدء في استخدامه عمليًا. تجنّب إغراء استخدام الفأرة أو مفاتيح الأسهم؛ في بعض المحررات، يمكنك إلغاء ربط مفاتيح الأسهم لإجبار نفسك على بناء عادات جيدة.

موارد إضافية

الذكاء اللغوي وخوادم اللغات (Code Intelligence and Language Servers)

توفر بيئات التطوير المتكاملة عمومًا دعمًا خاصًا باللغة يتطلب فهمًا دلاليًا (Semantic Understanding) للكود، وذلك من خلال إضافات تتصل بـ_خوادم اللغات_ (Language Servers) التي تنفّذ بروتوكول خادم اللغة (Language Server Protocol - LSP). على سبيل المثال، تعتمد إضافة Python في VS Code على Pylance، وتعتمد إضافة Go في VS Code على gopls الرسمية من الجهة الأولى. من خلال تثبيت الإضافة وخادم اللغة للغات التي تعمل بها، يمكنك تفعيل العديد من الميزات الخاصة باللغة في بيئة التطوير المتكاملة الخاصة بك، مثل:

  • إكمال الكود (Code Completion). إكمال واقتراح تلقائي أفضل، مثل القدرة على رؤية حقول وطرق الكائن بعد كتابة object..
  • التوثيق المضمّن (Inline Documentation). رؤية التوثيق عند التمرير (Hover) وعند الاقتراح التلقائي.
  • القفز إلى التعريف (Jump-to-Definition). القفز من موضع الاستخدام إلى التعريف، مثل الانتقال من مرجع حقل object.field إلى تعريف الحقل.
  • العثور على المراجع (Find References). عكس ما سبق؛ البحث عن جميع المواضع التي يُشار فيها إلى عنصر معيّن مثل حقل أو نوع.
  • المساعدة في الاستيراد. تنظيم عمليات الاستيراد، وإزالة عمليات الاستيراد غير المستخدمة، والتنبيه إلى عمليات الاستيراد المفقودة.
  • جودة الكود (Code Quality). يمكن استخدام هذه الأدوات بشكل مستقل، لكن هذه الوظيفة غالبًا ما توفّرها خوادم اللغات أيضًا. تنسيق الكود يعمل على إزاحة وتنسيق الكود تلقائيًا، والمدقّقون النوعيون ومدقّقو الكود (Linters) يكتشفون الأخطاء في كودك أثناء الكتابة. سنغطّي هذه الفئة من الوظائف بمزيد من العمق في محاضرة جودة الكود.

إعداد خوادم اللغات

بالنسبة لبعض اللغات، كل ما تحتاج إليه هو تثبيت الإضافة وخادم اللغة، وستكون جاهزًا. أما بالنسبة للغات أخرى، فلكي تحصل على أقصى فائدة من خادم اللغة، ستحتاج إلى إخبار بيئة التطوير المتكاملة ببيئتك. على سبيل المثال، توجيه VS Code إلى بيئة Python الخاصة بك سيمكن خادم اللغة من رؤية الحزم المثبّتة لديك. تُغطّى البيئات (Environments) بمزيد من العمق في محاضرةنا عن تغليف وشحن الكود.

اعتمادًا على اللغة، قد توجد بعض الإعدادات التي يمكنك تهيئتها لخادم اللغة. على سبيل المثال، باستخدام دعم Python في VS Code، يمكنك تعطيل الفحص النوعي الثابت (Static Type Checking) للمشاريع التي لا تستخدم التعليقات النوعية الاختيارية في Python.

التطوير المدعوم بالذكاء الاصطناعي (AI-Powered Development)

منذ إطلاق GitHub Copilot باستخدام نموذج Codex من OpenAI في منتصف عام 2021، أصبحت نماذج اللغات الكبيرة (Large Language Models - LLMs) مستخدمة على نطاق واسع في هندسة البرمجيات. هناك ثلاثة أشكال رئيسية قيد الاستخدام الآن: الإكمال التلقائي، والدردشة المضمّنة، ووكلاء البرمجة (Coding Agents).

الإكمال التلقائي (Autocomplete)

الإكمال التلقائي المدعوم بالذكاء الاصطناعي له نفس شكل الإكمال التلقائي التقليدي في بيئة التطوير المتكاملة الخاصة بك، إذ يقترح إكمالات في موضع المؤشر أثناء الكتابة. أحيانًا يُستخدم كخاصية سلبية "تعمل ببساطة". وما بعد ذلك، فإن الإكمال التلقائي بالذكاء الاصطناعي يُوجَّه عمومًا باستخدام التلميحات (Prompts) من خلال تعليقات الكود.

على سبيل المثال، لنكتب سكربتًا لتنزيل محتويات هذه الملاحظات الدراسية واستخراج جميع الروابط منها. يمكننا أن نبدأ بـ:

import requests

def download_contents(url: str) -> str:

سيقوم النموذج بإكمال جسم الدالة تلقائيًا:

    response = requests.get(url)
    return response.text

يمكننا توجيه عمليات الإكمال بشكل أكبر باستخدام التعليقات. على سبيل المثال، إذا بدأنا بكتابة دالة لاستخراج جميع روابط Markdown، لكنها لا تملك اسمًا وصفيًا بشكل خاص:

def extract(contents: str) -> list[str]:

سيقوم النموذج بإكمال شيء كهذا تلقائيًا:

    lines = contents.splitlines()
    return [line for line in lines if line.strip()]

يمكننا توجيه الإكمال من خلال تعليقات الكود:

def extract(content: str) -> list[str]:
    # extract all Markdown links from the content

هذه المرة، يعطي النموذج إكمالًا أفضل:

    import re
    pattern = r'\[.*?\]\((.*?)\)'
    return re.findall(pattern, content)

هنا، نرى جانبًا سلبيًا واحدًا لهذه الأداة البرمجية المدعومة بالذكاء الاصطناعي: يمكنها تقديم إكمالات فقط في موضع المؤشر. في هذه الحالة، ستكون الممارسة الأفضل هي وضع import re على مستوى الوحدة (Module Level)، بدلًا من داخل الدالة.

استخدم المثال أعلاه دالة ضعيفة التسمية لتوضيح كيف يمكن توجيه إكمال الكود باستخدام التعليقات؛ عمليًا، سترغب في كتابة كود بدوال ذات أسماء وصفية أكثر، مثل extract_links، وسترغب في كتابة نصوص توثيق (Docstrings) (وبناءً على ذلك، ينبغي أن يولّد النموذج إكمالًا مشابهًا لما سبق).

لأغراض العرض التوضيحي، يمكننا إكمال السكربت:

print(extract(download_contents("https://raw.githubusercontent.com/missing-semester/missing-semester/refs/heads/master/_2026/development-environment.md")))

الدردشة المضمّنة (Inline Chat)

تتيح لك الدردشة المضمّنة تحديد سطر أو كتلة ثم مطالبة نموذج الذكاء الاصطناعي مباشرةً باقتراح تعديل. في وضع التفاعل هذا، يمكن للنموذج إجراء تغييرات على الكود الموجود (وهذا يختلف عن الإكمال التلقائي، الذي يكمل الكود فقط بعد المؤشر).

متابعةً للمثال السابق، لنفترض أننا قررنا عدم استخدام مكتبة requests الخارجية. يمكننا تحديد الأسطر الثلاثة ذات الصلة من الكود، واستدعاء الدردشة المضمّنة، وكتابة شيء مثل:

use built-in libraries instead

يقترح النموذج:

from urllib.request import urlopen

def download_contents(url: str) -> str:
    with urlopen(url) as response:
        return response.read().decode('utf-8')

وكلاء البرمجة (Coding Agents)

تُغطّى وكلاء البرمجة (Coding Agents) بالتفصيل في محاضرة البرمجة الوكيلة (Agentic Coding).

البرامج الموصى بها

بعض بيئات التطوير المتكاملة المدعومة بالذكاء الاصطناعي الشائعة هي VS Code مع إضافة GitHub Copilot وCursor. يتوفر GitHub Copilot حاليًا مجانًا للطلاب، وللمعلمين، ولصانعي المشاريع مفتوحة المصدر الشهيرة. هذا مجال يتطور بسرعة. معظم المنتجات الرائدة لديها وظائف متكافئة تقريبًا.

الإضافات ووظائف بيئات التطوير الأخرى (Extensions and Other IDE Functionality)

بيئات التطوير المتكاملة أدوات قوية، تصبح أكثر قوة بفضل الإضافات (Extensions). لا يمكننا تغطية كل هذه الميزات في محاضرة واحدة، لكننا هنا نقدم بعض الإشارات إلى إضافات شائعة. نشجعك على استكشاف هذا المجال بنفسك؛ فهناك العديد من قوائم إضافات بيئات التطوير الشائعة المتاحة على الإنترنت، مثل Vim Awesome لإضافات Vim وإضافات VS Code مرتبة حسب الشعبية.

  • حاويات التطوير (Development Containers): تدعمها بيئات التطوير المتكاملة الشهيرة (مثلًا تدعمها VS Code)، وتتيح لك حاويات التطوير استخدام حاوية (Container) لتشغيل أدوات التطوير. يمكن أن يكون ذلك مفيدًا لقابلية النقل (Portability) أو العزل (Isolation). تغطّي محاضرة تغليف وشحن الكود الحاويات بمزيد من العمق.
  • التطوير عن بُعد (Remote Development): التطوير على جهاز بعيد باستخدام SSH (مثلًا باستخدام إضافة Remote SSH في VS Code). يمكن أن يكون ذلك مفيدًا، على سبيل المثال، إذا أردت تطوير وتشغيل الكود على جهاز مزوّد بوحدة معالجة رسومية (GPU) قوية في السحابة.
  • التحرير التعاوني (Collaborative Editing): تحرير نفس الملف بأسلوب Google Docs (مثلًا باستخدام إضافة Live Share في VS Code).

تمارين

  1. فعِّل نمط Vim في جميع البرامج التي تستخدمها التي تدعمه، مثل محررك ومُعالج الأوامر الخاص بك، واستخدم نمط Vim لكل تحرير النصوص خلال الشهر القادم. كلما بدا لك شيء غير فعّال، أو عندما تفكّر "لا بد أن هناك طريقة أفضل"، حاول البحث عنه في Google؛ فمن المرجح أن توجد طريقة أفضل.
  2. أكمل تحديًا من VimGolf.
  3. هيِّئ إضافة بيئة تطوير متكاملة وخادم لغة لمشروع تعمل عليه. تأكد من أن جميع الوظائف المتوقعة، مثل القفز إلى التعريف لتبعيات المكتبات، تعمل كما ينبغي. إذا لم يكن لديك كود يمكنك استخدامه لهذا التمرين، فيمكنك استخدام مشروع مفتوح المصدر من GitHub (مثل هذا المشروع).
  4. تصفّح قائمة بإضافات بيئات التطوير المتكاملة وقم بتثبيت إضافة تبدو مفيدة لك.