मैं विज़ुअल स्टूडियो में HTML टैग के साथ चयन कैसे लपेटता हूं?


110

यह दुनिया का सबसे बुनियादी सवाल लगता है, लेकिन अगर मुझे इसका जवाब मिल जाए तो बहुत नुकसान होगा।

क्या HTML शॉर्टकट के साथ वर्तमान चयन को लपेटने के लिए विज़ुअल स्टूडियो या कोड रश या अन्य तृतीय-पक्ष प्लग-इन के माध्यम से कीबोर्ड शॉर्टकट है? मैं शुरुआती टैग टाइप करने, क्लिपबोर्ड पर गलत क्लोजिंग टैग को काटने, कर्सर को हिलाने, और अंत में इसे पेस्ट करने से थक गया हूं।

अद्यतन: यह है कि TextMate एक टैग के साथ चयन के आसपास कैसे संभालता है । सच कहूँ तो, मैं स्तब्ध हूँ कि विज़ुअल स्टूडियो में एक जैसी सुविधा नहीं है। प्रत्येक बोधगम्य टैग के लिए एक मैक्रो या स्निपेट बनाना जो मैं उपयोग करना चाहता हूं वह बेतुका लगता है।


आप मैक्रो को इस तरह से लिख सकते हैं कि यह टैग को चयन के साथ लपेटने के लिए संकेत देगा। अगर आप चाहें तो मैं अपना मैक्रो खोद सकता हूं?
इयान जैकब्स

किसी को भी अभी तक यह करने के लिए एक रास्ता मिल गया?
सैमडब्ल्यूएम

जवाबों:


132

विजुअल स्टूडियो 2015 एक नया शॉर्टकट, Shift + Alt + W के साथ आता है, जो वर्तमान चयन को div के साथ लपेटता है। यह शॉर्टकट चयनित पाठ "div" को छोड़ देता है, जो इसे किसी भी वांछित टैग के लिए मूल रूप से बदल देता है। यह स्वत: समाप्ति टैग प्रतिस्थापन के साथ युग्मित एक त्वरित समाधान के लिए बनाता है।

अपडेट करें

यह शॉर्टकट विजुअल स्टूडियो 2017 में भी उपलब्ध है, लेकिन आपके पास "ASP.NET और वेब डेवलपमेंट" वर्कलोड अवश्य होना चाहिए।

उदाहरण

Shift+Alt+W > p > Enter

अभी भी VS2017 में लागू है।
ज़ूल

मेरे लिए वीएस 2017 में काम नहीं करता है। मुझे लगता है कि यह केवल तभी काम करता है जब आपके पास वेब आवश्यक हो।
रेवलवेसी

1
@RayLoveless ctrl-k ctrl-s एक स्निपेट के साथ घेरने के लिए मेरे लिए काम करता है। हालाँकि आपकी पसंद स्निपेट सूची (कोई div) से नहीं होनी चाहिए, और स्निपेट्स अतिरिक्त फ़ील्ड्स को संपादित करने के लिए आपूर्ति करते हैं जो ऊपर दिए गए वर्कफ़्लो को तोड़ते हैं। कोई कस्टम स्निपेट के लिए तर्क दे सकता है लेकिन मैं बॉक्स समाधान से बाहर रहना पसंद करता हूं!
डी-जोन्स

1
@WildJoe आपके पास किस तरह की फाइल है? अगर यह संयोग से एक xml या xaml फ़ाइल है, तो मुझे यकीन नहीं है कि यह काम करेगा, क्योंकि मेरा मानना ​​है कि यह केवल HTML संपादकों के लिए काम करता है।
D-जोन्स

1
@WildJoe यहां देखें stackoverflow.com/a/34799783/1647159 और यहां stackoverflow.com/a/22274313/1647159 चेतावनी, आप एक अपमानित अनुभव के साथ समाप्त हो सकता है
डी-जोन्स

65

मुझे पता है कि यह पुराना है और आपको शायद अब तक इसका जवाब मिल गया है, लेकिन मैं केवल उन लोगों के लिए जोड़ना चाहूंगा जो यह नहीं जानते हैं कि यह वीएस 2010 में संभव है:

  1. उस कोड को चुनें जिसे आप घेरना चाहते हैं।
  2. करें ctrl-k ctrl-sया राइट-क्लिक करें और चुनें Surround with...
  3. वहाँ से चुनने के लिए HTML स्निपेट की एक किस्म है।

आप अपने खुद के आसपास बना सकते हैं स्निपेट यदि आपको वह नहीं मिल रहा है जो आप ढूंढ रहे हैं:

  1. क्लिक करें Fileऔर फिर क्लिक करें New, और एक फ़ाइल प्रकार चुनें XML
  2. पर Fileमेनू, क्लिक करें Save
  3. में Save asबॉक्स, चयन All Files (*.*)
  4. में File nameबॉक्स, के साथ एक फ़ाइल नाम दर्ज .snippetफ़ाइल नाम एक्सटेंशन।
  5. क्लिक करें Save

XML फ़ाइल में निम्न नमूने जैसा कुछ दर्ज करें:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>ul-div</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>ul>li</Shortcut>
    <Description>Wrap in a ul and then an li</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<ul><li>$selected$</li></ul>$end$]]></Code>
  </Snippet>
</CodeSnippet>
  1. ओपन Tools> Code Snippets Manager
  2. Importआपके द्वारा बनाए गए स्निपेट पर क्लिक करें और ब्राउज़ करें।
  3. जाँच करें My HTML Snippetsऔर क्लिक करें Finishऔर फिर OK

फिर आप अपने चमकदार नए HTML स्निपेट को सामान में लपेटने के लिए उपलब्ध होंगे!


2
जब आप कहते हैं "XML फ़ाइल पर क्लिक करें और फिर खोलें पर क्लिक करें।" आपका क्या अर्थ है? क्या xml फ़ाइल क्लिक करें?
यूजर

यह एक महान टिप है! क्या आप रिवर्स जानते हैं? आप आसपास के टैग कैसे हटा सकते हैं?
तिकड़ी चेउंग

@ उपयोगकर्ता ... मैं इसे अब ठीक कर रहा हूं। इसे "XML फ़ाइल पर क्लिक करें ..." नहीं कहना चाहिए, बस "फ़ाइल पर क्लिक करें ..."।
वाटकी ०२

3
यह काम करता है, लेकिन यह वास्तव में एक शॉर्टकट नहीं है, एक लंबे कट का
Pixelomo

@AlanSutherland पहली बार आपने इसे स्थापित किया है, हाँ। एक बार यह सेट हो जाए तो यह ctrl-k ctrl-s और सिलेक्ट टेम्पलेट का एक साधारण मामला है।
ब्रैडली माउंटफोर्ड


42

यदि आपके पास वेब अनिवार्य है, तो आप टैग के साथ चयन को घेरने के लिए Shift + Alt + W का उपयोग कर सकते हैं


6
इसके बारे में उल्लेख करने के लिए महान बात यह है कि आपको केवल टैग पर प्रकाश डाला गया है, या यहां तक ​​कि टैग के अंदर कर्सर होने की भी आवश्यकता है। स्पष्ट रूप से पाठ का चयन करने की आवश्यकता नहीं है।
एलेक्स कीस्मिथ

8

मुझे पता है कि यह एक प्राचीन सूत्र है, लेकिन इस मुद्दे के खिलाफ आने के बाद मैं आखिरकार अपना खुद का बनाने के लिए तैयार हो गया और जैसा कि Google में यह पहला परिणाम है मुझे लगा कि लोगों को यह उपयोगी लग सकता है।

वास्तव में यह बहुत आसान था, मैं सिर्फ एक मौजूदा HTML स्निपेट से कॉपी किया और शाब्दिक रूप से चारों ओर चला गया। निम्नलिखित स्निपेट एक सामान्य एचटीएमएल टैग के साथ घिरेगा, यह टैग के लिए संकेत देता है और इसे खोलने और बंद करने दोनों टैगों में डाल देगा।

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- Generic HTML Snippet -->
  <Header>
    <Title>Html</Title>
    <Author>Liam Slater</Author>
    <Shortcut>h</Shortcut>
    <Description>Markup snippet for HTML</Description>
    <SnippetTypes>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>tag</ID>
        <ToolTip>tag</ToolTip>
        <Default></Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<$tag$>$selected$</$tag$>$end$]]></Code>
  </Snippet>
</CodeSnippet>

7

जब इस स्थिति का सामना करना पड़ता है, तो मैं अक्सर समापन टैग पहले टाइप करता हूं, फिर उद्घाटन टैग। यह IDE को समापन टैग को सम्मिलित करके "मदद" करने से रोकता है जहां मैं यह नहीं चाहता। मुझे भी एक बेहतर समाधान में दिलचस्पी है, हालांकि।


3
+1। सच में आश्चर्यजनक है कि यह इतनी सरल सुविधा के लिए कितना जटिल है।
जॉन हरग्रोव

लगभग 8 साल बाद मैं अभी भी उसी का उपयोग कर रहा हूं
जैक

7

विज़ुअल स्टूडियो 2017 का उपयोग करने वालों के लिए: html/ cshtmlक्षेत्र पर राइट क्लिक करें , या लपेटने के लिए कुछ तत्वों का चयन करें, Wrap With <div>सूची पर एक बटन है। यहां छवि विवरण दर्ज करें


1
यह वर्तमान में चुने गए उत्तर (उपयोग करके shift+alt+w) का एक डुप्लिकेट है ।
Zze

तब मुझे क्या करना चाहिए? वैसे, विज़ुअल स्टूडियो 2015 में ऐसा कोई UI तत्व नहीं था जैसा कि मैंने अपने उत्तर में दिखाया था जब मैं लिख रहा था, मैं सिर्फ यह दिखाना चाहता था कि विज़ुअल स्टूडियो 2017 में माउस क्लिक के माध्यम से एक ही यूआई तत्व है।
बराक कराकुएस

2

मुझे कुछ भी पता नहीं है, लेकिन जो कुछ भी आप चाहते हैं उसे टैग करने के लिए एक मैक्रो लिखना मुश्किल नहीं होना चाहिए। मेरे पास एक समान है जो एक क्षेत्र ब्लॉक में मेरे चयन को लपेट देगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.