كيفية تنسيق الكود باستخدام Prettier في Visual Studio Code

مقدمة

تنسيق الكود دائمًا ما يكون تحديًا، لكن أدوات المطورين الحديثة تُمكّن من الحفاظ على الاتساق تلقائيًا في قاعدة بيانات فريقك. في هذه المقالة، ستُعدّ Prettier لتنسيق الكود تلقائيًا في Visual Studio Code، المعروف أيضًا باسم VS Code.

لأغراض العرض التوضيحي، فيما يلي مثال للكود الذي تقوم بتنسيقه:

const name = "James";
const person ={first: name
}
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}
sayHelloLinting('James');

إذا كنت على دراية بتنسيق الكود، فقد تلاحظ بعض الخطوات الخاطئة:

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

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

• تنزيل وتثبيت Visual Studio Code.
• لاستخدام Prettier في Visual Studio Code، يجب تثبيت الإضافة. للقيام بذلك، ابحث عن Prettier – Code Formatter في لوحة إضافات VS Code. إذا كانت هذه هي المرة الأولى التي تُثبّتها فيها، فسيظهر زر "تثبيت" بدلاً من زر "إلغاء التثبيت" الموضح هنا:

الخطوة 1 - استخدام أمر تنسيق المستند

بعد تثبيت إضافة Prettier، يمكنك الآن استخدامها لتنسيق الكود. للبدء، لنستكشف استخدام أمر "تنسيق المستند". يجعل هذا الأمر الكود أكثر تناسقًا مع تنسيق المسافات، وامتداد الأسطر، وعلامات الاقتباس.

لفتح لوحة الأوامر، يمكنك استخدام الأمر + SHIFT + P على macOS أو CTRL + SHIFT + P استخدم على نظام ويندوز.

في لوحة الأوامر، ابحث عن التنسيق، ثم تنسيق المستند يختار.

قد يُطلب منك بعد ذلك تحديد التنسيق المُراد استخدامه. للقيام بذلك، انقر على زر "تكوين".

ثم حدد Prettier – Code Formatter.

تم الآن تنسيق الكود الخاص بك باستخدام المسافات، ولف السطور، وعلامات الاقتباس الثابتة:

const name = "James";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("James");

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

body {color: red;
}
h1 {
color: purple;
font-size: 24px
}

وقد تم تنسيقه على النحو التالي:

body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}

الآن بعد أن قمنا بمراجعة هذا الأمر، دعنا نرى كيف يمكننا جعله يعمل تلقائيًا.

الخطوة 2 - تنسيق الكود في الحفظ

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

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

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

الخطوة 3 – تغيير إعدادات التكوين الأجمل

يتولى تطبيق Prettier الكثير من العمل نيابةً عنك افتراضيًا، ولكن يمكنك أيضًا تخصيص الإعدادات.

افتح قائمة الإعدادات. ثم ابحث عن "أجمل". سيؤدي هذا إلى إظهار جميع الإعدادات التي يمكنك تغييرها:

فيما يلي بعض الإعدادات الأكثر شيوعًا:

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

الجانب السلبي لاستخدام قائمة الإعدادات المضمنة في VS Code هو أنها لا تضمن الاتساق بين المطورين في فريقك.

الخطوة 4 - إنشاء ملف تكوين أفضل

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

ملف جديد يسمى امتداد prettierrc أنشئ باستخدام أحد الامتدادات التالية:

• يمل
• يامل
• جسون
• جافا سكريبت
• تومل

فيما يلي مثال لملف تكوين بسيط باستخدام JSON:

{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}

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

مقدمة

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