Emmet: सीएसएस-इन-जेएस के लिए एम्मेट

@renatorib क्या आपको अभी तक CSS-inJS के लिए एम्मेट का उपयोग करने का कोई समाधान मिला है?

नहीं

यदि आप एटम का उपयोग कर रहे हैं, तो https://atom.io/packages/atom-emmet-css-in-js देखें ।

Vscode के लिए दो पैकेज हैं:

• जेएस स्निपेट्स
• सीएसएस-इन-जेएस

दूसरे में अधिक इंस्टॉल हैं लेकिन मैं इसे काम पर नहीं ला सका: /

एम्मेट v2 के एक भाग के रूप में इस पर कार्य करना: https://github.com/emmetio/emmet/tree/v2
क्या आप वांछित व्यवहार के बारे में कुछ विवरण प्रदान कर सकते हैं (मैं व्यक्तिगत रूप से सीएसएस-इन-जेएस का उपयोग नहीं करता)?

@sergeche व्यवहार बहुत समान होगा:

उदाहरण के लिए .jsx फ़ाइल के अंदर, bgc<TAB> दबाने पर 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] ) या कुछ और।

यदि यह ज्यादातर CSS गुणों का JSON जैसा आउटपुट है तो यह पहले से ही नए एम्मेट में लागू है

@sergeche क्या lg() ग्रेडिएंट CSS संक्षिप्ताक्षर css-in-js में काम करना चाहिए? मुझे लगता है कि यह काम नहीं कर रहा है।

@ टायलर-रामसे को काम करना चाहिए। क्या आप एम्मेट (v2.0.0rc-5) के नवीनतम RC संस्करण का उपयोग करते हैं?

@sergeche त्वरित प्रतिक्रिया के लिए धन्यवाद। मैं वीएस कोड में काम कर रहा हूं, क्या कोई तरीका है जिससे मैं उस संस्करण के बारे में सुनिश्चित कर सकता हूं जिसका वह उपयोग कर रहा है?

मुझे लगता है कि यह केवल v2 है। मैं सिर्फ एक निर्भरता के रूप में स्थापित कर सकता हूं जो अच्छा है। बस सोच रहा था कि क्या मैं इसे वीएस कोड में अपग्रेड कर सकता हूं। मेरी प्रतिक्रिया संपादित करने के लिए खेद है;/

ओह, तो यह अभी तक उपलब्ध नहीं है। नया एम्मेट संस्करण केवल नए सब्लिमे टेक्स्ट प्लगइन में उपलब्ध है

चीयर्स!
सादर,

