هاك WebStorm لاستكشاف مكونات إطار Quasar

TL ؛ DR: اتبع الإرشادات وستحصل على الإكمال التلقائي ، ووثيقة سريعة وقصاصات لـ Quasar 1.0

بواسطة ماتياس راسيك
الريبو: https://github.com/panstromek/quasar-ide-helper

لفترة من الوقت ، لم يكن تكامل Quasar في WebStorm أو أي محرر IDEA آخر مثاليًا. يعتبر Quasar إطارًا رائعًا ، لكن إعداده "ذكي جدًا" لا يستطيع IDEA التعامل معه بشكل صحيح. تحصل على الكثير من أخطاء علامات HTML غير المعروفة في جميع القوالب ، ويفقد الإكمال التلقائي للمكونات والكثير من التحذيرات الإيجابية الخاطئة.

هذه قصة عن رحلتي لحل هذه المشكلة.

قبل:

بعد:

المقدمة

أنا حقا متحمس لل IDEs. أنا جزء من الجيل الجديد من المطورين الذين نشأوا على دعم IDE المتفوق. لقد بدأت الترميز في Java ، وإذا كنت تستخدم IntelliJ ، فأنت تعلم مدى جودة تجربة المطور لترميز Java فيه. إنه هذا النوع من العمل الذي تقوم فيه بنصف النوع ، والنصف الآخر. يمكن لـ IDEA القيام بالكثير من تحويلات الشفرة نيابة عنك ، علاوة على ذلك ، يمكنها أن تضمن صحة هذه التحويلات. يعد هذا مفيدًا جدًا عندما تتعلم ، لأنك غالبًا لا تتذكر بناء الجملة الصحيح - إذا كنت ذكيًا بالإكمال التلقائي والنوايا ، فسوف تنشئ IDEA بناء الجملة الصحيح لك.

اعتدت على كل هذا ، كان إدراكا قاسيا عندما انتقلت إلى تطوير الشبكة. لا تعد JavaScript لغة جيدة للتحليل الثابت ، لذلك غالبًا ما تضيع IDEA عند محاولة مساعدتك. جافا سكريبت هي فقط ديناميكية للغاية. هناك الكثير من الأشياء التي يمكن أن تحدث * في وقت التشغيل ، بحيث إذا طلبت الإكمال التلقائي ، فستتخلى IDEA غالبًا وتقدم لك كل شيء (أو لا شيء).

الكوازار

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

الآن قد تعتقد أن الشيء الصحيح الذي ينبغي عمله هو إنشاء مكون إضافي IntelliJ لـ Quasar. وأنت على حق ، فقد ذهبت بعض أطر Vue بالفعل إلى هذا الطريق. لكن هذا ليس سهلا كما يبدو. لقد حاولت بالفعل القيام بشيء ما باستخدام Vue.js plugin (إنه مفتوح المصدر) ، لكنني لم أتمكن حتى من إنشاء بنية. نظام IntelliJ معقد للغاية من تلقاء نفسه ، ولا يوجد الكثير من البرامج التعليمية أو حتى الوثائق. تتطلب كتابة البرنامج المساعد فهم البنية الداخلية لـ IDE. عندما بدأت مشروعًا جديدًا للمكونات الإضافية ، حصلت للتو على مجلد فارغ به عدد قليل من ملفات التكوين ولم أكن أعرف حتى من أين أبدأ.

البرمجة النصية المبكرة

أخذت طريقا مختلفا. أنا اخترق. عندما بدأت العمل مع Quasar ، حاولت إعداد IDE بطريقة أو بأخرى ، لكنني لم أفلح. يوجد طلب قديم للحصول على دعم IntelliJ في Quasar repo ، حيث يصفjpgilchrist كيفية خداع IntelliJ بتكوين webpack وهمية. سيكون الإكمال التلقائي على الأقل من العلامات ، لكن المشكلة بقيت مفتوحة. لقد انتقلت للتو ونسيت هذا ، وقبلت الوضع في الغالب حتى وقت قريب.

تحول Quasar إلى نظام توثيق جديد لـ v1.0. جزء منه هو وثائق API ، والتي يتم إنشاؤها بالفعل من ملفات JSON التي يتم تخزينها جنبا إلى جنب مع شفرة المصدر. تعرفت على الفور على فرصة لهذا النظام ، لكنني لم أر بالفعل خيارًا سهلاً حتى وجدت منشورًا أقدم للمنتدى حيث أشارhwb إلى أن IntelliJ ستقوم بالإكمال التلقائي للمكونات إذا قمت بتسجيلها باستخدام مكالمة Vue.component. لذلك إذا قمت بإنشاء ملف جافا سكريبت مزيف حيث تقوم باستيراد وتسجيل جميع مكونات Quasar ، فستقوم IDEA باستلامها والإكمال التلقائي. قامhwb حتى بتقديم نص bash للقيام بذلك تلقائيًا. كنت حزينًا لأنني لم أجد هذا المنشور سابقًا.

هاك

هرعت على الفور لمحاولة القيام بذلك ونجح - اكتشفت بسرعة كيفية إنشاء مجموعة من التعاريف لمكونات Quasar باستخدام ملفات API JSON. علاوة على ذلك ، يمكنني تضمين تعليقات مع تعليقات JSDoc للمعلمات والأوصاف - كل ذلك من ملفات JSON api. عملت الطريقة الأصلية من المنشور بشكل جيد ، ولكنها لن تتعرف على المزيج بشكل صحيح ، لذلك قد يلمحك IDE أحيانًا بشكل غير صحيح. باستخدام واجهة برمجة تطبيقات Quasar الجديدة ، يمكنني أن أصححها وأوفر أيضًا عملية بحث سريعة عن الوثائق.

يمكنك أيضًا استخدام ctrl + b أو ctrl + النقر للانتقال إلى التعريف. سوف يأخذك إلى الملف الذي تم إنشاؤه مع جميع الدعائم الموثقة.

ولكن كان هناك الصيد. هناك دائما هو. لقد أنشأت الملف مع مجموعة من المكالمات المضمنة مثل هذا: Vue.prototype (B QBtn '، {...}). بعد أن قمت بإنشاء الملف مباشرة ، استلمت IDEA الملف وقدمت الإكمال التلقائي لأسماء المكونات ، لكنه لم ينجح في الدعائم الخاصة بهم. والآن تطور - بدأ العمل عندما قمت بتحرير الملف الذي تم إنشاؤه.

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

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

حقن النموذج الأولي

بعد أن اكتشفت كيفية حل المكونات ، بدأت في استكشاف ما إذا كان يمكنني فعل المزيد. توجد ملفات JSON API حتى بالنسبة لمكونات Quasar ، لذا يمكنني أيضًا إنشاء ملف جافا سكريبت مزيف يقوم بإدخالها في نموذج Vue الأولي. من شأنها أن تجعلها مرئية بسهولة ل IDE.

Vue.prototype. $ q = {
    شاشة كاملة :{
     // ملء الشاشة
    }
}

هذا يعمل كيندا ، ولكن هناك الصيد. لا تتعرف IDEA على هذا بشكل جيد ، لذلك إذا قمت بكتابة هذا. $ q. في مكون Vue ، سيمنحك الإكمال التلقائي الكلاسيكي "كل شيء".

ربما يرجع السبب في ذلك إلى أن IDEA لا يمكنها معرفة أنه سيتم تقييم هذا الرمز في سياق مثيل Vue. إنه مجرد كائن في النهاية. هذا هو المكان الذي قضيت فيه بضعة أيام في محاولة لمعرفة أي مجموعة من تعليقات jsdoc وتعريف الكود المطبق ورمز المكون ستعمل بشكل أفضل.

هذا يبدو أنه يجب أن تعمل ، أليس كذلك؟

/ **
 *type {Vue}
 * /
التصدير الافتراضي {
}

و لا ، هذا ليس كذلك.

لذلك جربت هذا:

/ **
 *type {Vue}
 * /
const ج = {
}
الافتراضي التصدير const ج

هذا جعل العمل الإكمال التلقائي! Yeey!
... لكنها ستنهي الإكمال التلقائي لهذا المكون. سيؤدي ذلك أيضًا إلى تعطيل مقتطفات Vue والميزات الأخرى ذات الصلة بال Vue في IDE.

الشيء نفسه ينطبق على هذا البناء:

Vue.extend الافتراضي للتصدير ({
})

ثم اكتشفت عن هذا التعليق التوضيحي JSDoc. وسوف تشرح ما هو هذا في سياق الوظيفة التالية. مما يعني أن الشفرة التالية ستعمل بشكل جيد:

التصدير الافتراضي {
    طرق: {
        / **this {Vue} * /
        طريقة، أسلوب() {
            هذا. $ ف. / / هنا تحصل على الإكمال التلقائي الصحيح!
        }
    }
}

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

ستحصل أيضًا على كل الحقن عندما تكتب Vue. $ q. ، لكن هذا ليس الاستخدام الصحيح.

كيفية الحصول على هذا في كوازار؟

هنا يأتي الجزء المثير للاهتمام. Quasar 1.0 يأتي مع نظام تمديد التطبيق الجديد. يتيح لك ذلك استخراج وظائف شائعة واستخدامها في مشاريع متعددة ، وحتى نشرها ليستخدمها الآخرون. يمكنك ربط عملية إنشاء ، وتوسيع تكوين حزمة الويب في وقت التشغيل ، وإضافة تبعيات في package.json ، وإضافة مجلدات ، ورمز وأكثر من ذلك.

الميزة الأقوى في رأيي هي القدرة على إضافة أوامر مخصصة. لذا فقد لفت مولداتي في امتداد بسيط يضيف أمرين إلى Quasar CLI. الآن يمكنك إضافة ملحق مع

$ cd your-quasar-1-project
إضافة $ كوازار تحويلة ide المساعد

و اهرب

$ كوازار المدى ide المساعد توليد

سيؤدي ذلك إلى إنشاء مجلد مساعد .quasar-ide-help مع تعريفات المكونات التي يسهل على IDEA فهرستها.

خاتمة

كانت هذه رحلتي حول توفير الإكمال التلقائي لمكونات Quasar والحقن - ولكن هناك المزيد. ستلاحظ أن المساعد المساعد يمكن أيضًا إنشاء مقتطفات (قوالب حية) وتوجيهات ، لكنني أرغب في حفظها في المرة القادمة.

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

معلومات اكثر

إذا كنت بحاجة إلى مزيد من المعلومات حول Quasar ، فإليك بعض الروابط التي يمكنك التحقق منها للنظر فيها:

- QUASAR MONOREPO: https://github.com/quasarframework/quasar
- المستندات: https://v1.quasar-framework.org/
- DISCORD: http://chat.quasar-framework.org/
- المنتدى: https://forum.quasar-framework.org/
- تويتر: https://twitter.com/quasarframework
- STEEM: http://steemit.com/@quasarframework
- IDE HELPER: https://github.com/panstromek/quasar-ide-helper