كيفية التنسيق التلقائي في رمز VS لتوفير الوقت والجهد [2023]

يعد Visual Studio Code ، المعروف باسم VS Code ، أحد أكثر برامج تحرير الأكواد استخدامًا. يحتوي VS Code على دعم مدمج لـ Node.js و JavaScript و TypeScript. ومع ذلك ، يمكنك استخدام ملحقات مختلفة لجعلها في متناول معظم اللغات وأوقات التشغيل الأخرى.

Microsoft هي الشركة التي طورت محرر الكود المجاني والمفتوح المصدر.

رمز VS شائع بسبب هذه الميزات ؛

Intellisense: يوفر VS Code الإكمال التلقائي للكود وإبراز بناء الجملة.
عبر الأنظمة الأساسية: يمكنك استخدام محرر الأكواد هذا على أنظمة تشغيل Linux و Windows و macOS.
توافر امتدادات مختلفة: يمكن أن يؤدي توفر امتدادات مختلفة أيضًا إلى تحويل VS Code إلى بيئة تطوير متكاملة (IDE).
دعم متعدد اللغات: يمكنك استخدام هذه الأداة مع جميع لغات البرمجة تقريبًا من خلال امتدادات VS Code.
المحطة المتكاملة: تسمح المحطة المضمنة في VS Code للمطورين بتنفيذ أوامر Git مباشرة من محرر الكود. يمكنك بالتالي الالتزام بالتغييرات ودفعها وسحبها من هذا المحرر.

جدول المحتويات

التنسيق التلقائي في رمز VS

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

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

التنسيق التلقائي هو ميزة تقوم تلقائيًا بتنسيق كتل / سطور التعليمات البرمجية أو ملف في محرر التعليمات البرمجية بناءً على قواعد وإرشادات محددة. تستند هذه الميزة إلى ملف تكوين يحدد قواعد التنسيق على المسافة البادئة وفواصل الأسطر والتباعد.

عند تمكين ميزة التنسيق التلقائي ، سيتم تطبيق جميع هذه القواعد على جميع الملفات الموجودة في قاعدة التعليمات البرمجية أثناء كتابتها.

ومع ذلك ، يمكنك أيضًا تعطيل التنسيق التلقائي لكتلة تعليمات برمجية محددة إذا كنت تريد أن تبرز عن البقية. لتحقيق ذلك ، يمكنك لف جزء من التعليمات البرمجية في كتلة تعليق تحدد القواعد التي سيتم تطبيقها.

كيفية اكتشاف موسيقى جديدة على Spotify

فوائد رموز التنسيق التلقائي في رمز VS

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

كيفية تمكين التنسيق التلقائي في كود VS وتخصيصه

اتبع هذه الخطوات لتمكين التنسيق التلقائي:

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

قم بتثبيت ملحق Prettier. ابحث عن أجمل؛ ستجد الكثير من الامتدادات تشترك في نفس الاسم. انقر فوق الأول ، المطور بواسطة Prettier ، وانقر فوق “تثبيت”.

بمجرد تثبيت Prettier على رمز VS الخاص بك ، يمكنك تمكين ميزة التنسيق التلقائي.

نستخدم ملف HTML بسيطًا لصفحة تسجيل الدخول لشرح كيفية تمكين التنسيق التلقائي.

سوف نستخدم هذا الرمز:

<!DOCTYPE html>

<html>

 <head>

 <title>Login Form</title>

 </head>

 <body style>

 <h2 style="text-align: center; margin-top: 50px;">Login </h2>

 <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">

             <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>

 <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>

 <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">

 </form>

 </body>

</html>

على الرغم من أن الكود أعلاه وظيفي ، إلا أنه من الصعب قراءته ومتابعته لأنه لم يتم وضع مسافة بادئة له كما هو متوقع. سنستخدم Prettier لتنسيق الشفرة تلقائيًا.

اتبع هذه الخطوات.

قم بإنشاء ملف HTML (index.html) وأضف الكود أعلاه

حدد موقع الإعدادات في الجزء السفلي الأيسر من رمز VS الخاص بك

3. اكتب المنسق في شريط البحث وحدد أجمل في المحرر: علامة تبويب المنسق الافتراضي.

4. حدد موقع المحرر: Format on Save وحدد المربع.

5. احفظ ملف HTML الخاص بك ، وحدد المدخلات في مستند HTML الخاص بك ، وانقر بزر الماوس الأيمن ، وحدد تنسيق المستند.

6. تحقق من تنسيق المستند الخاص بك. سيقوم هذا الامتداد تلقائيًا بتنسيق جميع التعليمات البرمجية الأخرى التي تكتبها على رمز VS الخاص بك.

كيفية إعداد جدار الحماية بالطريقة السهلة على خادم أوبونتو

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

7. إنشاء ملف تكوين أجمل: قد تختلف الإعدادات التي قمت بتكوينها على جهازك عن غيرها إذا كنت تعمل كفريق. سيضمن ملف التكوين الأكثر جمالًا أن يكون لديك نمط رمز ثابت لمشروعك. قم بإنشاء ملف .prettierrc بامتداد .json لتكوين إعدادات مشروعك. يمكننا إضافة هذا الرمز إلى ملف JSON لأغراض التوضيح ؛

{

  "trailingComma": "es5",

  "tabWidth": 4,

  "semi": false,

  "singleQuote": true

}

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

ستتم إضافة فاصلة لاحقة فقط عندما يتم تحويل الشفرة إلى es5.
عرض الجدولة ، عدد المسافات لكل علامة تبويب ، مضبوط على 4.
يشير Semi إلى ما إذا كان يجب إضافة فاصلة منقوطة أم لا إلى الكود الخاص بك في نهاية التعليمات. لقد حددناها على أنها خطأ ، مما يعني أنه لن يتم إضافة الفاصلة المنقوطة.
يمكنك إما استخدام علامات الاقتباس المفردة أو المزدوجة في التعليمات البرمجية الخاصة بك. لقد حددنا أنه يجب علينا استخدام علامات الاقتباس الفردية لهذا المشروع.

يمكنك التحقق من مستندات Prettier لفهم كيفية إنشاء إعدادات تكوين متسقة.

أفضل الممارسات للتنسيق التلقائي في رمز VS

استخدم التنسيق الصحيح

على الرغم من أننا استخدمنا Prettier في هذه المقالة لأغراض توضيحية ، إلا أن هذا لا يعني أنه ينطبق على جميع اللغات. توجد المئات من امتدادات التنسيق لـ VS Code ، والأمر متروك لك لتحديد ما يناسب احتياجاتك. على سبيل المثال ، تتناسب المنسقات مثل Prettier and Beautify مع HTML و CSS. من ناحية أخرى ، يمكنك استخدام ملحقات Black أو Python لتنسيق كود Python الخاص بك.

استخدم نمط رمز متسق

كما رأيت ، يمكنك تخصيص إعدادات المنسق. إذا كنت تعمل كفريق ، فتأكد من أن لديك نفس التكوينات لإنشاء نمط رمز ثابت. أفضل طريقة هي إنشاء ملف .prettierrc.extension لتضمين جميع التكوينات لمشروعك.

استخدم النسيل

يمكنك استخدام linters للتحقق من انتهاكات الأنماط وأخطاء بناء الجملة وأخطاء البرمجة في التعليمات البرمجية الخاصة بك. سيوفر لك الجمع بين linters والتكوين التلقائي الكثير من الوقت والجهد في جعل الكود الخاص بك قابلاً للقراءة وتصحيح الأخطاء.

كيفية استخدام الدالتين AND و OR في جداول بيانات Google

استخدم اختصارات لوحة المفاتيح

يحتوي VS Code على مئات الاختصارات لتوفير الوقت في التنسيق. يمكنك حتى تخصيص هذه الأوامر لشيء لا يُنسى.

تحقق من التعليمات البرمجية الخاصة بك قبل الالتزام

على الرغم من أن الفحص والتنسيق التلقائي قد يعملان على إصلاح بعض المشكلات في التعليمات البرمجية الخاصة بك ؛ لا يزال يتعين عليك مراجعة التعليمات البرمجية الخاصة بك قبل إدخال أمر التنفيذ.

اختصارات تنسيق التعليمات البرمجية

VS Code هو محرر كود متعدد الأنظمة الأساسية يمكنك استخدامه على أنظمة Windows و Mac و Linux مثل Ubuntu. يمكنك استخدام الاختصارات التالية إما لتنسيق المستند بأكمله أو مناطق محددة محددة من التعليمات البرمجية الخاصة بك ؛

شبابيك

تعمل تركيبة Shift + Alt + F على تنسيق المستند بأكمله.
تعمل تركيبة Ctrl + K و Ctrl + F على تنسيق قسم من التعليمات البرمجية التي حددتها. على سبيل المثال ، div.

macOS

تعمل تركيبة Shift + Option + F على تنسيق المستند بالكامل.
تعمل تركيبة Ctrl + K و Ctrl + F على تنسيق قسم من التعليمات البرمجية التي حددتها. على سبيل المثال ، div.

أوبونتو

تعمل تركيبة Ctrl + Shift + I على تنسيق المستند بأكمله.
تعمل تركيبة Ctrl + K و Ctrl + F على تنسيق قسم من التعليمات البرمجية التي حددتها. على سبيل المثال ، div.

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

يمكنك التحقق من اختصارات رمز VS الخاص بك باستخدام هذه الخطوات ؛

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

خاتمة

يمكن أن يوفر لك التنسيق التلقائي الكثير من الوقت عند تمكينه. سيختلف اختيار الامتداد حسب اللغة التي تستخدمها. يمكنك تثبيت عدة مُنسِّقات التعليمات البرمجية بناءً على لغات البرمجة التي تستخدمها لمشاريعك.

تحقق دائمًا من وثائق المنسق الذي تختاره للرمز الخاص بك. سيضمن ذلك فهمك للغات التي يدعمها وكيفية تحقيق أقصى استفادة منها.

تحقق من مقالتنا عن أفضل ملحقات VS Code التي يجب على مطوري البرامج استخدامها.

ما هو رد فعلك؟

كيفية التنسيق التلقائي في رمز VS لتوفير الوقت والجهد [2023]

التنسيق التلقائي في رمز VS

فوائد رموز التنسيق التلقائي في رمز VS

كيفية تمكين التنسيق التلقائي في كود VS وتخصيصه