10 المغلق وأدوات جافا سكريبت لينت لتحسين رمز
أدوات لينت يمكن أن تساعد المطورين إلى حد كبير كتابة نوعية جيدة ، رمز الأمثل. Linting هي عملية فحص الكود التي تبحث عن الأخطاء في الكود المصدري ، وتقوم بإعلام الأخطاء المحتملة. معظم اللتر يستخدمون تقنية تحليل الكود الثابت ، وهو ما يعني يتم التحقق من رمز دون أن تنفذ فعلا.
يمكنك الوصل في مناسبات مختلفة ، كما هو الحال في الوقت الفعلي أثناء كتابة التعليمات البرمجية ، أو عند حفظ الملف ، أو عند الالتزام بالتغييرات ، أو قبل بدء تشغيل الرمز. مهما كان سير عملك ، فإن الأمر المهم هو ينت على أساس منتظم, لأنها يمكن أن توفر لك من العديد من الصداع في المستقبل.
لا تعد Linters أدوات لمنع الأخطاء فقط ، ولكن يمكن استخدامها أيضًا بشكل فعال أثناء تصحيح الأخطاء للعثور على الأخطاء التي يصعب اللحاق بها غير ذلك. في هذا المنشور ، سوف نتحقق من 10 أدوات فحص قوية يمكنك استخدامها لمعاينة ملفات CSS و JavaScript من أجل تحسين جودة الشفرة.
1. CSSLint
تعترف CSSLint "بإيذاء مشاعرك" ، لكن في المقابل "تجعلك رمزًا أفضل بكثير". تقود CSSLint حاليًا سوق CSS linting. إنه مكتوب بلغة JavaScript ، وهو مفتوح المصدر ، ويأتي مع الكثير من الخيارات القابلة للتكوين.
CSSLint يسمح لك اختر أي نوع من الأخطاء والتحذيرات (التوافق ، الأداء ، الازدواجية ، إلخ) تريد اختبار ل, و يتحقق من صحة بناء جملة CSS وفقًا للقواعد التي تختارها.
لا يعمل فقط في المتصفح ، ولكن لديه أيضًا واجهة سطر أوامر ، ويمكنك أيضًا دمجها في نظام الإنشاء الخاص بك أيضًا.
2. SublimeLinter CSSLint
CSSLint عبارة عن LSS فعالة للغاية بحيث يصعب العثور على منافس يقيس ذلك. ربما هذا هو السبب في أن إطار عمل SubinteLinter للبطانة قام ببناء المكون الإضافي لبطانة CSS فوقه. SublimeLinter هو البرنامج المساعد SublimeText ذلك يوفر للمستخدمين وسيلة لإعطاء كودهم (CSS ، PHP ، Python ، Java ، Ruby ، وما إلى ذلك) مباشرة داخل SublimeText editoص.
قبل تثبيت البرنامج المساعد SublimeLinter CSSLint نفسه ، تحتاج إلى تثبيت CSSLint كوحدة نمطية Node.js. إن الشيء العظيم في هذه الأداة المفيدة هو أنك فقط لتكوين الإعدادات مرة واحدة, أو إذا كنت راضيًا عن الافتراضات التي لا تضطر إلى القيام بذلك ، فيمكنك دائمًا الحصول على التحذيرات والإشعارات ذات الصلة داخل محرر SublimeText دون أي متاعب أخرى.
3. StyleLint
يساعد StyleLint المطورين على تجنب الأخطاء في CSS أو SCSS أو أي بناء جملة آخر يمكن لـ PostCSS تحليله. اختبارات StyleLint لأكثر من مائة القواعد ، ويمكنك اختر تلك التي تريد تشغيلها (انظر المثال التكوين).
إذا كنت لا ترغب في إنشاء التكوين الخاص بك ، فيمكنك أيضًا اختيار تهيئة قياسية مكتوبة مسبقًا تحتوي على حوالي 60 من قواعد StyleLint. StyleLint هي أداة مرنة للغاية ، ويمكن تمديدها بواسطة مكونات إضافية ، وتستخدم في 3 أشكال مختلفة: كأداة لسطر الأوامر ، كوحدة نمطية Node.js ، أو كأداة مساعدة PostCSS.
4. W3C CSS المدقق
على الرغم من أن أداة التحقق من CSS الخاصة بـ W3C لا تعتبر عادة أداة فحص ، فإنها تتيح للمطورين فرصة رائعة للتحقق من شفرة مصدر CSS الخاصة بهم وفقًا للمعايير الرسمية لـ W3C. صممت W3C أدوات التحقق من الصحة بقصد توفير أداة مشابهة لمدقق برنامج Lint للغة C.
في البداية ، قاموا بإنشاء أداة التحقق من علامات HTML والتي تبعها فيما بعد مدقق CSS. لا يحتوي مدقق CSS الخاص بـ W3C على العديد من الخيارات مثل CSSLint ، ولكن لديه إرجاع رسائل خطأ وإعلامات مفصلة وسهلة الفهم.
كميزة إضافية ، يمكنك أيضًا التحقق من شفرتك وفقًا لمعايير الويب الحديثة للهاتف المحمول الخاصة بـ W3C ، وهذا ليس بالأمر السيئ في عصر الويب للجوال.
5. العلامات القذرة
يقوم Dirty Markup بتنظيف وتنسيق والتحقق من صحة كود HTML و CSS و JavaScript. يمكن أن يكون خيارًا رائعًا إذا كنت تحب التصميم المباشر وتريد حلاً سريعًا. العلامات القذرة يلقي رسائل الخطأ والإشعارات في الوقت الحقيقي بينما أنت اكتب أو عدّل الرمز داخل المحرر.
عندما تضغط على “نظيف” زر ، ذلك يعمل على إصلاح أخطاء بناء الجملة دفعة واحدة ، يرتب التنسيق ، لكنه يترك التحذيرات سليمة مما يتيح لك حلها كما تريد. لا يمكنك اختيار القواعد التي تريد اختبارها ، ولكن جميع أنواع الملفات الثلاثة لديك بعض الإعدادات التي تمكنك من تحديد التنسيق من الناتج تنظيفها.
6. JSLint
تم إصدار JSLint لأول مرة في عام 2002 من قِبل Douglas Crockford ، ولم يفقد الزخم منذ ذلك الحين ، لذلك يمكنك أن تفترض بأمان أنها أداة موثوقة وجديرة بالثقة في JavaScript.
يمكن لـ JSLint معالجة شفرة مصدر JavaScript ونص JSON ، ويأتي مع تكوين جاهز يتبع أفضل ممارسات JS كتب كروكفورد في كتابه بعنوان JavaScript: The Good Parts.
لدى JSLint بعض الخيارات التي يمكنك الاختيار من بينها ، لكنك لا يمكن إضافة القواعد المخصصة الخاصة بك ، أو تعطيل معظم الميزات. بدأت JSLint بالفعل في تضمين أحدث معايير ECMAScript 6 ، يمكنك التحقق من المرحلة الحالية لتطبيق ES6 هنا.
7. JSHint
JSHint هي شوكة JSLint شائعة الاستخدام للغاية ، وتستخدمها شركات التكنولوجيا الكبرى مثل Facebook و Twitter و Medium
JSHint هو مشروع يحركه المجتمع والذي بدأ مع السعي ل إنشاء نسخة أكثر شكلي وأقل رأي من JSLint. تسمح JSHint للمطورين بتكوين أي من خيارات الفحص الخاصة بهم ، ووضع التهيئة المخصصة في ملف منفصل ، وهو خيار يجعل الأداة قابلة لإعادة الاستخدام بسهولة ، وتناسب المشاريع الكبيرة.
لا يُمكنك استخدام JSHint فقط لينتس الفانيلا جافا سكريبت ، بل إنه يدعم أيضًا العديد من مكتبات JS الشائعة ، مثل jQuery و Mootools و Mocha و Node.js.
8. ESLint
ESLint هو أحدث شيء كبير في المشهد الطبيعي لجافا سكريبت. شعبيتها تنبع من طبيعتها المرنة للغاية. لا يمكنك تخصيص أطنان من قواعد الفحص المعقدة الخاصة بك ، ودمجها مع جميع برامج تحرير الشفرة الرئيسية ، ولكن يمكنك أيضًا بسهولة تمديد وظائفها عن طريق إضافة الإضافات المختلفة لذلك.
من خلال تحديد خيارات المحلل اللغوي ، يمكنك أيضًا اختر معيار اللغة JS الذي تريد دعمه أثناء عملية الفحص ، مما يعني أنه لا يمكنك فقط التحقق من البرامج النصية الخاصة بك بناء الجملة الافتراضي ECMAScript 5 ، ولكن أيضًا مقابل ECMAScript 6 و ECMAScript 7 و JSX.
9. هيئة الأوراق المالية
JSCS ، أو JavaScript Code Style عبارة عن linterable style code code for JavaScript ، والذي يتحقق من قواعد تنسيق التعليمات البرمجية.
الهدف من JSCS هو توفير وسيلة ل فرض برمجيًا التقيد بدليل نمط ترميز معين. على الرغم من أن JSCS لا تتحقق من الأخطاء والأخطاء ، إلا أنها لا تزال تستخدم من قبل العديد من اللاعبين الرئيسيين في صناعة التكنولوجيا ، مثل Google و AirBnB و AngularJS ، حيث إنها تساعد المطورين على الحفاظ على قاعدة رمز قابلة للقراءة ومتسقة للغاية.
JSCS هو توفير حقيقي للوقت ، لأنه يعمل تلقائيًا على إصلاح أخطاء التنسيق الخاصة بك ، بحيث لا تضطر إلى التنقل بينها واحدًا تلو الآخر. لديه العديد من الإعدادات المسبقة المختلفة التي تنتمي إلى مشاريع أكبر ، مثل إعدادات Google ، Grunt ، أو إعدادات نمط ترميز ويكيميديا ، والتي يمكنك استخدامها بسهولة في مشاريعك الخاصة ، ولكن يمكنك أيضا إنشاء التكوين المخصص الخاص بك.
10. StandardJS
StandardJS ، أو JavaScript Standard Style هو نمط رمز linter مثل JSCS ، ولكنه يختلف عنه في بساطته وبساطته. يمكن أن يكون StandardJS اختيارًا ممتازًا, إذا كنت لا تريد قضاء بعض الوقت مع التكوين, فقط أريد أداة فعالة تنفد من الصندوق.
يتبع StandardJS حفنة من قواعد التنسيق المكتوبة مسبقًا ، وتتمثل قيمته الأساسية في الحفاظ على سير عمل الترميز خاليًا من الهاء ، لذلك لا يمكنك تغيير القواعد التي لا توافق عليها. اختر StandardJS فقط إذا كنت لا تريد أن يكون لديك تكوين مخصص ، وتريد فقط فرض نمط رمز ثابت عبر ملفات JavaScript الخاصة بك.
