الأخبار التكنولوجية والاستعراضات والنصائح!

كيفية تنسيق التعليمات البرمجية في كود VS

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

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

كيفية تنسيق التعليمات البرمجية

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

لأجهزة الكمبيوتر

تنسيق المستند بأكمله:

  • افتح الملف بالرمز الذي تريد تنسيقه.كيفية تنسيق التعليمات البرمجية في كود VS 1
  • اضغط على “Shift + Alt + F”.كيفية تنسيق التعليمات البرمجية في كود VS 2
  • احفظ التغييرات بالنقر على “ملف” في الزاوية اليسرى العليا ثم اختيار “حفظ” أو بالضغط على “Ctrl + S”.كيفية تنسيق التعليمات البرمجية في كود VS 3
  • تنسيق الكود المحدد فقط:

  • في الملف الذي يحتوي على سطور التعليمات البرمجية التي تريد تنسيقها ، حدد الأسطر عن طريق تحديدها بالماوس.كيفية تنسيق التعليمات البرمجية في كود VS 4
  • اضغط على “Ctrl + K”.كيفية تنسيق التعليمات البرمجية في كود VS 5
  • اضغط على “Ctrl + F”.كيفية تنسيق التعليمات البرمجية في كود VS 6
  • احفظ التغييرات إما عن طريق تحديد “حفظ” من قائمة “ملف” في الزاوية اليسرى العليا أو عن طريق الضغط على “Ctrl + S”.كيفية تنسيق التعليمات البرمجية في كود VS 3
  • لاحظ أن الضغط على “Ctrl + F” بدون الضغط أولاً على “Ctrl + K” سيفتح قائمة البحث. في حالة حدوث ذلك ، أغلق فقط بالنقر فوق الزر “x” أو الضغط على Esc.

    تحريك الصفوف لأعلى أو لأسفل:

  • حرك المؤشر إلى بداية السطر الذي تريد نقله.كيفية تنسيق التعليمات البرمجية في كود VS 8
  • اضغط باستمرار على مفتاح Alt.كيفية تنسيق التعليمات البرمجية في كود VS 9
  • لتحريك الخط لأعلى ، اضغط على السهم لأعلى. لتحريكه لأسفل ، اضغط على السهم لأسفل.كيفية تنسيق التعليمات البرمجية في كود VS 10
  • احفظ الملف عن طريق تحديده من قائمة “ملف” في الزاوية اليسرى العليا من النافذة أو بالضغط على “Ctrl + S”.كيفية تنسيق التعليمات البرمجية في كود VS 11
  • تغيير المسافة البادئة لسطر واحد:

  • حرك المؤشر إلى بداية السطر حيث تريد تغيير المسافة البادئة.كيفية تنسيق التعليمات البرمجية في كود VS 8
  • اضغط على “Ctrl +]” لزيادة المسافة البادئة.كيفية تنسيق التعليمات البرمجية في كود VS 13
  • اضغط على “Ctrl + [“ to decrease the indent.كيفية تنسيق التعليمات البرمجية في كود VS 14
  • Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.كيفية تنسيق التعليمات البرمجية في كود VS 3
  • For Mac

    Format the entire document:

  • Open the file with the code that you wish to format.
  • Press “⇧ + ⌥ + F.”كيفية تنسيق التعليمات البرمجية في كود VS 16
  • Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
  • Formatting selected code only:

  • Highlight the part of the document that you wish to format.
  • Press “⌘ + K”.كيفية تنسيق التعليمات البرمجية في كود VS 17
  • Press “⌘ + F”.كيفية تنسيق التعليمات البرمجية في كود VS 18
  • Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.كيفية تنسيق التعليمات البرمجية في كود VS 19
  • Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

    Move lines up or down:

  • Place your cursor at the beginning of the line you want to edit.
  • Hold down the “⌥” Key.كيفية تنسيق التعليمات البرمجية في كود VS 20
  • To move a line up, press the up arrow. To move it down, press the down arrow.كيفية تنسيق التعليمات البرمجية في كود VS 10
  • Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.كيفية تنسيق التعليمات البرمجية في كود VS 19
  • Change indentation of a single line:

  • Move your cursor to the beginning of the line in which you want to change the indention.
  • Press “⌘ + ]”لزيادة المسافة البادئة.كيفية تنسيق التعليمات البرمجية في كود VS 23
  • اضغط على ⌘ +[“لتغيرالمسافة[”förattminskaindraget[“todecreasetheindentكيفية تنسيق التعليمات البرمجية في كود VS 24
  • احفظ الملف بالضغط على “⌘ + S” أو عن طريق اختيار “حفظ” من قائمة “ملف” في الزاوية اليسرى العليا من النافذة.كيفية تنسيق التعليمات البرمجية في كود VS 19
  • كود تنسيق كود VS عند الحفظ

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

  • افتح VS Code.كيفية تنسيق التعليمات البرمجية في كود VS 26
  • انقر فوق الزر “ملحقات” الموجود في القائمة الموجودة على اليسار. هذه هي الأيقونة التي تشبه أربعة مربعات. بدلاً من ذلك ، يمكنك الضغط على “Ctrl + Shit + x” للكمبيوتر الشخصي أو “⌘ + ⇧ + x” على جهاز Mac.كيفية تنسيق التعليمات البرمجية في كود VS 27
  • في حقل البحث أعلى القائمة ، اكتب أجمل.كيفية تنسيق التعليمات البرمجية في كود VS 28
  • انقر على زر التثبيت في الزاوية اليمنى السفلية من أيقونة أجمل.كيفية تنسيق التعليمات البرمجية في كود VS 29
  • انتظر حتى ينتهي التثبيت من التثبيت.كيفية تنسيق التعليمات البرمجية في كود VS 30
  • قبل أن يبدأ Prettier في تنسيق المستند تلقائيًا عند الحفظ ، تحتاج إلى تكوين الامتداد لتمكين الميزة. يتم ذلك عن طريق القيام بما يلي:

  • افتح نافذة الإعدادات بالضغط على “Ctrl +” على جهاز الكمبيوتر أو “⌘ +” في جهاز Mac.كيفية تنسيق التعليمات البرمجية في كود VS 31
  • في حقل البحث ، اكتب المنسق. يجب أن يظهر هذا العديد من إعدادات التنسيق.كيفية تنسيق التعليمات البرمجية في كود VS 32
  • تأكد من أن الامتداد المحدد أجمل في المحرر: الإعداد الافتراضي المنسق. إذا لم يكن هناك مُنسق افتراضي أو إذا كان VS Code يستخدم مُنسقًا مختلفًا بشكل افتراضي ، فانقر فوق سهم القائمة المنسدلة. حدد “Cleaner – Code Formatter” من القائمة. بدلاً من ذلك ، يمكن إدراج Prettier كـ “esbenp.prettier-vscode”.كيفية تنسيق التعليمات البرمجية في كود VS 33
  • تأكد من تحديد الخيار “Editor: Format On Save”. إذا لم يكن كذلك ، فقم بتبديل علامة الاختيار.كيفية تنسيق التعليمات البرمجية في كود VS 34
  • اكتب “Flimmer” في حقل البحث عن الإعدادات.كيفية تنسيق التعليمات البرمجية في كود VS 35
  • قم بالتمرير لأسفل حتى تجد السطر “أجمل: يتطلب التكوين”. تأكد من تحديد خانة الاختيار. يمنع هذا الإعداد Prettier من تنسيق المستندات بدون ملف التكوين. يكون هذا مفيدًا عند عرض التعليمات البرمجية التي تم تنزيلها والتي قد يكون لها قواعد التنسيق الخاصة بها. يمنعك هذا من الكتابة فوق خيارات التنسيق عن طريق الخطأ. لاحظ أنه سيظل تنسيق الملفات غير المسماة تلقائيًا حتى إذا تم تحديد هذا الإعداد.كيفية تنسيق التعليمات البرمجية في كود VS 36
  • يمكنك تعديل إعدادات أجمل معينة بناءً على تفضيلاتك. عند الانتهاء ، يمكنك إغلاق هذه القائمة.
  • نظرًا لأنك قمت بتكوين Prettier للتنسيق التلقائي فقط عندما يكون هناك ملف تكوين ، فأنت بحاجة إلى إنشاء واحد لكل مشروع. يتم ذلك باتباع الخطوات التالية:

  • حدد جذر مشروعك في القائمة الموجودة على اليسار.كيفية تنسيق التعليمات البرمجية في كود VS 1
  • انقر فوق زر ملف جديد لإنشاء ملف تكوين.كيفية تنسيق التعليمات البرمجية في كود VS 38
  • اسم هذا الملف “.prettierrc.”كيفية تنسيق التعليمات البرمجية في كود VS 39
  • في الملف ، فقط أدخل {}.كيفية تنسيق التعليمات البرمجية في كود VS 40
  • سيقوم Prettier الآن بتنسيق المستند تلقائيًا عند حفظه.
  • نصائح للحفاظ على التعليمات البرمجية الخاصة بك منظمة

  • على الرغم من أن المسافة البادئة ليست ضرورية لتشغيل البرنامج ، إلا أنه يمكن أن يساعد في تصحيح الأخطاء عن طريق تقسيم التعليمات البرمجية إلى وحدات يمكن إدارتها. يمكن أن تستفيد عبارات If-Then أو الحالات المتداخلة ، على سبيل المثال ، من ذلك بجعل كل خيار بديل مميزًا بصريًا عن الآخر. يكون هذا مفيدًا عند التعامل مع الأخطاء المنطقية بدلاً من الأخطاء النحوية.
  • إذا قمت بتسمية وحدات أو أسطر قصيرة من التعليمات البرمجية ، فاجعل من المعتاد استخدام العناوين الوصفية بدلاً من مجرد تسميتها الوحدة 1 ، الوحدة 2 ، إلخ. هذا يجعل من السهل معرفة أي جزء من الكود له وظيفة معينة.
  • من الجيد دائمًا استخدام التعليقات لصالحك. سواء قمت بتضمين وصف سريع ، أو مجرد إضافة ملاحظة لنفسك ، فإن التعليقات تساعد بشكل كبير أثناء استكشاف الأخطاء وإصلاحها.
  • كود المنظمة

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

    هل تعرف طرقًا أخرى لتنسيق ملفاتك في VS Code؟ لا تتردد في مشاركة أفكارك في قسم التعليقات أدناه.