टेलर रामसे ({

• ({डेवलपर} && "डिजाइनर")*
• वापसी {*
  [फोन: (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"यह बेवकूफ और चतुर के बीच इतनी महीन रेखा है।"

Wed, Oct 30, 2019 at 10:15 AM Sergey Chikuyonok [email protected]
लिखा था:

ओह, तो यह अभी तक उपलब्ध नहीं है। नया एम्मेट संस्करण केवल में उपलब्ध है
नया उदात्त पाठ प्लगइन

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXGEC43VMVHHJHJIKNWNW
या सदस्यता समाप्त करें
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

सीएसएस टेम्पलेट अक्षर के लिए समर्थन भी बहुत अच्छा होगा।

उदाहरण के लिए

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

संपादित करें: मुझे कोई फर्क नहीं पड़ता, मुझे बस बनाम-स्टाइल-घटक एक्सटेंशन स्थापित करने की आवश्यकता है।

धन्यवाद!

यह भी खूब रही! कृपया, @sergeche , मुझे बताएं कि क्या मैं इस सुविधा के साथ कोई मदद कर सकता हूं।

मैंने एम्मेट 2.0 को कल सार्वजनिक रूप से उपलब्ध कराया (सिर्फ मुख्य भाग ही), यह सबलाइम टेक्स्ट, कोडमिरर और नोवा संपादकों में उपलब्ध है। आप मुझे वास्तविक दुनिया के उपयोग के मामलों के साथ कुछ कोड स्निपेट दे सकते हैं ताकि मैं बेहतर संदर्भ पहचान के लिए संपादक को ट्यून कर सकूं।

एक उदाहरण के रूप में, JS(X) में, संक्षिप्ताक्षरों को < के साथ उपसर्ग किया जाना चाहिए ताकि उपयोगकर्ताओं को झूठे मैचों से विचलित न किया जा सके। जैसे आपको कुछ लिखना चाहिए <div.my-class । मैं कस्टम उपसर्ग बना सकता हूं ताकि आप स्पष्ट रूप से बता सकें कि आप जो संक्षिप्त नाम लिख रहे हैं उसे सीएसएस ऑब्जेक्ट शाब्दिक के रूप में विस्तारित किया जाना चाहिए। |m10+p5 जैसा कुछ

वह तो कमाल है! स्निपेट्स के लिए, यह आपके द्वारा उपयोग किए जा रहे सीएसएस-इन-जेएस पर निर्भर करता है (और यहां तक ​​​​कि आपने इसे कैसे कॉन्फ़िगर किया है)। इस मुद्दे का मूल उदाहरण एक अच्छा उदाहरण है (मैंने margin में बदलाव किया है):

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

आप ऐसा कुछ भी कर सकते हैं और वही परिणाम प्राप्त कर सकते हैं (कम से कम जेएसएस में):

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

चूंकि सीएसएस-इन-जेएस के कई स्वाद हैं, मुझे लगता है कि सबसे सुरक्षित डिफ़ॉल्ट पहले उदाहरण के रूप में उद्धरणों के भीतर मूल्यों का उपयोग करना होगा।

वीएस कोड में इसे आजमाने का कोई मौका?

मैं सभी एम्मेट सुविधाओं का समर्थन करने के लिए निकट भविष्य में VSCode एक्सटेंशन को फिर से लिखने की योजना बना रहा हूं

тправлено с iPhone

2 मई 2020 मई, 15:25 को, थॉमस नोटिफिकेशन @github.com написал(а):

राय
वीएस कोड में इसे आजमाने का कोई मौका?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या सदस्यता समाप्त करें।

नमस्ते
ऊपर की बातचीत के आधार पर, ऐसा लगता है कि एम्मेट के पास .js फाइलों के भीतर सीएसएस ऑब्जेक्ट सिंटैक्स के लिए समर्थन है लेकिन यह अभी तक वीएस कोड में समर्थित नहीं है।

क्या यह सटीक है? ️

मैंने Google की खोज की लेकिन मुझे सीधा जवाब नहीं मिला।
@sergeche इस सुविधा पर आपके काम के लिए बहुत बहुत धन्यवाद!

हाँ, नया एम्मेट संस्करण (पहले से ही VSCode में) पहले से ही JSON गुणों के रूप में आउटपुट का समर्थन करता है। इसे प्लगइन से ही अतिरिक्त समर्थन की आवश्यकता है

अरे यह तो कमाल है! मुझे अभी तक समझ नहीं आया कि इसे कैसे काम करना है।

इसे प्लगइन से ही अतिरिक्त समर्थन की आवश्यकता है

️ क्या आप इस पर थोड़ा विस्तार कर सकते हैं या मुझे सही दिशा में इंगित कर सकते हैं? क्या इसे काम करने के तरीके पर कहीं दस्तावेज़ हैं?
एक बार फिर धन्यवाद!

emmet.includeLanguages को "javascript": "css" पर सेट करने से मुझे मानक CSS (ऑब्जेक्ट सिंटैक्स नहीं) मिलता है।
इसे "javascript": "javascriptreact" पर सेट करने से CSS को JSX में बदलने का प्रयास किया जाता है।

क्या सीएसएस ऑब्जेक्ट सिंटैक्स प्राप्त करने के लिए मुझे एक और सेटिंग का उपयोग करना चाहिए? मुझे कहीं भी संभावित विकल्पों की सूची नहीं मिल रही है। यहां आप मेरा 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

सुनिश्चित नहीं है कि VSCode प्लगइन में एम्मेट विकल्प कैसे सेट करें (मैं अनुरक्षक नहीं हूं)

मुझे लगता है कि आप सही @sergeche हैं, क्या आपको VSCode में कॉन्फिगरेशन जोड़ने का तरीका मिल गया है?

@josegutierro ने अभी तक कोशिश नहीं की। मुझे लगता है कि यह VSCode प्लगइन में सिर्फ एक विकल्प नहीं है, इसे काम करने के लिए प्लगइन द्वारा ठीक से समर्थित होना चाहिए।

धन्यवाद @sergeche उस समय के लिए जब मैं इस एक्सटेंशन का उपयोग कर रहा हूँ NativeEmmet । वास्तव में एम्मेट नहीं है लेकिन टैब पूर्ण होने के साथ बहुत सारे स्निपेट हैं। ये है पूरी लिस्ट