codecrumbs
1.0.0
هل سبق لك أن ضللت طريقك في قاعدة بيانات كبيرة أو غير معروفة؟ هذه الأداة سوف تساعدك على حل ذلك. كما أنه سيزيد من سرعة التطوير لديك ويمنحك المزيد من المعرفة حول بنية التطبيق الخاص بك.
إذا أعجبك هذا المشروع، تابعني على Twitterbliashenko لتعرف عن الأشياء التي أقوم ببنائها.
تحقق من الإصدار الجديد من هذا المشروع كتطبيق مستقل. ببضع نقرات فقط، يمكنك البدء في استكشاف قاعدة التعليمات البرمجية بطريقة أكثر فعالية، وإنشاء أدلة مرئية تفاعلية ومشاركتها مع الآخرين على مدونتك الخاصة! انظر الدليل السريع هنا.
تحقق من المثال المعد للإصدار المستقل الذي يعمل هنا .
كيف يعمل؟ يمكنك تشغيل أمر
codecrumbsلقاعدة تعليمات برمجية، ويقوم بتحليل كود المصدر وإنشاء تمثيل مرئي له. قم بتدوين تعليق مسار التعليمات البرمجية وسوف تنعكس حالة قاعدة التعليمات البرمجية بواسطة العميل المرئي في المتصفح أثناء التنقل.تحقق من محادثتي في React-Finland لمزيد من التفاصيل.
الشرط المسبق: تحديث/تثبيت إصدار
NodeJSليكون >= 8.11.1
codecrumbs على مستوى العالم ( yarn global add codecrumbs )codecrumbs -d project-src-dir -e project-src-dir/index.js . قم بتغيير المعلمات لتتناسب مع مشروعك: -d هو الدليل الذي يحتوي على الكود المصدري ، -e هو ملف نقطة الإدخال . قم بتشغيل Codecrumbs باستخدام معلمات CLI أو حدد ملف التكوين الثابت codecrumbs.config.js (انظر المثال هنا)
| سطر الأوامر | ملف التكوين | وصف | مثال |
|---|---|---|---|
d | projectDir | المسار النسبي إلى دليل التعليمات البرمجية المصدر للمشروع | -d src |
e | entryPoint | المسار النسبي لملف نقطة إدخال مصدر المشروع (يجب أن يكون داخل dir ) | -e src/app.js |
x | excludeDir | المسار النسبي (أو المسارات المفصولة بـ , إلى أدلة الاستبعاد | -x src/doc,src/thirdparty |
p | clientPort | منفذ لعميل Codecrumbs (اختياري، افتراضي 2018 ) | -p 2019 |
n | projectNameAlias | الاسم المستعار لاسم المشروع (اختياري، افتراضي مثل القيمة -d ) | -n my-hello-world |
C | - | المسار إلى codecrumbs.config.js (اختياري، سيحاول افتراضيًا العثور على الملف في PWD) | -C config/codecrumbs.config.js |
D | debugModeEnabled | تمكين وضع التصحيح للسجلات (اختياري، الافتراضي هو false ) | -D |
وأوضح واجهة المستخدم:
كيف تصل إلى هناك؟
اترك مسار التنقل في الكود عن طريق كتابة تعليق: //cc:[parameters;] .
cc (ترمز إلى "CodeCrumb") هي بادئة يستخدمها المحلل اللغوي؛ تحقق من مثال المعلمات في الجدول أدناه:
| مثال | وصف | حالة الاستخدام |
|---|---|---|
//cc:remember place | مسار تنقل بسيط، remember place هو عنوان مسار التنقل الأول لدينا | حدد مكانًا مهمًا حتى لا تنسى مكانه |
//cc:here is bug;well, seems like a bug in logic | يبدو أن مسار التنقل البسيط well, seems like a bug in logic وهو عبارة عن تفاصيل لمسار التنقل مفصولة بـ ; | إضافة معلومات إضافية، سيتم عرضها في النوافذ المنبثقة |
//cc:signin#3;enable route | مسار مسارات التنقل، signin هو معرف المسار ، #3 هو رقم طلب الخطوة ، enable route هو عنوان يصف الخطوة. | سلسلة من مسارات التعليمات البرمجية، تُستخدم لوصف بعض تدفقات البيانات (مثل تسجيل دخول المستخدم، أو إرسال النموذج، وما إلى ذلك). |
//cc:signin#1;firebase sign in;+2;do call to firebase with credentials | أثر فتات الخبز، +2 هو عدد الخطوط التي يجب تمييزها، مفصولة بـ ; | استخدم عدد الأسطر لتسليط الضوء على الكود المتعلق بمسار التنقل |
ملحوظة: الإصدار الحالي يدعم التعليقات ذات السطر الواحد فقط.
تلميح: يمكنك استخدام معرف المسار بدون رقم الخطوة (على سبيل المثال
//cc:groupname#;test) فقط لتجميع مسارات التنقل، ويمكنك دائمًا إضافة أرقام الخطوات لاحقًا عندما تعرف الترتيب الصحيح.
قد تكون مهتمًا بدراسة الاتصالات بين العديد من قواعد التعليمات البرمجية (الوحدات الفرعية)، وتدعم مسارات التعليمات البرمجية ذلك. ما عليك سوى بدء تشغيل مخططات التعليمات البرمجية عدة مرات (مرة واحدة لكل قاعدة تعليمات برمجية)، وستتم مزامنتها كلها في صورة واحدة داخل علامة تبويب المتصفح. للتحكم في واجهة مستخدم الرسم التخطيطي - حدده بالنقر فوقه.
على سبيل المثال، بالنسبة لتطبيق خادم العميل، انتقل إلى الدليل المصدر لرمز الخادم الخاص بك وقم بتشغيل codecrumbs -e your-server-src/index.py -d your-server-src ، نفس الشيء بالنسبة للعميل codecrumbs -e src-client/index.js -d src-client .
ملاحظة: يمكن تحديد موقع قواعد التعليمات البرمجية في أي مكان تريده ( لا داعي لامتلاكها مثل mono-repo، وما إلى ذلك)، ما عليك سوى تشغيل
codecrumbsللدليل الذي تحتاجه.
الإصدار الحالي يدعم لغات البرمجة التالية:
C#C++FortranGoHaskellJavaJavaScriptKotlinPHPPythonRubyTypeScriptيرجى تقديم مشكلة لدعم اللغة الأخرى التي ترغب في الحصول عليها.
ملحوظة: في الإصدار الحالي فقط [JavaScript, TypeScript] يقدم هذه الميزة
وأوضح واجهة المستخدم:
ملحوظة: في الإصدار الحالي فقط JavaScript هو الذي يوفر هذه الميزة
يتم استخدام js2flowchart في الشريط الجانبي لرسم مخطط انسيابي لرمز الملف المحدد.
هو موضع تقدير كبير أي دعم! ؟ ؟ ❤️ إذا أعجبك هذا المشروع، من فضلك قم بوضع تغريدة عنه وتغريده . شكرًا!
من فضلك، فكر في تقديم تبرع مالي، فهو سيساعد في تطوير المزيد من الميزات الرائعة! سنشكرك بإدراج اسمك/شعار شركتك هنا
التطوير مدعوم بـ 0+X
عند المساهمة في هذا المستودع، يرجى أولاً مناقشة التغيير الذي ترغب في إجرائه عبر الإصدار أو البريد الإلكتروني أو أي طريقة أخرى مع مالك هذا المستودع قبل إجراء التغيير. الأفكار والاقتراحات هي موضع ترحيب. لبدء بيئة التطوير، انسخ الريبو وقم بتشغيل:
yarn && yarn start يتم تطوير الميزات التالية:
