minapp vscode

WXML - خدمة اللغة

آخر تحديث[CHANGELOG.md]

لقد تولى @iChenLei صيانة هذا المكون الإضافي. ونرحب بالجميع لتقديم التعليقات في مجموعة DingTalk أو مشكلات Github.

الوظائف الرئيسية

• إنشاء مكونات برنامج صغير بنقرة واحدة
• اسم العلامة والإكمال التلقائي للسمة
• وفقًا للخصائص الموجودة للمكون، تتم تصفية مجموعة الخصائص المدعومة المقابلة تلقائيًا.
• الإكمال التلقائي لقيمة السمة
• انقر فوق الوظيفة أو السمة في ملف القالب للانتقال إلى المكان الذي تم فيه تعريف js/ts (مدعوم فقط بواسطة ملفات wxml أو pug، وغير مدعوم بالكامل بواسطة ملفات vue)
• الإكمال التلقائي لاسم النمط (مدعوم فقط بواسطة ملفات wxml أو pug، وغير مدعوم بالكامل بواسطة ملفات vue)
• ويمكن أيضًا إكماله تلقائيًا في ملفات قالب vue ويدعم لغة الصلصال.
• رابط الدعم (مدعوم فقط من خلال ملفات wxml أو pug النقية، وغير مدعوم من ملفات vue)
• الإكمال التلقائي للمكونات المخصصة (مدعوم فقط من خلال ملفات wxml النقية، وغير مدعوم من ملفات vue أو pug)
• تسليط الضوء على متغيرات js في ملفات القالب (مدعومة فقط بواسطة ملفات wxml أو pug، وغير مدعومة بواسطة ملفات vue)
• مقتطفات مدمجة
• دعم طريقة الكتابة emmet
• تنسيق wxml

تأتي جميع بيانات القالب المكتملة تلقائيًا من المستندات الرسمية ويتم الحصول عليها تلقائيًا من خلال البرامج النصية.

إنشاء مكونات برنامج صغير بنقرة واحدة

• انقر بزر الماوس الأيمن لرؤية خيار New Miniprogram Component . أدخل اسم المكون لإنشاء .wxml / .js / .wxss / .json ومجلدات المكونات بنقرة واحدة.
• فتح ملف js تلقائيًا بعد الإنشاء الناجح

• إنشاء المكونات يدعم تكوين لاحقة css/wxml/js، على سبيل المثال، يستخدم المشروع less/vue/ts

 {
  "minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
  "minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
  "minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}

يتم إكمال أسماء العلامات وأسماء السمات تلقائيًا

• في wxml، تحتاج إلى إدخال < لتشغيل إكمال العلامة، بينما في لغة pug، تحتاج فقط إلى كتابة بداية العلامة لتشغيل إكمال العلامة.
• سيؤدي إدخال مسافة إلى إكمال سمة العلامة المقابلة.

وفقًا للخصائص الموجودة للمكون، تتم تصفية مجموعة الخصائص المدعومة المقابلة تلقائيًا.

• عندما يكون وضع المنتقي = "selector"، هناك سمات range range-key
• عندما يكون وضع المنتقي = "الوقت"، تكون هناك سمات start end .

الإكمال التلقائي لقيم السمات (لن يتم تشغيل الإكمال إلا في حالة وجود قيمة اختيارية)

• يمكن تشغيله عن طريق إدخال مسافة في قيمة السمة، وسيتم استبدال المساحة تلقائيًا بعد الانتهاء.

انقر فوق الوظيفة أو السمة في ملف القالب للانتقال إلى المكان الذي تم فيه تعريف js/ts (مدعوم فقط بواسطة ملفات wxml أو pug، وغير مدعوم بالكامل بواسطة ملفات vue)

الوظيفة ليست مثالية بعد، فهي تبحث فقط عن ملفات البرامج النصية التي تحمل نفس اسم القالب الحالي، لذلك قد لا يتم العثور على التعريف في JS.

الإكمال التلقائي لاسم النمط (مدعوم فقط بواسطة ملفات wxml أو pug، وغير مدعوم بالكامل بواسطة ملفات vue)

سيحصل النظام تلقائيًا على جميع أسماء الأنماط في ملف النمط بنفس اسم القالب الحالي، ويمكنه أيضًا الحصول على المستندات الموجودة في /** */ على اسم النمط؛ إذا كانت هناك أنماط عامة، فستحتاج إلى استخدام التكوين العنصر minapp-vscode.globalStyleFiles المحدد.

• افتراضيًا، سيتم الحصول على الاسم الموجود في ملف النمط بنفس اسم القالب الحالي.

  ملاحظة: إذا كان ملف النمط @import ملف نمط آخر، فلن يحصل البرنامج على اسم النمط في الملف المستورد.

• بالإضافة إلى ذلك، يمكنك استخدام minapp-vscode.globalStyleFiles لتحديد بعض ملفات الأنماط العامة، بحيث تظهر أسماء الأنماط في هذه الملفات أيضًا بعد إدخال class=""

  يعد app.wxss الخاص بالبرنامج الصغير عمومًا نمطًا عامًا، لذا تحتاج إلى تحديده يدويًا من خلال هذا التكوين، مثل تكوين minapp-vscode.globalStyleFiles: ["src/app.wxss"]

• بالإضافة إلى ذلك، يمكنك أيضًا استخدام minapp-vscode.styleExtensions لتحديد لاحقة ملف النمط الذي يستخدمه النظام.

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

ملاحظة: ملفات نمط التنضيد ذات المسافة البادئة مثل sass غير مدعومة.

ويمكن أيضًا إكماله تلقائيًا في ملفات قالب vue ويدعم لغة الصلصال.

تدعم لوحة القالب في vue خاصيتين:

1. يمكن ضبط lang على "wxml" أو "pug" للإشارة إلى اللغة المستخدمة ( قد يؤدي تحديد سمة lang في إطار عمل يشبه vue إلى حدوث أخطاء في الترجمة. يمكنك استخدام xlang بدلاً من ذلك، ولكن هذا سيؤدي إلى إكمال vue وminapp في نفس الوقت )
2. يمكن ضبط minapp على "native" أو "wepy" أو "mpx" أو "mpvue" للإشارة إلى إطار العمل المستخدم، والإطار الافتراضي هو "mpvue"

يحب:

• <template lang="wxml" minapp="native"> يعني استخدام لغة wxml دون استخدام أي إطار عمل
• <template lang="pug" minapp="mpvue"> يعني استخدام لغة الصلصال واستخدام إطار عمل mpvue

لاحظ أن تحديد lang="wxml" في mpvue سيؤدي إلى الإبلاغ عن خطأ وسيتعين عليك الانتظار حتى يقوم المؤلف بإصلاحه! ومع ذلك، يمكنك استخدام xlang="wxml" مؤقتًا، ولكن هذا سيؤدي أيضًا إلى إكمال vue تلقائيًا.

سيؤدي تحديد قيم minapp المختلفة إلى تشغيل الإكمال التلقائي للإطار المقابل، نظرًا لأنني لم أقم بالتطوير باستخدام wepy وmpvue، تتم إضافة هذه الإكمالات التلقائية وفقًا للوثائق الرسمية src/plugin/lib/language.ts)

رابط الدعم (مدعوم فقط من خلال ملفات wxml أو pug النقية، وغير مدعوم من ملفات vue)

• افتراضيًا، سيتم ربط علامة src فقط، ويجب أن يكون الملف موجودًا، وإذا لم يكن موجودًا، فلن تتم إضافة الرابط.
• يمكنك تكوين minapp-vscode.linkAttributeNames لتوسيع العلامات الإضافية التي تدعم الارتباط. قم بتكوين هذه القيمة كمصفوفة فارغة لتعطيل وظيفة الارتباط.
• يمكن تكوين minapp-vscode.resolveRoots لاستخدام الدلائل النسبية لحل مسارات الصور

الإكمال التلقائي للمكونات المخصصة (مدعوم فقط من خلال ملفات wxml النقية، وغير مدعوم من ملفات vue أو pug)

• الحصول تلقائيًا على معلومات المكون في ملف json المقابل
• إعطاء الأولوية للمكونات المخصصة
• الحصول تلقائيًا على أوصاف الخصائص في المكونات

تسليط الضوء على متغيرات js في ملفات القالب (مدعومة فقط بواسطة ملفات wxml أو pug، وغير مدعومة بواسطة ملفات vue)

• يتم إيقاف التمييز بشكل افتراضي. يمكنك تكوين minapp-vscode.disableDecorate إلى true لتشغيل التمييز.
• لون التمييز الافتراضي هو اللون الأرجواني. يمكنك تكوين minapp-vscode.decorateType لاستخدام اللون المفضل لديك، مثل {"color": "red"}
• افتراضيًا، سيتم تمييز جميع الأحرف بين "{{" و"}}" ويمكنك ضبط minapp-vscode.decorateComplexInterpolation على false ، بحيث يتم تمييز المتغيرات فقط (مثل: foo ، foo.prop ، foo[1] ). سيتم تمييزه، ولن يتم تمييز التعبيرات (مثل: foo + bar , foo < 3 ) وسيتم استخدام اللون الأصلي.

من أجل تسريع التحليل، يستخدم تمييز الألوان مطابقة التعبير العادي، لذلك قد تحدث أخطاء في المطابقة إذا لم تكن راضيًا، فيمكنك تكوين minapp-vscode.disableDecorate لتعطيل وظيفة تمييز الألوان.

القضايا المعروفة:

• سيتم أيضًا تسليط الضوء على المتغيرات في التعليقات بلغة البج (البج يعتمد على المسافة البادئة، وليس من السهل التعامل مع التعبيرات العادية)

مقتطفات مدمجة

• يأتي مع أداة التمرير/الرمز/الزر/وقت المنتقى/تاريخ المنتقي/منطقة المنتقي/مجموعة مربع الاختيار/مجموعة الراديو، راجع الملف
• يمكنك تحديد المقتطفات الخاصة بك من خلال عنصر التكوين minapp-vscode.snippets

الفرق عن المقتطفات الرسمية هو أن المقتطفات هنا تحتاج فقط إلى تحديد المفتاح والنص، وسيتم الحصول على وصف المكون تلقائيًا بناءً على المفتاح (بالإضافة إلى ذلك، يمكن دمج التكوين مع البيانات المضمنة لاحقًا)

دعم طريقة الكتابة emmet

ورقة الغش إيميت

تنسيق wxml

دعم prettyHtml و js-beautify prettier (يجب كتابة بعض المحتوى بطريقة متوافقة مع HTML)

• wxml

 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具

• js-تجميل

 "minapp-vscode.wxmlFormatter" : "jsBeautifyHtml" , // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml" : "useCodeBuiltInHTML" ,
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml" : { // jsBeautify 默认配置
    "content_unformatted" : "text" ,
    "wrap_attributes" : "force" ,
    "indent_size" : 2 ,
    "wrap_attributes_indent_size" : 2 ,
    "void_elements" : "image,input,video" ,
    "indent_scripts" : "keep"
}

• beautifulHtml

 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}

• أجمل

 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}

• نصائح:
  1. بالنسبة للأوضاع prettyHtml prettier ، سيتم قراءة ملف التكوين ضمن المشروع تلقائيًا، ملف التكوين Prettier .editorconfig
  2. يتطلب تبديل أدوات التنسيق إعادة تشغيل VSCode
  3. بالنسبة إلى prettyHtml ، فإن بناء جملة HTML5 الذي تعتمده prettier لا يتوافق تمامًا مع wxml. يرجى الانتباه إلى التوافق عند الكتابة.
  4. بالنسبة إلى jsBeautifyHtml ، عندما تكون القيمة "useCodeBuiltInHTML" ، ستتم قراءة معلومات التكوين من مستند حقل html.format.* في تكوين vscode وتحويله إلى تكوين js-beautify

التعليمات

لا يظهر الإكمال التلقائي بعد تثبيت المكون الإضافي

1. تأكد من إعادة تشغيل VSCode بعد التثبيت
2. تأكد من أن تنسيق الملف الحالي هو wxml أو wxml-pug أو vue (لا يمكنك النظر إلى لاحقة الملف لأنها قد تكون مرتبطة بتنسيقات ملفات أخرى في ملف التكوين؛ تحتاج إلى إلقاء نظرة على نوع الملف المعروض في الجزء السفلي الزاوية اليمنى من vscode)

في المشاريع غير المصغرة، لا تريد ملفات Pug الإكمال التلقائي للبرامج المصغرة.

سيقوم المكون الإضافي minapp تلقائيًا بربط ملفات .pug بنوع ملف wxml-pug . لذلك تحتاج فقط إلى تكوين اقتران الملف في المشروع المحدد.

• في المشاريع غير المصغرة للبرامج، قم بربط الملفات ذات اللاحقة .pug بنوع ملف pug
• في مشروع البرنامج المصغر، قم بربط الملفات ذات اللاحقة .pug بنوع الملف wxml-pug