دليل المبتدئين لـ Visual Studio Code و Git – techsyncer

تلك الذين يعملون مؤخرًا مع برنامج Visual Studio (VS) Code قد يرون محررًا للشفرة فقط. القوة الحقيقية لـ VS Code تكمن في امتداداتها والطرفية المتكاملة وميزات أخرى. في هذا البرنامج التعليمي العملي، ستتعلم كيفية استخدام برنامج Visual Studio Code من خلال العمل مع مستودع Git.

سوف تقوم باستخدام أدوات VS Code المضمنة وبضع امتدادات لكتابة الشفرة والتزام تلك الشفرة إلى التحكم في المصدر باستخدام واجهة واحدة.

هذه المقالة هي مقتطف من فصل في كتاب من المسؤول إلى DevOps: الطريقة في DevOps في Azure. إذا أعجبك هذا الفصل وترغب في معرفة المزيد عن كيفية القيام بـ DevOps في Azure، فتحقق منه!

نظرة عامة على البرنامج التعليمي

في هذا البرنامج التعليمي، ستتعلم كيفية استخدام ميزات مختلفة من VS Code على نظام Windows من خلال بناء مشروع باستخدام برنامج Visual Studio Code و Git. تم تكليفك بمعرفة كيفية إنشاء Azure VM بواسطة Terraform كمشروع دليل صغير (POC). لديك VS Code وسمعت عن قدرته كبديل كامل لبيئة التطوير المتكاملة وتريد اختباره.

ستقوم بما يلي:

إنشاء مساحة عمل في VS Code لمشاركتها مع فريقك
تثبيت امتداد Terraform
تعديل ملف تكوين Terraform ليلائم توجيهات التسمية الخاصة بك واشتراك Azure
مقتطف لمهمة شائعة وجدت نفسك تكتبها مرارًا وتكرارًا
التزام ملف تكوين Terraform إلى مستودع Git

لن يكون هذا البرنامج التعليمي مخصصًا لعرض كيفية استخدام Terraform لنشر أجهزة الكمبيوتر الظاهرية في Azure. لدينا بالفعل مقال حول Terraform وأجهزة الكمبيوتر الظاهرية في Azure لذلك. سيتم التركيز في هذا البرنامج التعليمي على تعلم بيئة تطوير Visual Studio Code.

هل يبدو هذا مثيرًا للاهتمام كمشروع؟ إذا كان الأمر كذلك، فاستمر في القراءة للبدء!

المتطلبات

لمتابعة هذا البرنامج التعليمي حول Git في Visual Studio Code، يرجى التأكد من وجود ما يلي:

VS Code – ستكون جميع الأمثلة تستخدم VS Code 1.44 على الرغم من أن الإصدارات السابقة من المحتمل أن تعمل أيضًا.
Terraform – ستستخدم جميع الأمثلة Terraform لـ Windows v0.12.24.
Git for Windows مثبتة – ستستخدم جميع الأمثلة الإصدار 2.26. إذا كنت ترغب في جعل VS Code محرر Git الافتراضي، تأكد من تحديدها أثناء التثبيت.

انسخ مستودع Git

نظرًا لأن هذا البرنامج التعليمي سيركز على العمل مع الشيفرة في مستودع GitHub، فإن مهمتك الأولى هي استنساخ هذا المستودع إلى جهاز الكمبيوتر المحلي الخاص بك.

لهذا المشروع، ستعمل من مستودع GitHub يسمى VSCodeDemo. نظرًا لأن لدى VS Code تكاملًا طبيعيًا مع Git، يمكنك استنساخ مستودع Git دون أية تكوينات إضافية. للقيام بذلك:

افتح لوحة الأوامر باستخدام Ctrl-Shift-P، اكتب git حيث ستلاحظ خيارات مختلفة كما هو موضح أدناه.

2. اختر Git: استنساخ الذي سيطلب منك VS Code بعدها عن رابط المستودع. هنا، قم بتوفير الرابط https://github.com/NoBSDevOps/VSCodeDemo.git واضغط على Enter.

3. اختر مجلدًا لوضع ملفات المشروع المستنسخة. سيضع هذا المشروع مجلد المستودع في جذر C:\. بمجرد اختيار موقع المستودع، سيقوم VS Code بتشغيل git.exe في الخلفية واستنساخ المستودع إلى جهازك.

4. عند الانتهاء، سيطلب منك VS Code ما إذا كنت ترغب في فتح المستودع المستنسخ على الفور كما هو موضح أدناه، انقر فوق فتح للقيام بذلك.

الآن لديك مجلد مفتوح في VS Code للمستودع Git. الآن تحتاج إلى “حفظ” هذا المجلد المفتوح وجميع الإعدادات التي ستقوم بها في مساحة العمل.

إنشاء مساحة عمل

الآن بعد أن لديك مجلد مفتوح يحتوي على مستودع Git، احفظ مساحة عمل عن طريق الانتقال إلى قائمة الملف والنقر على حفظ مساحة العمل باسم….

احفظ مساحة العمل كـ مشروع في مجلد المشروع. سيقوم VS Code بإنشاء ملف يسمى project.code-workspace في مجلد مستودع Git. تعرف هذه المساحة العمل الآن على المجلد الذي فتحته. الآن عند فتح المساحة العمل في المستقبل، سيتم فتح المجلد C:\VSCodeDemo تلقائيًا.

الآن، بدلاً من اسم المجلد، سترى اسم المساحة العمل.

إعداد التوسيعات

التوسيعات هي واحدة من أكثر الميزات فائدة في VS Code. تتيح التوسيعات لك إضافة وظائف للمساعدة في إدارة العديد من المشاريع المختلفة. في هذا البرنامج التعليمي، ستعمل مع Terraform.

افتح أحد ملفات تكوين Terraform في المساحة العمل على الشريط الجانبي الأيسر. لاحظ كيف يتم فتح علامة تبويب محرر ويظهر النص ولكن هذا هو كل شيء. لا يوجد تحديد بناء الجملة المعتاد أو أي ميزات أخرى. يعتقد VS Code أن هذا ملف نصي عادي ويعرضه وفقًا لذلك. دعونا نصحح ذلك.

No syntax highlighting for a Terraform configuration file

لكي يفهم VS Code ملف تكوين Terraform، تحتاج إلى توسيعة. التوسيعات هي جزء هام من VS Code الذي يفتح عالمًا جديدًا من الوظائف. في هذه الحالة، تحتاج إلى توسيعة Terraform للمساعدة في بناء ملفات تكوين Terraform ونشر البنية التحتية باستخدام Terraform.

لتثبيت توسيعة Terraform، انقر على زر التوسيعات على شريط الأنشطة وابحث عن terraform. سترى توسيعات متعددة ولكن لهذا المشروع، انقر فوق تثبيت للنتيجة الأعلى التي أنشأها Mikael Olenfalk. سيقوم VS Code بتثبيت التوسيعة.

بمجرد التثبيت، انتقل إلى مساحة العمل وانقر على أحد ملفات TF في المساحة. سترى فورًا إحدى الفروق الأكثر وضوحًا عند استخدام الامتداد، وهي تلوين الصيغة.

الآن يمكنك أن ترى في لقطة الشاشة التالية أن VS Code “يعرف” ما هو تعليق (من خلال جعله أخضر)، وما هو سلسلة (من خلال جعلها حمراء)، وهكذا. أصبح من السهل الآن قراءة ملف تكوين Terraform.

Terraform syntax-highlighting performed by the VS Code Terraform extension

هناك الكثير من الوظائف الإضافية المتضمنة في امتداد Terrafom الخاص بـ Mikael. تأكد من استكشاف جميع الفوائد المحتملة التي يمكنك الحصول عليها من هذا الامتداد عند استخدام Terraform.

تحرير الكود

من المرجح أنه عند العثور على نص أو ملف تكوين على الإنترنت، لن يكون بالضرورة كما تحتاجه بالضبط. ستحتاج إلى تعديله بطريقة ما.

في مثال هذا للبرنامج التعليمي، ترغب في تغيير تسمية الكتلة main في infrastructure-before.tf. ملف تكوين Terraform إلى project على سبيل المثال. للقيام بذلك، ستحتاج إلى البحث عن النص واستبداله. في VS Code، هناك طرق متعددة للقيام بذلك.

