VS कोड में टैग रैपिंग कैसे करें?

Question

मैं वीएस कोड में एक टैग के भीतर अपने चयनित HTML को लपेटना चाहता हूं। मैं उसको कैसे करू?

Comments

एक कारण मैं पूरी तरह से VSCode और खाई उदात्त को स्थानांतरित करने में असमर्थ हूं।

— 17

@budji इसका एमिट के साथ फीचर में बनाया गया है ... बहुत कुछ भी आप चाहते हैं वह भी अब एक विस्तार हो सकता है और अगर यह नहीं है तो आप हमेशा अपना खुद का बना सकते हैं।

— जेम्स कोयल

मुझे यह सवाल पसंद है और मुझे पता है और कॉल (एंबेट रैप विद एब्ब्रेशन) को विस्तार दिया गया है, लेकिन किसी को पता होगा कि इनवॉइस क्रियाएं कैसे की जाती हैं। उदाहरण के लिए: पहले <p> ... </ p> लिखें और इस परिणाम के साथ <u> ** </ u> अंदर शामिल करें <p> ... <u> ** </ u> ... </ पी>

— जम्मोल

Answer 1

एंबेडेड एम्मेट कर सकता है ट्रिक:

1. पाठ का चयन करें (वैकल्पिक)
2. ओपन कमांड पैलेट (आमतौर पर Ctrl+ Shift+ P)
3. निष्पादित Emmet: Wrap with Abbreviation
4. एक टैग div(या एक संक्षिप्त नाम .wrapper>p) दर्ज करें
5. मारो Enter

कमांड एक कीबाइंडिंग को सौंपा जा सकता है।

---

यह बात भी गुजरती तर्कों का समर्थन करती है:

{
    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
        "abbreviation": "span"
    }
},

इसे इस तरह उपयोग करें:

• span.myCssClass
• span#myCssId
• b
• b.myCssClass

Comments

marketplace.visualstudio.com/…

— एलेक्स

यह उत्तर होना चाहिए, Emmet पहले से ही vscode

— Nathan

Ctrl+ pgoToFile है। कमांड पैलेट Ctrl+ Shift+ है P।

— एलेक्स

— JSX के

VSCode 1.35.0 (और संभवतः पहले) के साथ यह JSX के साथ बॉक्स का काम करता है - किसी भी अतिरिक्त विन्यास की आवश्यकता नहीं है

— davnicwil

Answer 2

VSCode बाज़ार पर एक त्वरित खोज: https://marketplace.visualstudio.com/items/bradgashler.htmltagprap ।

1. लॉन्च वी.एस. कोड क्विक ओपन ( Ctrl+ P)

2. पेस्ट करें ext install htmltagwrapऔर दर्ज करें

3. HTML का चयन करें

4. प्रेस Alt+ W( Option+ Wमैक के लिए)।

Comments

आप शायद मतलब चुनें 3. इंस्टाल स्टेप 3.

— समीर

"उपयोग करने के लिए, कोड का एक हिस्सा चुनें और" Alt + W "दबाएं (Mac के लिए" विकल्प + W ")।" काफी सरल! सिवाय इसके कि यह काम नहीं कर रहा है। मैंने वी.एस. कोड 1.16.1 के साथ संस्करण 0.0.3 की कोशिश की। यह लगभग काम करता है। यह <p></p>जेनेरिक के बजाय टैग्स में चयन को लपेटने की कोशिश करता है , <div></div>जो करने के लिए अधिक समझदार चीज प्रतीत होगी। क्या बुरा है कि यह विफल है। यह उत्पादन का उत्पादन करता है जैसे<p><p>My selected text.</p>

— समीर

मैंने जैसे अन्य एक्सटेंशन की कोशिश की। लेकिन अभी तक मुझे ऐसा कोई काम नहीं मिला है जो काम करता हो। यह एक काम करने वाले समाधान के सबसे करीब था। मैंने डेविड टेलर द्वारा 0.0.1 को लपेटने की कोशिश की, और Ctrl + i ने बिल्कुल भी काम नहीं किया।

— समीर

अद्यतन: विस्तार अब सही ढंग से काम करता है और उपरोक्त मुद्दों को संबोधित करता है। कोई और डुप्लिकेट टैग नहीं, और अब आप उस टैग को कस्टमाइज़ कर सकते हैं जिसे आप सेटिंग के माध्यम से सम्मिलित करना चाहते हैं। इसलिए यदि आप चाहते हैं कि टैग <div>आपके लिए निम्न सेटिंग जोड़ें, तो "htmltagwrap.tag": "div"।

