Emmet: Emmet لـ CSS-in-JS

renatorib هل وجدت حلاً لاستخدام emmet لـ CSS-inJS حتى الآن؟

لا

إذا كنت تستخدم Atom ، فتحقق من https://atom.io/packages/atom-emmet-css-in-js

لـ vscode هناك حزمتان:

• شبيبة مقتطفات
• CSS-in-JS

يحتوي الإصدار الثاني على المزيد من التثبيتات ولكن لم أتمكن من تشغيله: /

العمل عليه كجزء من Emmet v2: https://github.com/emmetio/emmet/tree/v2
هل يمكنك تقديم بعض المواصفات حول السلوك المطلوب (أنا لا أستخدم CSS-in-JS شخصيًا)؟

sergeche سيكون السلوك مشابهًا جدًا:

على سبيل المثال ، داخل ملف .jsx ، يؤدي الضغط على bgc<TAB> إلى توسيعه إلى ` backgroundColor: '#' - باستخدام المؤشر بعد # .

يلاحظ:

1. الخصائص هي من صنع الجمل
2. القيمة في هذه الحالة هي سلسلة
3. يمكن أن تكون القيمة أيضًا رقمًا ، على سبيل المثال opacity ، لذلك نحذف عروض الأسعار ، على سبيل المثال ، الضغط على op<TAB> سيتوسع إلى opacity:

ما رأيك؟

goldylucks نعم ، يعمل التنفيذ الحالي على النحو التالي: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
اعتقدت أن هناك بعض المراوغات مثل القيم المتعددة يجب أن تكون مصفوفات ( margin: 10px 20px → margin: [10, 20] ) أو شيء من هذا القبيل.

إذا كان في الغالب ناتجًا يشبه JSON لخصائص CSS ، فسيتم تنفيذه بالفعل في Emmet الجديد

sergeche هل يجب أن تعمل اختصارات CSS المتدرجة lg () في css-in-js؟ لا أستطيع أن أجعلها تعمل.

@ tayler-ramsay يجب أن يعمل. هل تستخدم أحدث إصدار RC من Emmet (v2.0.0rc-5)؟

sergeche شكرا على الاستجابة السريعة. أنا أعمل في كود VS ، هل هناك طريقة يمكنني من خلالها التأكد من الإصدار الذي يستخدمه؟

أعتقد أنه الإصدار 2 فقط. يمكنني فقط التثبيت باعتباره تبعية جيدة. فقط أتساءل عما إذا كان بإمكاني ترقيته في رمز VS. آسف لتعديل ردي ؛ /

أوه ، إذن فهو غير متوفر بعد. إصدار Emmet الجديد متاح فقط في البرنامج المساعد Sublime Text الجديد

هتافات!
مع أطيب التحيات،

تايلر رامزي ({

• ({المطور} && "المصمم") *
• إرجاع {*
  [الهاتف: (717) 578-3243 ،
  www.tayler.co http://www.taylerramsay.com/ ]
• } *
• }) ؛ *

"إنه خيط رفيع بين الغباء والذكي."

يوم الأربعاء 30 أكتوبر 2019 الساعة 10:15 صباحًا Sergey Chikuyonok [email protected]
كتب:

أوه ، إذن فهو غير متوفر بعد. إصدار Emmet الجديد متاح فقط في
البرنامج المساعد الجديد Sublime Text

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/emmetio/emmet/issues/512؟email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMV
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

سيكون دعم القيم الحرفية لقالب css رائعًا أيضًا.

على سبيل المثال

const style = css`
  background-color: red;
  /* Auto-expand css props */