واحدة من أكثر الطرق شيوعًا للعثور على سلسلة واستبدالها بأخرى هي البحث واستبدال الوظيفة الجيدة القديمة.

اضغط على Ctrl-F وسوف تظهر لك نافذة حوارية مشابهة للصورة التوضيحية التالية. هنا يمكنك كتابة السلسلة التي ترغب في العثور عليها وإذا قمت بالنقر على السهم الأسفل ، فسوف يتم توسيعها وتوفير مكان لإدخال سلسلة لاستبدالها بها. في الصورة التوضيحية أدناه ، يمكنك رؤية خيارات مثل Aa و Ab| للبحث الحساس لحالة الأحرف وكذلك التعبيرات العادية.

يمكنك أيضًا القيام بعملية “البحث والاستبدال” باستخدام Ctrl-D. ببساطة حدد النص الذي ترغب في العثور عليه وابدأ في الضغط على Ctrl-D. ستجد أن VS Code سيبدأ في تمييز كل حالة من تلك السلسلة بمؤشر وامض.

عندما تحدد جميع العناصر ، ابدأ الكتابة ويقوم VS Code بتغيير جميع الحالات مرة واحدة تمامًا كما لو كنت قد حددت كل واحدة بشكل فردي.

Synchronizing changes with multiple cursors

توفير الوقت باستخدام القوالب

لنفترض أنك تهتم حقًا بـ Terraform و Azure وتعبت من كتابة كتلة ملف تكوين Terraform لإنشاء مجموعة موارد Azure الجديدة في مقتطف الشفرة التالي.

resource "azurerm_resource_group" "<element name>" {
    name     = "<resource group name>"
    location = "<region>"
}

لتوفير الوقت في إنشاء هذه الكتل ، قم بإنشاء نموذج VS Code.

لإنشاء نموذج VS Code:

انسخ كتلة azurerm_resource_group من ملف تكوين Terraform Infrastructure-before.tf .

2. افتح لوحة الأوامر بالضغط على Ctrl-Shift-P.

3. اكتب “قصاصات” لتصفية قائمة الخيارات.

٤. اختر التفضيلات: تكوين مقتطفات المستخدم. يظهر لك قائمة بجميع ملفات المقتطفات عادةً مفصولة حسب اللغة.

٥. اكتب “terraform” لتصفية مقتطفات Terraform.

٦. اختر terraform (Terraform) لفتح ملف مقتطفات Terraform (terraform.json).

مع ملف مقتطفات Terraform مفتوح، احذف جميع التعليقات وانسخ/الصق العنصر JSON التالي داخله.

{
     "Create Azure Resource Group Block": {
         "prefix": "rg",
         "body": [
             "resource \"azurerm_resource_group\" \"${1:block label}\" {",
             "\tname     = \"${2:name}\"",
             "\tlocation = \"${3:region}\"",
             "}"
          ],
          "description": "Creates a Terraform Azure Resource Group block"
      }
 }

لاحظ استخدام \t وشرطات العكس. لا يمكنك وضع محارف التبويب مباشرة داخل مقتطف. لتمثيل محرف تبويب، يجب عليك استخدام \t. أيضًا، يجب عليك تهريب الأحرف مثل علامات اقتباس مزدوجة، وعلامات الدولار، والأقواس المتعرجة، وشرطات العكس باستخدام شرطة العكس.

٨. احفظ ملف terraform.json.

٩. عد إلى ملف تكوين Terraform واكتب “rg”. انتبه الآن إلى أنك ترى خيارًا لتوسيع مقتطف.

١٠. اختر مقتطف rg كما هو موضح أعلاه. لاحظ أنه يتم الآن توسيعه إلى المقتطف الذي أنشأته للتو بثلاث عناصر مظللة.

تمييز VS Code لكلمات كل منها لتكون بمثابة أماكن نسبية بسبب المتغيرات المعرفة في ملف مقتطفات terraform.json (${1:block label}).

في هذه المرحلة، يمكنك الضغط على Tab وببساطة كتابة القيم التي تحتاجها دون القلق بشأن كيفية إنشاء الكتلة نفسها.