— bgashler1

यह बहुत खराब कार्यान्वयन है - एकल टैग के लिए काम करता है, नोटपैड ++ html प्लगइन के समान कुछ होना अच्छा होगा जहां आप अपने विन्यास टैग से चयन द्वारा टैग लपेट सकते हैं

— साशा बॉन्ड

Answer 3

जैसा कि मैं टिप्पणी नहीं कर सकता, मैं एलेक्स के शानदार जवाब पर विस्तार करूंगा।

यदि आप चाहते हैं उदात्त की तरह रैपिंग के साथ अनुभव कीमैप एक्सटेंशन को खोलने (प्राथमिकताएं> कीमैप एक्सटेंशन [ Cmd+ K Cmd+ M]) और जोड़ने के निम्नलिखित वस्तु:

{
    "key": "alt+w",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
}

जो टेक्स्ट सेलेक्ट होने पर एम्मेट रैप कमांड Alt+ को बाइंड कर देगाW

(OSX केवल निर्देशों के लिए क्षमा करें)

Comments

इस तरह से मैंने शॉर्टकट जोड़ा है: प्राथमिकताएँ> कीम शॉर्टकट; ... फिर इमेट रैप सर्च करें; ... क्लिक करें + अपना शॉर्टकट जोड़ने के लिए ... :) :)

— Luckylooke

इसके अलावा मैंने केवल वेब पेजों के लिए काम करने के लिए && संसाधन

— LangId

@surpavan, अच्छा है, लेकिन यह अन्य फ़ाइल प्रकारों में भी काम किया जा सकता है जैसे html टेम्पलेट फाइलें

— एंड्रयू लुईस 3

@AndrewLewis - हाँ, यही कारण है कि मैंने इसे भाषा आईडी में रखा है और फाइल एक्सटेंशन (files.associations) पर नहीं।

— सर्पवन

विंडोज़ के लिए Shift + Alt + W मुफ्त है।

— टिमोफुस

Answer 4

1. टाइपिंग द्वारा ओपन कीबोर्ड शॉर्टकट ⌘ Command+ k ⌘ Command+ sयाCode > Preferences > Keyboard Shortcuts
2. प्रकार emmet wrap
3. "एम्मेट: रैप विद एबॉर्शन" के बाईं ओर प्लस साइन पर क्लिक करें
4. टाइप ⌥ Option+ करेंw
5. दबाएँ Enter

Answer 5

imo Snippets का उपयोग करते हुए इसके लिए एक बेहतर उत्तर है

इस तरह की परिभाषा के साथ एक स्निपेट बनाएं:

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

फिर इसे keybindings.json एग की एक कुंजी से इस तरह बांधें:

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

मुझे लगता है कि यह आपको HTMLtagwrap के बिल्कुल समान परिणाम देना चाहिए, लेकिन विस्तार स्थापित किए बिना।

यह चयनित पाठ के चारों ओर टैग सम्मिलित करेगा, <b>टैग में चूक और टैग का चयन करेगा ताकि टाइपिंग आपको इसे बदल सके।

यदि आप एक अलग डिफ़ॉल्ट टैग का उपयोग करना चाहते हैं तो स्निपेट bकी bodyसंपत्ति में बदलाव करें ।

Comments

यह ठीक है, लेकिन एम्मेट ऐसा कर सकता है और बहुत कुछ कर सकता है, जैसे कि नेस्टेड HTML, एट्रिब्यूट्स और लिस्ट बनाना। एमएमएस वीएस कोड के साथ बॉक्स से बाहर आता है।

— एंड्रयू लुईस

मुझे समझ में नहीं आता है। बेशक, एम्मेट अधिक जटिल है और मैं बहुत सारी चीजें कर सकता हूं लेकिन एक पाठ चयन को टैग के साथ लपेटने के लिए यह समाधान बहुत अच्छा है! जब आप लपेटते हैं, तो आपको अपनी आँखें अपनी स्क्रीन / खिड़की के ऊपरी हिस्से में ले जाने की ज़रूरत नहीं है। यह वहीं होता है, जहाँ आप पहले से थे क्योंकि आपने पाठ का चयन किया था! यह कम समय के साथ एक बहुत ही सामान्य उपयोग मामला और त्वरित समाधान है!

— आंद्रेई वी

मैं इससे बहुत उत्साहित था लेकिन मैं इसे काम नहीं कर पाया: /

— इकरो