أدوات جافا سكريبت في العمل

إنه لأمر رائع أن ترى أين جافا سكريبت في هذه الأيام ومدى تطورها منذ ذلك الحينES2015أيام فار و $(.submitBtn) بعيدون عنا. مع استمرار جافا سكريبت
المتطورة، والأدوات (المنسق والبطانة والمجمّع) التي تحيط به تتحسن باستمرار، وسنرى في هذه المقالة كيف ESLint (لينتر), أجمل (المنسق) و أجش (خطافات Git) يمكن أن يحسن تجربة المطور لديك ويكون له تأثير كبير على تطبيقك. من أجل هذه المقالة، سنستخدم في هذه المقالة React ولكن ضع في اعتبارك أنه يمكن استخدام هذه الأدوات مع أي تطبيق Javascript/Node. سنبدأ الأمور من خلال إنشاء React المشروع باستخدام فيتي بهذه الخطوات

npm create vite@latest
اسم المشروع: js-tools
اختر إطار عمل: متفاعل
اختر متغيرًا: متفاعل
cd js-tools
تثبيت npm

ESLint لجودة التعليمات البرمجية

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

cd js-tools
npm init @eslint/config
# سنحتاج إلى الإجابة عن هذه الأسئلة لتهيئة التهيئة
كيف تريد استخدام ESLint؟ للتحقق من بناء الجملة والعثور على المشاكل
ما نوع الوحدات النمطية التي يستخدمها مشروعك؟ وحدات JavaScript (استيراد/تصدير)
ما هو إطار العمل الذي يستخدمه مشروعك؟ React
هل يستخدم مشروعك TypeScript؟ لا
أين يتم تشغيل الكود الخاص بك؟ المتصفح
ما التنسيق الذي تريد أن يكون عليه ملف التكوين الخاص بك؟ جافا سكريبت
هل ترغب في تثبيتها الآن؟ نعم
ما مدير الحزم الذي تريد استخدامه؟ npm
# سنقوم بتثبيت إضافات إضافية
npm i -حفظ-مطور-حفظ-مطوّر-إيسلين-المكوِّن الإضافي-خطافات-التفاعل-خطافات-إيسلين-المكوِّن الإضافي-jsx-a11y

سيؤدي ذلك إلى إنشاء .eslintrc.cjs ملف يحتوي على ESLint في جذر التطبيق الخاص بنا، دعنا نبدأ ب
تحديث ملف التكوين بالمكونات الإضافية المثبتة لدينا وإضافة القاعدة:

خطأ = 2;

الوحدة النمطية.exports = {
  البيئة: {
    المتصفح: صحيح,
    es2021: صحيح,
  },
  امتدادات: [
    'eslint:موصى به',
    'plugin:react/موصى به',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/موصى به',
    'المكون الإضافي:jsx-a11y/موصى به',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: صحيح,
    },
    ecmaVersion: 'الأحدث',
    sourceType: 'الوحدة النمطية',
  },
  الإضافات: ['رد فعل'],
  القواعد: {
    'no-un-un used-vars': خطأ,
  },
  الإعدادات: {
    التفاعل: {
      الإصدار: 'كشف',
    },
  },
  تجاهل الأنماط: ['node_modules', '.eslintrc.cjs', 'dist'],
};

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

{
  ...,
    "البرامج النصية": {
        "ديف": "vite",
        "build": "vite build": "vite build",
        "معاينة": "معاينة فايت": "معاينة فايت",
        "lint": "eslint --ext js,jsx ."
    },
  ...
}

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

استورد { useEffect، useRef، useState } من 'react';

