أنت تسعى جاهدًا لكتابة كود أنيق ، لكنك لا تعرف من أين تبدأ ... تقرأ أدلة الأسلوب ، مثل
هذا من Airbnb ، حاول اتباع التوصيات العملية لكبار الخبراء ... هل يجب عليك حذف الرمز غير المستخدم؟ يجب أن تبحث عن متغيرات غير ضرورية؟ هل تحاول تحديد الأنماط السيئة المستخدمة في برامجك؟ على سبيل المثال - تريد أن تفهم ، تقرأ تعقيدات رمز وظيفة معينة ، سواء كانت ستعيد شيئًا أم لا. يبدو مألوفا؟ المشكلة هي أنه من الصعب جدًا على المبرمج أن يفعل الكثير ويتعلم الكثير.
ربما أنت قائد فريق يعمل تحت قيادته فريق من المطورين من مستويات مختلفة؟ هل هناك أشخاص جدد في فريقك؟ هل يزعجك أن الرمز الذي يكتبونه لن يفي بمعاييرك؟ هل تمر أيامك في اختبارات رمز أشخاص آخرين ، عندما تتعلق هذه الفحوصات بشكل أساسي بالامتثال للمعايير ، وليس بمنطق البرنامج؟
يقول مؤلف هذه المادة أنه واجه كل شيء تم توجيه الأسئلة إليه للتو. ما يواجهه هو متعب ومرهق. هنا يريد التحدث عن الأدوات ، التي يتيح لنا التطبيق الصحيح حل المشكلات المذكورة أعلاه.
وبالتحديد ، سنتحدث هنا عن أدوات مثل Prettier و ESLint و Husky و Lint-Staged و EditorConfig وحول أتمتة التنسيق وبطانة التعليمات البرمجية. تركز هذه المواد بشكل أساسي على تطوير التفاعل ، ولكن المبادئ التي تمت مناقشتها هنا يمكن تطبيقها في أي مشروع ويب.
هنا مستودع حيث ، من بين أمور أخرى ، يتم تجميع ما نناقشه هنا.
أجمل
إن Prettier هي أداة لتنسيق التعليمات البرمجية تهدف إلى استخدام قواعد مشفرة لتصميم البرامج. يقوم بتنسيق الرمز تلقائيًا. إليك كيف تبدو.
أجمل تنسيق التعليمات البرمجية باتباع القواعد▍ قدرات أجمل
فيما يلي ميزات وميزات Prettier التي تسمح لنا بالتحدث عن فائدة هذه الأداة:
- ترتيب قاعدة الكود الحالية. باستخدام Prettier ، يمكنك القيام بذلك حرفياً باستخدام أمر واحد فقط. ستستغرق المعالجة اليدوية لكميات كبيرة من التعليمات البرمجية وقتًا أطول. تخيل ، على سبيل المثال ، العمل المطلوب لتنسيق 20000 سطر من التعليمات البرمجية يدويًا.
- أجمل سهل التنفيذ. يستخدم أجمل طريقة "متوسط" ، وأقل أسلوب مثير للجدل للنمط عند تنسيق التعليمات البرمجية. نظرًا لأن المشروع مفتوح المصدر ، فقد ساهم الكثير في ذلك ، وتحسينه وتنعيم الزوايا الحادة.
- يتيح لك Prettier التركيز على كتابة التعليمات البرمجية ، وليس تنسيقها. لا يدرك الكثير ببساطة مقدار الوقت والجهد المبذولين في تنسيق التعليمات البرمجية. يتيح لك استخدام Prettier عدم التفكير في التنسيق ، ولكن القيام بالبرمجة بدلاً من ذلك. في حالتي ، على سبيل المثال ، زادت كفاءة العمل ، بفضل Prettier ، بنسبة 10 ٪.
- أجمل يساعد المبتدئين. إذا كنت مبرمجًا مبتدئًا تعمل في نفس الفريق مع محترفين جادين ، وتريد أن تبدو جديرًا على خلفيتهم ، فإن Prettier سيساعدك في ذلك.
▍تكوين أجمل
إليك كيفية استخدام Prettier في مشروع جديد. قم
app مجلد
app ، وانتقل إليه ، قم بتشغيل الأمر التالي في سطر الأوامر:
npm init -y
بفضل هذا الأمر ، يقوم
npm بتهيئة مشروع جديد في مجلد
app عن طريق إنشاء ملف
package.json فيه.
أنا ، في هذه المادة ،
npm yarn ، ولكن هنا يمكنك استخدام
npm . يمكن أيضًا ربط أجمل بمشروع موجود.
قم بتثبيت الحزمة الأكثر
prettier باعتمادها على تطوير مشروعنا:
yarn add
بفضل هذا الأمر ، ستتم إضافة إدخال تبعية
package.json إلى
package.json يبدو كالتالي:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "prettier": "prettier --write src/**/*.js" }, "devDependencies": { "prettier": "^1.14.3" } }
سنتحدث عما يعنيه الخط
"prettier": "prettier — write src/**/*.js" بعد ذلك بقليل. في هذه الأثناء ، قم بإنشاء مجلد
src في مجلد
app . في هذا المجلد ، قم بإنشاء ملف
index.js ، على الرغم من أنه يمكنك تسميته كما تريد.
سنضيف الكود التالي إلى هذا الملف (في هذا الشكل القبيح):
let person = { name: "Yoda", designation: 'Jedi Master ' }; function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`) } trainJedi(person) trainJedi({ name: 'Adeel', designation: 'padawan' });
لذلك ، في الوقت الحالي لدينا ملف
src/app/index.js ، والذي يحتوي على رمز ضعيف التصميم إلى حد ما.
كيفية إصلاحها؟ هناك ثلاث طرق للعمل باستخدام كود ضعيف التنسيق:
- تنسيق هذا الرمز يدويًا.
- استخدم أداة آلية.
- اتركه كما هو واعمل عليه (أطلب منك عدم اختيار هذا النهج).
سأختار الخيار الثاني. الآن في مشروعنا هناك تبعية مقابلة ، بالإضافة إلى ذلك ، في قسم
scripts لملف
package.json يوجد سجل حول Prettier. من الواضح أننا سنستخدم هذه الأداة لتنسيق الكود. للقيام بذلك ، قم بإنشاء ملف prettier.config.js في مجلد
app وإضافة قواعد Prettier هناك:
module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, };
دعونا نحلل هذه القواعد:
printWidth: 100 - يجب ألا يتجاوز طول السطر 100 حرف.singleQuote: true - سيتم تحويل كافة علامات الاقتباس المزدوجة إلى علامات اقتباس مفردة. راجع دليل نمط Airbnb لمزيد من التفاصيل. أنا حقا أحب هذا الدليل ، وأنا استخدمه لتحسين جودة التعليمات البرمجية الخاصة بي.trailingComma: 'all' - توفر فاصلة بعد آخر خاصية للعنصر. هنا مقال جيد حول هذا الموضوع.bracketSpacing: true - مسؤول عن إدخال مسافات بين جسم الكائن والأقواس المتعرجة في حرفية الكائن. إذا تم تعيين هذه الخاصية على " true ، فستبدو الكائنات التي تم تعريفها باستخدام حرفية الكائن كما يلي: { foo: bar } . إذا قمت بتعيينه على false ، فستبدو مثل هذه الإنشاءات كما يلي: {foo: bar} .jsxBracketSameLine: false - بفضل هذه القاعدة ، سيتم وضع الرمز > في عناصر JSX متعددة الأسطر في السطر الأخير. إليك ما يبدو عليه الرمز إذا تم تعيين هذه القاعدة على " true :
<button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button>
إليك ما يحدث إذا تم تعيينه على
false :
<button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button>
tabWidth: 2 - يحدد عدد المسافات لكل مستوى محاذاة.semi: true - إذا تم تعيين هذه القاعدة على " true ، تتم إضافة فاصلة منقوطة في نهاية التعبيرات.
اعثر على جميع قواعد أجمل هنا.
الآن بعد أن تم تكوين القواعد ، فلنتحدث عن هذا النص البرمجي:
"prettier": "prettier — write src/**/*.js"
بفضل هذا التصميم ، يقوم Prettier بتشغيل جميع ملفات
.js والبحث عنها في مجلد
src .
--write علامة
--write بحفظ الملفات المنسقة أثناء معالجتها وتصحيح أخطاء التنسيق الموجودة فيها.
قم بتشغيل البرنامج النصي من سطر الأوامر:
yarn prettier
هذا ما حدث بعد ذلك برمز ضعيف التنسيق الموضح أعلاه.
نتيجة رمز التنسيق مع أجملعلى هذا سنفترض أننا مع Prettier اكتشفنا. لنتحدث عن الوبر.
ESLint
Linting هو نوع من تحليل التعليمات البرمجية الثابتة الذي يُستخدم غالبًا للعثور على أنماط التصميم أو التعليمات البرمجية التي لا تتبع إرشادات نمط معينة.
هناك linters مصممة لمعظم لغات البرمجة ، وأحيانًا يتضمن المترجمون linting في عملية تجميع التعليمات البرمجية. يتم أخذ هذا التعريف من
صفحة المعلومات مفتوحة المصدر ل JavaScript JavaScript ESLint مفتوح المصدر ، والذي سنتحدث عنه.
▍لماذا أحتاج لنتر لجافا سكريبت؟
نظرًا لأن
JavaScript هي لغة برمجة ديناميكية ذات كتابة ضعيفة ، فإن التعليمات البرمجية المكتوبة فيها عرضة للأخطاء التي يرتكبها المطورون. JavaScript هي لغة مترجمة ، لذلك عادة ما يتم الكشف عن بناء الجملة وأخطاء أخرى في التعليمات البرمجية فقط بعد تشغيل هذا الرمز.
تتيح
Linters ، مثل
ESLint ، للمطورين العثور على مشاكل في التعليمات البرمجية دون بدء تشغيلها.
▍لماذا تعد ESLint أداة خاصة؟
تم وضع سؤال جيد في عنوان هذا القسم. النقطة هنا هي أن ESLint يدعم الإضافات. لذا ، لا ينبغي أن تكون قواعد التحقق من الرمز حزمة متجانسة. يمكن توصيل كل ما تحتاجه حسب الحاجة. كل قاعدة من النسالة المضافة إلى النظام مستقلة ، ويمكن تشغيلها أو إيقاف تشغيلها بشكل مستقل عن القواعد الأخرى. يمكن تعيين مستوى تنبيه لكل قاعدة وفقًا لرغبة المطور - يمكن أن يكون هذا تحذيرًا (تحذيرًا) أو خطأ (خطأ).
عند استخدام ESLint ، فإنك تعمل مع نظام قابل للتخصيص بالكامل يمكن أن يعكس فهمك لما يجب أن يكون عليه الرمز الصحيح والتقاط مجموعة القواعد التي تتبعها.
من بين أدلة نمط جافا سكريبت الحالية ، يحظى ما يلي بشعبية كبيرة:
أنا ، كما ذكرنا سابقًا ، استخدم دليل أسلوب Airbnb. لقد نصحني مديري في هذه الوثيقة في الشركة التي بدأت فيها مسيرتي المهنية ، وأعتبر دليل الأسلوب هذا هو أثمن أصولي.
يتم الحفاظ على هذا الدليل بنشاط - ألق نظرة على مستودعه على GitHub. هنا سأستخدم مجموعة من القواعد القائمة على ذلك.
الآن دعنا نعمل على ملف
package.json ، أضف بعض التبعيات إليه:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }
قبل الحديث عن كيفية العمل مع هذا التكوين ، أريد أن أتناول تبعيات المشروع التي تمت إضافتها إلى
package.json . أعتقد أنه قبل استخدام بعض التبعيات ، يجب أن تعرف الدور الذي تلعبه.
لذلك ، سنناقش دور الحزم المقدمة هنا:
babel-eslint - يسمح لك باستخدام الوبر للتطبيق على كل ما يقدمه Babel . لا تحتاج إلى هذا البرنامج المساعد إذا كنت لا تستخدم Flow أو الميزات التجريبية التي لا تدعمها ESLint حتى الآن.eslint هي الأداة الرئيسية المستخدمة في التعليمات البرمجية.eslint-config-airbnb - يوفر قواعد Airbnb eslint-config-airbnb يمكن تعديله.eslint-plugin-babel هو مكوّن إضافي لـ ESLint يكمل المكوّن الإضافي babel-eslint . لقد babel-eslint تصميم القواعد التي ، عند استخدام babel-eslint ، تسبب مشاكل عند معالجة الميزات التجريبية.eslint-plugin-import - تدعم هذه الحزمة ربط eslint-plugin-import بناء import/export جديدة وتساعد على منع المشاكل المرتبطة بالتهجئة غير الصحيحة لمسارات الملفات وأسماء الوحدات المستوردة.eslint-plugin-jsx-a11y - توفر القواعد المتعلقة بتوافر عناصر JSX للأشخاص ذوي الإعاقة. الوصول إلى الويب مهم جدا.eslint-plugin-prettier prettier - يساعد ESLint و Prettier في العمل معًا. يبدو مثل هذا: عندما يقوم Prettier بتنسيق الرمز ، فإنه يفعل ذلك مع مراعاة قواعد ESLint.eslint-plugin-react response - يحتوي على قواعد ESLint المصممة للتفاعل.
في هذه المقالة ، نحن لا نتحدث عن اختبار الكود ، ولكن في
package.json أعلاه ، هناك تبعيات مصممة لاختبار الوحدة باستخدام
Jest / Enzyme . الآن ، إذا قررت استخدام هذه الأدوات للاختبار ، وصف للحزم ذات الصلة.
eslint-config-jest-enzyme - تم تصميم هذه الحزمة لتلك الحالات عند استخدام jest-environment-enzyme ، مما يؤدي إلى حقيقة أن متغيرات React و Enzyme عالمية. بفضل ذلك ، لن تصدر ESLint تحذيرات حول هذه المتغيرات.eslint-plugin-jest — البرنامج المساعد لـ Eslint لـ Jest.
هناك حزمتان إضافيتان في الملف سنناقشهما لاحقًا لمناقشة مسائل الأتمتة. هذا هو
husky lint-staged .
الآن بعد أن ناقشنا ، بشكل عام ، أدواتنا ، سنستمر في العمل.
قم
.eslintrc.js ملف
.eslintrc.js في مجلد
app :
module.exports = { env: { es6: true, browser: true, node: true, }, extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'], plugins: [ 'babel', 'import', 'jsx-a11y', 'react', 'prettier', ], parser: 'babel-eslint', parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true } }, rules: { 'linebreak-style': 'off', // Windows. 'arrow-parens': 'off', // prettier 'object-curly-newline': 'off', // prettier 'no-mixed-operators': 'off', // prettier 'arrow-body-style': 'off', // - ? 'function-paren-newline': 'off', // prettier 'no-plusplus': 'off', 'space-before-function-paren': 0, // prettier 'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb 'no-console': 'error', // airbnb 'no-alert': 'error', // airbnb 'no-param-reassign': 'off', // - ? "radix": "off", // parseInt, parseFloat radix . . 'react/require-default-props': 'off', // airbnb 'react/forbid-prop-types': 'off', // airbnb 'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb .jsx 'prefer-destructuring': 'off', 'react/no-find-dom-node': 'off', // 'react/no-did-mount-set-state': 'off', 'react/no-unused-prop-types': 'off', // 'react/jsx-one-expression-per-line': 'off', "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }], "jsx-a11y/label-has-for": [2, { "required": { "every": ["id"] } }], // htmlFor label 'prettier/prettier': ['error'], }, };
الآن قم بإضافة ملف
.eslintignore إلى مجلد
app :
/.git /.vscode node_modules
الآن لنتحدث عن كيفية
.eslintrc.js ملف
.eslintrc.js ، وعن معنى الإنشاءات المقدمة فيه.
يحتوي هذا الملف على البنية التالية:
module.exports = { env:{}, extends: {}, plugin: {}, parser: {}, parserOptions: {}, rules: {}, };
ضع في اعتبارك كتل هذا الملف التي تمثلها الكائنات ذات الأسماء المقابلة:
env - يسمح لك بتحديد قائمة البيئات التي تخطط لفحص الرمز لها. في حالتنا ، هناك es6 ، browser node معينة على true . es6 المعلمة es6 على ميزات ES6 ، باستثناء الوحدات (تقوم هذه الميزة تلقائيًا بتعيين كتلة ecmaVersion إلى 6 في كتلة ecmaVersion . browser معلمة المستعرض لمتغيرات المستعرض العالمية مثل Windows . تضيف معلمة node متغيرات ونطاقات بيئة Node.js العالمية ، على سبيل المثال ، global . يمكن العثور على تفاصيل حول البيئات هنا .extends - هو مجموعة من الخطوط مع تكوينات ، مع كل تكوين إضافي يمتد التكوين السابق. يتم استخدام قواعد Airbnb airbnb ، والتي يتم توسيعها إلى jest ثم توسيعها إلى jest-enzyme .plugins - إليك قواعد الفحص التي نريد استخدامها. نحن نطبق القواعد babel ، import ، jsx-a11y ، react ، prettier ، الذي تحدثنا عنه بالفعل.parser - يستخدم ESLint parser Espree بشكل افتراضي ، ولكن نظرًا لأننا نعمل مع Babel ، فإننا بحاجة إلى استخدام Babel-ESLint .parserOptions - نظرًا لأننا قمنا بتغيير المحلل اللغوي القياسي إلى babel-eslint ، فإننا نحتاج أيضًا إلى تعيين الخصائص في هذه الكتلة. ecmaVersion خاصية ecmaVersion إلى 6 إلى ESLint إلى أنه سيتم التحقق من رمز ES6. نظرًا لأننا نكتب رمزًا في وحدات EcmaScript ، sourceType تعيين خاصية sourceType على module . وأخيرًا ، نظرًا لأننا نستخدم React ، مما يعني استخدام JSX ، يتم كتابة كائن تم تعيين مفتاح jsx على true إلى خاصية ecmaFeatures .rules - أحب هذا الجزء من ملف .eslintrc.js أكثر من .eslintrc.js لأنه يسمح لك بتكوين قواعد ESLint. يمكن تغيير أو إعادة تعريف جميع القواعد التي قمنا بتوسيعها أو إضافتها باستخدام المكونات الإضافية ، ويتم ذلك في كتلة rules . يحتوي نص الملف على تعليقات على القواعد.
لنتحدث الآن عن ملف
.eslintignore . يقبل هذا الملف قائمة بالمسارات التي تمثل المجلدات التي لا يجب معالجة محتوياتها باستخدام ESLint.
يتم تحديد ثلاثة مجلدات هنا:
/.git - لست بحاجة إلى ESLint للتحقق من الملفات ذات الصلة بـ Git./.vscode - يحتوي المشروع على هذا المجلد نظرًا لأنني أستخدم VS Code. يخزن المحرر هنا معلومات التكوين التي يمكن تعيينها لكل مشروع. لا ينبغي معالجة هذه البيانات من قبل اللبيدة.node-modules - لا تحتاج ملفات التبعية أيضًا إلى التحقق باستخدام linter.
الآن دعونا نلقي نظرة على اثنين من النصوص الجديدة التي ظهرت في
package.json . ها هم:
"lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix"
إذا قمت بتنفيذ أولها ، باستخدام الأمر
yarn lint أو
npm run lint ، فسوف يتسبب ذلك في قيام اللنت بالنظر في جميع الملفات في دليل
src وعرض تقرير مفصل عن الملفات التي وجد فيها أخطاء. باستخدام هذا التقرير ، يمكنك تصحيح هذه الأخطاء.
تشغيل نص لينتإذا قمت بتنفيذ البرنامج النصي الثاني (
yarn lint:write ) ، فسيقوم ESLint بإجراء نفس الفحص الذي تم إجراؤه سابقًا. والفرق الوحيد هو أنه في هذا الوضع ، سيحاول النظام إصلاح الأخطاء المكتشفة ، وسيحاول إحضار الشفرة في أفضل شكل ممكن.
ملحق ESLint لرمز VS
لقد تم تكوين Prettier و ESLint بالفعل ، ولكن من أجل استخدام إمكانات هذه الأدوات ، يجب علينا تشغيل البرامج النصية. هذا ليس مناسبًا جدًا ، لذا حاول إصلاحه. وبالتحديد ، نريد التأكد من أن تنسيق التعليمات البرمجية ولفها يتم بواسطة الأمر لحفظ الملف في المحرر. بالإضافة إلى ذلك ، نرغب في إجراء تنسيق النص وتنسيقه قبل الالتزام.
نحن ، كمثال ، نستخدم محرر VS Code. سنحتاج
إلى ملحق ESLint لـ VS Code. لتثبيته ، يمكنك فتح لوحة تمديد VS Code (
ctrl+shift+x ). هنا ، في حقل البحث ، أدخل
eslint . تظهر قائمة بالامتدادات. ما يهمنا هو الشخص الذي تكون معلومات المطور الخاصة به هي Dirk Baeumer. بعد تثبيت هذا الملحق ، أعد تشغيل المحرر.
الآن ، في المجلد الجذر للمشروع (
app ) ، قم بإنشاء مجلد
.vscode (انتبه إلى النقطة في بداية الاسم - وهذا أمر مهم). في هذا المجلد ، قم بإنشاء ملف
settings.json بالمحتويات التالية:
{ "editor.formatOnSave": false, "eslint.autoFixOnSave": true, }
النظر في محتوياته.
editor.formatOnSave خاصية editor.formatOnSave تعيينها إلى false إلى أننا لسنا بحاجة إلى التكوين القياسي لتطبيق تنسيق الملف ، حيث يمكن أن يتسبب ذلك في حدوث تعارض مع ESLint و Prettier.- تم
eslint.autoFixOnSave خاصية eslint.autoFixOnSave على true ، لأنه من الضروري تشغيل المكون الإضافي المثبت في كل مرة يتم فيها حفظ الملف. نظرًا لأن ESLint و Prettier يعملان معًا في مشروع ما ، فإن حفظ الملف يؤدي إلى كل من التنسيق و linting code.
من المهم أن نلاحظ أنه الآن ، عند تشغيل النص البرمجي
lint:write ، سيتم تنفيذ كل من التنسيق linting و code.
تخيل مشاعرك إذا حصلت على رمز مشروع يحتوي على 20000 سطر ستحتاج إلى التحقق منه وتحسينه. تخيل الآن أنه سيتعين عليك القيام بذلك يدويًا. من المحتمل أن يستغرق هذا العمل شهرًا. وبمساعدة أدوات الأتمتة المذكورة أعلاه ، يتم كل هذا في حوالي ثلاثين ثانية.
الآن ، بعد إعداد كل ما تحتاجه ، في كل مرة تقوم فيها بحفظ الملف باستخدام الرمز ، سيهتم المحرر بفحص وتنسيق نص البرنامج. ومع ذلك ، نحن هنا نتحدث عن محرر VS Code. من المحتمل أن شخصًا في فريقك يفضل محررًا آخر. لا يوجد شيء خاطئ في ذلك ، ولكن لجعله مناسبًا للجميع للعمل ، سيتعين علينا العمل على شيء آخر لأتمتة.
أجش
تتيح لك حزمة Husky استخدام خطافات Git. هذا يعني أن لديك الفرصة لأداء إجراءات معينة قبل الالتزام أو قبل إرسال كود المستودع.
للاستفادة من ميزات Husky ، قم أولاً بتثبيت هذه الحزمة:
yarn add
بعد ذلك ، أضف ما يلي إلى
package.json :
"husky": { "hooks": { "pre-commit": "YOUR_COMMAND_HERE", "pre-push": "YOUR_COMMAND_HERE" } },
سيؤدي هذا إلى حقيقة أنه قبل تنفيذ الأمر
commit أو
push ، سيتم استدعاء برنامج نصي معين ، والذي ، على سبيل المثال ، يقوم بتنفيذ اختبار أو تنسيق التعليمات البرمجية.
يمكن العثور على تفاصيل حول Husky
هنا .
مرحل الوبر
تسمح لك حزمة
Lint-staged بفحص الملفات المفهرسة باستخدام اللنتر ، مما يساعد على منع إرسال الأخطاء إلى المستودع.
Linting منطقي قبل تنفيذ التعليمات البرمجية. بفضل هذا ، يمكنك التأكد من أن الأخطاء لا تخترق المستودع ، وتوفر نمطًا موحدًا للكود الذي يصل إلى هناك. ومع ذلك ، قد تكون عملية التحقق من المشروع بأكمله مهمة طويلة جدًا ، وقد تكون نتائج هذا التحقق لا معنى لها. في النهاية ، قد يحتاج الفحص إلى كشف الملفات التي تخطط لارتكابها.
يسمح لك Lint-staged بتنفيذ مجموعة من المهام العشوائية على الملفات المفهرسة التي تمت تصفيتها بواسطة نمط البحث. يمكن العثور على تفاصيل حول هذا
هنا .
قم بتثبيت حزمة Lint-stage:
yarn add
بعد ذلك ، في ملف
package.json ، أضف ما يلي:
"lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] },
بفضل هذا البناء ، سيتم تنفيذ الأمر
lint:write أولاً ، والتحقق من محتويات الملف وإصلاح الأخطاء ، وبعد ذلك ستتم إضافة الملفات إلى الفهرس باستخدام الأمر
git add . الآن هذا الأمر يستهدف ملفات.
.js و.
.jsx ، ولكن يمكن القيام بنفس الشيء مع ملفات من أنواع أخرى.
مشاركة أجش و Lint
ضع في اعتبارك مخططًا عمليًا يسمح لك بتنظيم سير العمل التالي. في كل مرة تقوم فيها بتنفيذ ملفات برمز ، قبل تنفيذ هذه العملية ، يقوم النظام بتشغيل النص البرمجي النسبي ، والذي بدوره يقوم بتشغيل
lint:write البرنامج النصي ، الذي ينفذ عملية طباعة وتنسيق الشفرة. بعد ذلك ، تتم إضافة الملفات إلى الفهرس ومن ثم الالتزام بها. يبدو لي أنها مريحة للغاية. في الواقع ، في الكود المقدم سابقًا لملف
package.json ، تم تنفيذ هذا بالفعل ، لم نتحدث عن هذا من قبل.
هنا محتويات
package.json مرة أخرى:
{ "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": { "lint": "eslint --debug src/", "lint:write": "eslint --debug src/ --fix", "prettier": "prettier --write src/**/*.js" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": { "babel-eslint": "^8.2.3", "eslint": "^4.19.1", "eslint-config-airbnb": "^17.0.0", "eslint-config-jest-enzyme": "^6.0.2", "eslint-plugin-babel": "^5.1.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.18.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.9.1", "husky": "^1.1.2", "lint-staged": "^7.3.0", "prettier": "^1.14.3" } }
الآن بعد أن تعرفت على Husky و Lint-staged ، يمكنك تقييم تأثيرها على العمل مع Git. أي افترض أنه تم تنفيذ الأوامر التالية:
$ git add . $ git commit -m "some descriptive message here"
من الواضح أنه قبل الالتزام ، سيتم فحص الرمز للتأكد من توافقه مع القواعد المحددة في
.eslintrc.js ، وإذا لزم الأمر ، تم إصلاحه. وبفضل هذا ، فإن الأخطاء لن تدخل أبدًا في مستودع مشروع عمل.
الآن أنت تعرف كيفية دمج Prettier و ESLint و Husky و Lint-staged في مشروعك.
دعني أذكرك أننا قلنا أعلاه أنه لا يستخدم جميع أعضاء فريقك كود VS المفضل لدي. لكي يعملوا جميعًا بشكل ملائم ، نحتاج إلى التعامل مع ملف.
.editorconfig .
ملف Editorconfig
قد يستخدم أعضاء مختلفون من فريقك محررين مختلفين. إجبارهم على استخدام أي محرر واحد لأي شيء. ومع ذلك ، لكي يستخدم الجميع نفس الإعدادات ، فيما يتعلق ، على سبيل المثال ، المسافات البادئة أو موجز الخط ، فإننا نستخدم الملف.
editorconfig . .
, . , , WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit .
app .editorconfig :
# EditorConfig - : http://EditorConfig.org # EditorConfig root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true # Unix [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100
, :
trim_trailing_whitespace = false — .md - . .js - false .indent_style = space — .indent_size = 2 — .end_of_line = lf — lf . , , . .insert_final_newline = true — .max_line_length = 100 — 100 .
الملخص
, , , . , , .
أعزائي القراء! ? ?