كيفية إعداد أجمل في Visual Studio Code

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

ولكن ها هي المشكلة: التنسيق اليدوي للكود يمكن أن يكون مؤلمًا للغاية وعرضة جدًا للخطأ. أدوات مثل Prettier تجعل تنسيق HTML و CSS وجافا سكريبت ولغات أخرى أسهل بكثير. اكتشف كيفية تثبيت الامتداد Prettier واستخدامه لتنسيق التعليمات البرمجية ، بالإضافة إلى بعض إعدادات التكوين المتقدمة.

تركيب أجمل

قبل المتابعة ، تأكد من تثبيت Node.js على جهاز الكمبيوتر الخاص بك. يمكنك تثبيت أحدث إصدار من برنامج صفحة تنزيلات Node.js الرسمية. لأنه يأتي مع مدير حزمة العقدة (npm) مدمج ، والذي ستستخدمه لإدارة حزم Node.js الخاصة بك.

بعد التأكد من تثبيت Node.js محليًا ، ابدأ بإنشاء دليل فارغ لمشروعك. يمكنك تسمية الدليل أجمل - تجريبي.

بعد ذلك ، cd في هذا الدليل باستخدام سطر أوامر ، ثم قم بتشغيل الأمر التالي لتهيئة مشروع Node.js:

npm الحرف الأول

يقوم هذا الأمر بإنشاء ملف package.json يحتوي على الإعدادات الافتراضية.

لتثبيت ملحق Prettier ، قم بتشغيل هذا الأمر الطرفي:

npm أنا - حفظ-ديف أجمل

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

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

باستخدام Prettier عبر سطر الأوامر

ابدأ بإنشاء ملف script.js ملف وتعبئته بالكود التالي:

وظيفةمجموع(أ ، ب) { يعود أ + ب}
مقدار ثابت المستخدم = { اسم: "كايل", عمر: 27,
 isProgrammer: حقيقي,
 مفتاح طويل: "قيمة",
 مزيد من البيانات: 3
}

لتنسيق التعليمات البرمجية في ملف script.js هذا عبر سطر الأوامر ، قم بتشغيل الأمر التالي:

npx أجمل - اكتب script.js

يعيد الأمر تنسيق كود JavaScript في script.js إلى معيار Prettier الافتراضي. ستكون هذه هي النتيجة:

وظيفةمجموع(أ ، ب) {
يعود أ + ب ؛
}
مقدار ثابت المستخدم = {
 اسم: "كايل",
 عمر: 27,
 isProgrammer: حقيقي,
 مفتاح طويل: "قيمة",
 مزيد من البيانات: 3,
};

يمكنك أيضًا تنسيق ترميز HTML من سطر الأوامر. يخترع index.html ملف في نفس الدليل مثل script.js. ثم الصق HTML التالي المنسق بشكل سيئ في الملف:

"" بديل =""فصل="رمز الطقس كبير">

فصل="CurrentHeaderTemp"><فترة>21فترة></div>
</div>
 </header>

لتنسيق HTML ، قم بتشغيل هذا الأمر:

npx أجمل - اكتب index.html

يعيد هذا الأمر تنسيق HTML إلى معيار Prettier الافتراضي ، مما ينتج عنه الكود التالي:

<رأس>
<شعبة>
<IMGsrc=""بديل=""فصل="رمز الطقس كبير" />
<شعبةفصل="CurrentHeaderTemp"><فترة>21فترة>شعبة>
شعبة>
رأس>

يمكنك أيضًا استخدام ملف --يفحص علامة للتحقق مما إذا كانت الشفرة تتوافق مع معايير Prettier. يتحقق المثال التالي script.js:

npx أجمل - تحقق من script.js

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

دمج أجمل في Visual Studio Code

يمكن أن يكون استخدام Prettier عبر سطر الأوامر أمرًا مزعجًا. بدلاً من تشغيل أمر يدويًا في كل مرة تريد فيها تنسيق التعليمات البرمجية ، يمكنك إعداده للتنسيق تلقائيًا عند تغيير ملف. لحسن الحظ ، فإن Visual Studio Code (VS Code) لديه طريقة مضمنة للقيام بذلك نيابة عنك.

اذهب إلى ملحقات علامة التبويب في رمز VS وابحث عن أجمل. انقر فوق أجمل - منسق كود، قم بتثبيته ، ثم قم بتمكينه.

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

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

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

إذا كنت لا تستخدم VSCode أو أن الامتداد لا يعمل لسبب ما ، فيمكنك ذلك قم بتنزيل مكتبة onchange. يؤدي هذا إلى تشغيل الأمر لتنسيق الكود في أي وقت تقوم فيه بتغيير الملف.

كيف تتجاهل الملفات عند التنسيق بجمل

إذا كنت تريد تشغيل أجمل --يكتب الأمر في مجلدك بالكامل ، فسوف يمر عبر كل وحدة من وحدات العقدة. لكن لا ينبغي أن تضيع الوقت في تنسيق كود الآخرين!

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

يمكنك أيضًا تجاهل الملفات ذات الامتداد المحدد. على سبيل المثال ، إذا كنت تريد تجاهل جميع ملفات HTML ، فما عليك سوى إضافة *.لغة البرمجة ل .prettierignore.

كيفية تكوين أجمل

يمكنك تكوين الطريقة التي تريد أن تعمل بها Prettier مع خيارات مختلفة. طريقة واحدة هي إضافة أجمل مفتاح لك package.json ملف. ستكون القيمة كائنًا يحتوي على جميع خيارات التكوين:

{
 ...
"نصوص": {
"امتحان": خطأ "صدى \": لم يتم تحديد اختبار \ "&& خروج 1"
 },
 أجمل: {
// الخيارات تذهب هنا
 }
}

الخيار الثاني (الذي نوصي به) هو إنشاء ملف .prettierrc ملف. سيسمح لك هذا الملف بالقيام بجميع أنواع التخصيصات.

لنفترض أنك لا تحب الفاصلة المنقوطة. يمكنك إزالتها بوضع الكائن التالي في الملف:

{
"نصف": حقيقي,
"تجاوزات": [
 {
"ملفات": ".ts",
"خيارات": {
"نصف": خطأ شنيع
 }
 }
 ]
}

ال يتجاوز تتيح لك الخاصية تحديد تجاوزات مخصصة لملفات معينة أو امتدادات ملفات. في هذه الحالة ، نقول إن جميع الملفات تنتهي بـ .ts (أي ملفات الكتابة المطبوعة) يجب ألا تحتوي على فواصل منقوطة.

باستخدام أجمل مع ESLint

ESLint هي أداة فحص للكشف عن الأخطاء في تعليمات JavaScript البرمجية بالإضافة إلى تنسيقها. إذا كنت تستخدم Prettier ، فربما لن ترغب في استخدام ESLint للتنسيق أيضًا. لاستخدامهما معًا ، ستحتاج إلى التثبيت والإعداد eslint-config-prettier. تقوم هذه الأداة بإيقاف تشغيل جميع تكوينات ESLint للأشياء التي تتعامل معها Prettier بالفعل.

أولاً ، تحتاج إلى تثبيته:

npm i - حفظ-dev eslint-config-prettier

بعد ذلك ، قم بإضافته إلى قائمة التوسعات في ملف .eslintrc ملف (تأكد من أنه آخر شيء في القائمة):

{
"يمتد": [
"البعض الآخر التكوين الذي تستخدمه",
"أجمل"
 ],
"قواعد": {
"مسافة بادئة": "خطأ"
 }
}

الآن ستقوم ESLint بتعطيل جميع القواعد التي يعتني بها Prettier بالفعل لمنع التعارضات.

قم بتنظيف قاعدة الكود الخاصة بك باستخدام أجمل و ESLint

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

ESLint هي أداة JavaScript لا غنى عنها تتماشى جنبًا إلى جنب مع Prettier. يوفر الكثير من الميزات وخيارات التخصيص التي تتجاوز التنسيق الأساسي. تعرف على كيفية استخدام ESLint مع JavaScript إذا كنت تريد أن تكون مطورًا أكثر إنتاجية.