للحصول على تفصيل كامل حول بنية مقتطف النص، تأكد من التحقق من وثائق مقتطفات Visual Studio Code.

قم برفع الكود إلى Git

في هذه النقطة، لقد استنسخت مستودع GitHub العام الذي يحتوي على ملفات تكوين Terraform. لقد قمت بتحرير بعض الملفات والآن أنت جاهز لإعادة تلك التغييرات إلى مستودع GitHub.

لإعادة التغييرات إلى مستودع GitHub، يجب عليك أولاً استخدام برنامج Visual Studio Code و Git لتعيين التغييرات في مستودع Git المحلي الذي تم استنساخه. عندما قمت بإستنساخ مستودع GitHub سابقًا، لم تقم بتحميل الملفات التكوين فقط ولكن أيضًا مستودع Git.

إذا كنت تتابع، يجب أن يكون لديك الآن مستودع Git المستنسخ مفتوحًا مع عدد من التغييرات المعلقة، اثنان تحديدًا. كيف تعرف ذلك؟ من خلال ملاحظة العدد في شريط النشاط، كما هو موضح أدناه.

عندما يكون لديك مستودع Git مفتوحًا في برنامج Visual Studio Code، ستحصل على لمحة عن عدد الملفات التي يمكنك تحميلها وتعيينها في مستودع Git محلي في شريط النشاط.

انقر فوق عنصر Source Control على اليسار وسترى عنصرين؛ ملف تكوين Terraform (infrastructure-before.tf) والمساحة العمل التي قمت بحفظها سابقًا (project.code-workspace). سيكون لدى ملف التكوين علامة M حمراء على اليمين تشير إلى أنه تم تعديله. سيكون لدى ملف المساحة العمل علامة U خضراء على اليمين لأنه لم يتم تعقبه مما يعني أنه ليس تحت التحكم في إصدار البرنامج.

لضمان عودة هاتين الملفتين إلى مستودع GitHub، أنشئ أولاً رسالة commit مفيدة تشير إلى سبب قيامك بعملية commit لهذه الملفات. يمكن أن تكون الرسالة أي ملخص وصفي. بمجرد كتابة رسالة commit، قم بتنظيم التغييرات. يضيف تنظيم التغييرات في Git في Visual Studio Code محتوى الملفات إلى منطقة التنظيم استعدادًا للقيام بعملية commit إلى المستودع.

أثناء التنقل على لوحة Source Control، انقر على الرمز + بجوار كل ملف لتنظيمها كما هو موضح أدناه.

بمجرد التنظيم، انقر على علامة الصح لـ commit جميع التغييرات المنظمة، كما هو موضح أدناه.

ربما تتلقى رسالة خطأ تشير إلى أنه يجب عليك تكوين user.name و user.email في Git.

Your Git user is not defined in the Git configuration

لا مشكلة. تحتاج فقط إلى توفير Git بالمعلومات التي يحتاجها. للقيام بذلك، انتقل إلى الطرفية المتكاملة لـ VS Code وقم بتشغيل الأمرين التاليين مع تغيير عنوان البريد الإلكتروني الخاص بي واسمك إلى الخاص بك.

git config --global user.email "[email protected]"
git config --global user.name "Adam Bertram"

حاول الآن commit للملفات. يجب أن ترى الآن أن الملفات قد تمت commit إلى المستودع.

يمكنك تنظيم جميع الملفات التي تم تغييرها دون النقر يدويًا على + بجانب كل ملف عن طريق commit لها جميعًا دفعة واحدة. سيقوم VS Code تلقائيًا بتنظيم جميع الملفات بالنسبة لك.

إذا كنت تعمل في فريق مع مستودع مشترك، فإن الخطوة التالية ستكون لـ رفع هذه التغييرات إلى مستودع GitHub أو فتح طلب سحب.

الختام

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

على الرغم من أن هذا البرنامج التعليمي يغطي جزءًا صغيرًا من ما يمكن أن يقوم به VS Code، إلا أن هذه البيئة قادرة على القيام بأشياء أكثر. إذا كنت ترغب في معرفة المزيد عن قدرات VS Code، فتحقق من ما يجب أن تعرفه عن برنامج Visual Studio Code: دورة تعليمية.