`;

تحرير: لا تهتم بي ، أنا فقط بحاجة إلى تثبيت امتداد مكونات vscode .

شكرا!

هذا عظيم! من فضلك ، sergeche ، اسمحوا لي أن أعرف ما إذا كان بإمكاني تقديم أي مساعدة في هذه الميزة.

لقد جعلت Emmet 2.0 متاحًا للجمهور أمس (فقط الجزء الأساسي نفسه) ، وهو متاح في محرري Sublime Text و CodeMirror و Nova. يمكنك إعطائي بعض مقتطفات التعليمات البرمجية مع حالات الاستخدام الواقعية حتى أتمكن من ضبط المحرر لاكتشاف السياق بشكل أفضل.

على سبيل المثال ، في JS (X) ، يجب أن تكون الاختصارات مسبوقة بـ < حتى لا تشتت انتباه المستخدمين بمطابقات خاطئة. على سبيل المثال ، يجب أن تكتب شيئًا مثل <div.my-class . يمكنني عمل بادئة مخصصة حتى تتمكن من توضيح أن الاختصار الذي تكتبه يجب أن يتم توسيعه ليصبح كائن CSS حرفيًا. شيء من هذا القبيل |m10+p5

هذا رائع! بالنسبة إلى المقتطفات ، يعتمد الأمر على CSS-in-JS الذي تستخدمه (وحتى كيفية تكوينه). المثال الأصلي من هذه المشكلة هو مثال جيد (لقد قمت بتعديل margin ):

{
  display: 'flex',
  fontSize: '16px',
  margin: '10px 5px',
}

يمكنك أيضًا القيام بشيء كهذا والحصول على نفس النتائج (على الأقل في JSS):

{
  display: 'flex',
  fontSize: 16,
  margin: [[5, 10]],
}

نظرًا لوجود العديد من نكهات CSS-in-JS ، أعتقد أن الخيار الافتراضي الأكثر أمانًا هو استخدام القيم داخل علامات الاقتباس كما في المثال الأول.

أي فرصة لتجربة هذا في VS Code؟

أخطط لإعادة كتابة امتداد VSCode في المستقبل القريب لدعم جميع ميزات Emmet

тправлено с iPhone

2 мая 2020 г.، в 15:25، Thomas [email protected] написал (а):

أي فرصة لتجربة هذا في VS Code؟

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بإلغاء الاشتراك.

مرحبًا 👋
استنادًا إلى المحادثة أعلاه ، يبدو أن Emmet يدعم بالفعل بناء جملة كائن CSS داخل ملفات .js لكن هذا غير مدعوم حتى الآن في VS Code.

هل هذا دقيق؟ ☝️

لقد بحثت في Google ولكن لم أجد إجابة مباشرة.
sergeche شكرًا جزيلاً على عملك على هذه الميزة!

نعم ، يدعم إصدار Emmet الجديد (موجود بالفعل في VSCode) الإخراج كخصائص JSON. يتطلب دعمًا إضافيًا من البرنامج المساعد نفسه

يا هذا رائع! لم أكتشف بعد كيف أجعلها تعمل.

يتطلب دعمًا إضافيًا من البرنامج المساعد نفسه

☝️ هل يمكنك توضيح هذا قليلاً أو توجيهي في الاتجاه الصحيح؟ هل توجد مستندات في مكان ما حول كيفية تشغيلها؟
شكرا لك مرة أخرى!

يعطيني تعيين emmet.includeLanguages إلى "javascript": "css" CSS قياسيًا (وليس بنية الكائن).
ضبطه على "javascript": "javascriptreact" يحاول تحويل CSS إلى JSX.

هل هناك إعداد آخر يجب أن أستخدمه للحصول على بنية كائن CSS؟ لا يمكنني العثور على قائمة بالخيارات الممكنة في أي مكان. هنا يمكنك رؤية settings.json والمشكلة التي أواجهها:

https://user-images.githubusercontent.com/19367659/113518218-ebbfbb00-9552-11eb-8963-eadef0b15f06.mp4

للتوضيح ، آمل أن أكتب هذا في ملف .js الخاص بي:
d:f+jc:c+ai:c+mt10

واحصل على هذا الناتج:

display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,

يجب تعيين هذا الخيار على true : https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

لست متأكدًا من كيفية تعيين خيارات Emmet في المكون الإضافي VSCode (أنا لست المشرف)

أعتقد أنك على حق sergeche ، هل وجدت طريقة إضافة التكوين إلى VSCode؟

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

شكرًا لك sergeche على اللحظة التي أستخدم فيها هذا الامتداد الأصلي Emet . ليس Emmet حقًا ولكن هناك الكثير من المقتطفات مع استكمال علامة التبويب. ها هي القائمة الكاملة