تصدير الدالة الافتراضية () { {
  const videoRef = useRef(فارغ);
  const [isPlaying, setIsPlaying] = حالة الاستخدام (خطأ);
  يشكل العنوان = 'مرحبًا ESLint + بريتيير + أجش';

  useEffect(()) => {
    إذا (!isPlaying) {
      videoRef.current.play();
    } وإلا {
      videoRef.current.pause();
    }
  }, []);

  const togglePlay = () => setIsPlaying(!isPlaying);

  إرجاع (
    <div>
      <button type="button" onclick="{togglePlay}">
        {هل هو تشغيل؟ 'إيقاف مؤقت' : 'تشغيل'}
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

استورد { useEffect، useRef، useState } من 'react';

تصدير الدالة الافتراضية () { {
const videoRef = useRef(فارغ);
const [isPlaying, setIsPlaying] = حالة الاستخدام (خطأ);
يشكل العنوان = 'مرحبًا ESLint + بريتيير + أجش';

useEffect(()) => {
إذا (!isPlaying) {
videoRef.current.play();
} وإلا {
videoRef.current.pause();
}
}, []);

const togglePlay = () => setIsPlaying(!isPlaying);

إرجاع (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

لنجرب ونرى ما هو تشغيل الوبر ستقدم القيادة تقريرًا عن App.jsx الرمز:

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

- أطلق اسمًا على المكون الخاص بنا

- استخدم متغير "العنوان" أو احذفه فقط إذا كان عديم الفائدة

- إضافة علامة "مسار" للتعليقات التوضيحية في مشغل الفيديو

- إضافة سمة "Alt" بنص ذي معنى إلى عنصر الصورة

بعد تطبيق هذه الإصلاحات بتشغيل الأمر 'lint'، لا نتلقى أي أخطاء، الكود الذي تم إصلاحه هو كالتالي

  استورد { useEffect، useRef، useState } من 'react';

تصدير الدالة الافتراضية للتطبيق() {
const videoRef = useRef(فارغ);
const [isPlaying, setIsPlaying] = حالة الاستخدام (خطأ);
يشكل العنوان = "مرحبًا ESLint + بريتيير + أجش";

useEffect(()) => {
إذا (!isPlaying) {
videoRef.current.play();
} وإلا {
videoRef.current.pause();
}
)، [isPlaying])؛ }، [isPlaying]);

const togglePlay = () => setIsPlaying(!isPlaying);

إرجاع (

{العنوان}

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="شريحة جريب فروت فوق كومة من الشرائح الأخرى"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

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

أجمل لتنسيق الأكواد البرمجية

أجمل هو مُنسِّق شيفرة رأي يدعم العديد من اللغات ويتكامل مع العديد من مُحرِّري الشيفرات. لنضيف أجمل إلى تطبيقنا:

npm install -حفظ-مطور-حفظ-حفظ-ضبط-أجمل

سنحتاج إلى إنشاء ملفين في جذر تطبيقنا أ جميل جداً لتجاهل الملفات أو المجلدات التي لا نريد تهيئتها:

وحدات_العُقدة_الوحدات/
ديست/
عام/عامة/

و .prettiertierrc.json الذي سيحتوي على تهيئتنا الأجمل:

{
"arrowParens": "دائمًا",
"bracketSameLine": خطأ,
"bracketSpacing": صحيح,
"endOfLine": "lf",
"embeddedLanguageFormatting": "تلقائي",
"htmlWhitespaceSensitivity": "css": "css",
"insertPragma": خطأ,
"jsxSingleQuote": خطأ,
"printWidth": 80,
"proseWrap": "دائمًا": دائمًا",
"quoteProps": "دائمًا": "حسب الحاجة": "حسب الحاجة",
"requirePragma": خطأ,
"شبه": صحيح
"اقتباس مفرد": صحيح
"عرض علامة التبويب": 2,
"TrailingComma": "الكل": صحيح,
"استخدام علامات التبويب": صحيح
}

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

npm i -حفظ-ديف eslint-config-prettier

سنحتاج أيضًا إلى تحديث .eslintrc.cjs عن طريق إضافة أجمل إلى التمديدات المصفوفة، علينا أن نتأكد من وضعها في مصفوفة الأخير لتجاوز التكوينات الأخرى:

خطأ = 2;

الوحدة النمطية.exports = {
...,
امتدادات: [
'eslint:موصى به',
'plugin:react/موصى به',
'plugin:react/jsx-runtime',
'plugin:react-hooks/موصى به',
'المكون الإضافي:jsx-a11y/موصى به',
'prettier',
],
...

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

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

هاسكي لخطافات جيت

أجش يساعدك على إعداد خطافات git لتلوين رسائل الالتزام، وتشغيل الاختبارات، وتنسيق الشيفرة البرمجية، وما إلى ذلك عند الالتزام أو الدفع. سوف نستخدمه مع lint-staged لأتمتة عملية تخطيط الشيفرة وتنسيقها قبل الالتزام بالشيفرة.

npx husky-init & npm install
npm i -حفظ-تطوير-حفظ-تنظيم-مرحلة-لنت

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

{
...,
"البرامج النصية": {
"ديف": "vite",
"build": "vite build": "vite build",
"معاينة": "معاينة فايت": "معاينة فايت",
"lint": "eslint --ext js,jsx .",
"إعداد": "تثبيت هاسكي"
},
"lint-staged": {
"**/*.*.+(js||jsx|json|css)": "prettier --write -تجاهل-غير معروف"
},
...
}

الخطوة الأخيرة هي تحديث الالتزام المسبق لإعداد ملف لإعداد الخطاف الخاص بنا لتشغيل الوبر على جميع التطبيقات وتنسيق الملفات المتغيرة باستخدام الأمر مرحلياً على مراحل الأمر:

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm تشغيل npm lint
npx lint-staged
```

دعونا نقوم ببعض إعادة الهيكلة لتطبيقنا لنرى كيف يعمل كل هذا، سنقوم بإنشاء مكون VideoPlayer.jsx واستخدامه في App.jsx:

'' 'جافا سكريبت
استورد { useEffect, useRef } من 'react';

تصدير الدالة الافتراضية VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(فارغ);

استخدم التأثير((()) => {
إذا (!isPlaying) {
videoRef.current.play();
} آخر {
videoRef.current.pause();
}
)، [isPlaying])؛ }، [isPlaying]);

إرجاع (

);
}

استيراد { حالة الاستخدام } من 'رد فعل';
استيراد VideoPlayer من "./VideoPlayer";

تصدير الدالة الافتراضية للتطبيق() {
const [isPlaying, setIsPlaying] = حالة الاستخدام (خطأ);
يشكل العنوان = 'مرحبًا ESLint + بريتيير + أجش';

const togglePlay = () => setIsPlaying(!isPlaying);

إرجاع (
 
{العنوان}
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="شريحة جريب فروت فوق كومة من الشرائح الأخرى"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

والآن بعد أن أصبحنا راضين عن شفرتنا، دعنا نلتزم بالتغييرات التي أجريناها ونرى كيف ستسير الأمور.

الأخطاء مرة أخرى هذه المرة تصرخ هذه المرة بسبب عدم التحقق من صحة الخاصيات وكما ترى لم يكن التزامنا ناجحًا. دعنا نصلح هذا الأمر، من خلال تثبيت PropTypes أولًا npm i أنواع الدعامة وتحديث مشغل الفيديو المكوّن:

استيراد { useEffect، useRef } من 'react';
استيراد PropTypes من 'prop-types';

تصدير الدالة الافتراضية VideoPlayer({ isPlaying, videoSrc, trackSrc }) {
const videoRef = useRef(فارغ);

استخدام التأثير(()) => {
إذا (!isPlaying) {
videoRef.current.play();
} آخر {
videoRef.current.pause();
}
)، [isPlaying])؛ }، [isPlaying]);

إرجاع (

);
}

VideoPlayer.propTypes = { {
isPlaying: PropTypes.bool.isRequired,
videoSrc: PropTypes.string.isRequired,
trackSrc: PropTypes.string.isRequired,
};

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

الملخص

ESLint, أجمل و أجش أدوات رائعة تساعدنا في الحفاظ على شفرتنا البرمجية. وهي مجتمعةً معًا توفر لنا تجربة رائعة للمطورين وتجعل الحفاظ على شفرتنا البرمجية أسهل.

لقد تحدّثنا في هذه المقالة عن التلوين والتنسيق، ولكن الأدوات المتاحة والإمكانيات أوسع بكثير، يمكنك إعداد بعض الاختبارات لتشغيلها على خطاف ما قبل الالتزام أو إذا كنت تستخدم Typescript، إضافة أمر التحقق من النوع باستخدام أجش لتخطي أي شيفرة غير مكتوبة في تطبيقك.

اقرأ المزيد:

إيجابيات وسلبيات Vue

كيف تقتل مشروعاً بممارسات الترميز السيئة

React: نصائح وحيل React