Come posso racchiudere una selezione con un tag HTML in Visual Studio?


110

Questa sembra la domanda più elementare del mondo, ma dannazione se riesco a trovare una risposta.

È disponibile una scorciatoia da tastiera, nativa di Visual Studio o tramite Code Rush o altri plug-in di terze parti, per racchiudere la selezione corrente con un tag HTML? Sono stanco di digitare il tag di apertura, tagliare il tag di chiusura fuori posto negli appunti, spostare il cursore e incollarlo alla fine a cui appartiene.

Aggiornamento: questo è il modo in cui TextMate gestisce una selezione con un tag . Francamente, sono sbalordito dal fatto che Visual Studio non sembri avere una funzionalità simile. Creare una macro o uno snippet per ogni tag immaginabile che potrei voler usare sembra assurdo.


È possibile scrivere la macro in modo tale da richiedere il tag con cui avvolgere la selezione. Posso estrarre la mia macro se lo desideri?
Ian Jacobs

Qualcuno ha già trovato un modo per farlo?
SamWM

Risposte:


132

Visual Studio 2015 include una nuova scorciatoia, Maiusc + Alt + W, che racchiude la selezione corrente con un div. Questa scorciatoia lascia il testo "div" selezionato, rendendolo facilmente modificabile in qualsiasi tag desiderato. Questo, insieme alla sostituzione automatica dell'etichetta finale, rappresenta una soluzione rapida.

AGGIORNARE

Questo collegamento è disponibile anche in Visual Studio 2017, ma è necessario che sia installato il carico di lavoro "ASP.NET e sviluppo Web".

Esempio

Shift+Alt+W > p > Enter

Ancora applicabile in VS2017.
Zze

non funziona per me in VS 2017. Penso che funzioni solo se hai elementi essenziali per il web.
RayLoveless

1
@RayLoveless ctrl-k ctrl-s funziona per me circondare con uno snippet. Tuttavia, la tua scelta deve provenire dall'elenco degli snippet (senza div) e gli snippet forniscono campi aggiuntivi da modificare che interrompono il flusso di lavoro descritto sopra. Si potrebbe discutere per snippet personalizzati, ma preferisco soluzioni fuori dagli schemi!
D-Jones

1
@ WildJoe che tipo di file hai aperto? se si tratta di un file xml o xaml per caso, non sono sicuro che funzionerà, poiché credo che funzioni solo per gli editor HTML.
D-Jones

1
@WildJoe Vedi qui stackoverflow.com/a/34799783/1647159 e qui stackoverflow.com/a/22274313/1647159 Attenzione, si potrebbe finire con un'esperienza degradato
D-Jones

65

So che questo è vecchio e probabilmente hai già trovato la risposta, ma vorrei solo aggiungere per il bene di coloro che potrebbero non saperlo che questo è possibile in VS 2010:

  1. Seleziona il codice che desideri racchiudere.
  2. Fai ctrl-k ctrl-s(o fai clic con il pulsante destro del mouse e seleziona Surround with....
  3. È disponibile una varietà di snippet HTML tra cui scegliere.

Puoi creare i tuoi SurroundsWith snippet se non trovi quello che stai cercando:

  1. Fare Fileclic su New, quindi su e scegliere un tipo di file di XML.
  2. Nel Filemenu, fare clic su Save.
  3. Nella Save ascasella selezionare All Files (*.*).
  4. Nella File namecasella immettere un nome file con l' .snippetestensione del nome file.
  5. Fare clic su Save.

Immettere qualcosa di simile al seguente esempio nel file 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. Apri Tools> Code Snippets Manager.
  2. Fare clic Importe passare allo snippet appena creato.
  3. Controlla My HTML Snippetse clicca Finishe poi OK.

Avrai quindi il tuo nuovo scintillante snippet HTML disponibile per il confezionamento!


2
Quando dici "Fai clic su File XML e quindi su Apri". Cosa intendi? fare clic su quale file xml?
Utente

È un ottimo suggerimento! Conosci il contrario? Come puoi rimuovere i tag circostanti?
Trio Cheung

@User ... Lo sto riparando ora. Non dovrebbe dire "Fare clic su File XML ...", ma solo "Fare clic su File ...".
Watki02

3
funziona ma non è esattamente una scorciatoia, più una scorciatoia
Pixelomo

@AlanSutherland La prima volta che l'hai impostato, sì. Una volta impostato, è una semplice questione di ctrl-k ctrl-s e selezionare il modello.
Bradley Mountford


42

Se hai installato Web Essentials , puoi usare Maiusc + Alt + W per racchiudere una selezione con un tag.


6
La cosa grandiosa da menzionare è che hai solo bisogno del tag evidenziato, o anche solo di avere il cursore all'interno del tag. Non è necessario selezionare il testo in modo esplicito.
Alex KeySmith

8

So che questo è un thread antico, ma dopo aver affrontato il problema sono finalmente riuscito a crearne uno mio e poiché questo è uno dei primi risultati in Google, ho pensato che le persone potrebbero trovarlo utile.

In realtà è stato abbastanza facile, ho semplicemente copiato da uno snippet HTML esistente e ho spostato i letterali. Il frammento di codice seguente verrà circondato da un tag HTML generico, richiede il tag e lo inserirà sia nei tag di apertura che in quelli di chiusura.

<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

Quando mi trovo di fronte a questa situazione, spesso digito prima il tag di chiusura, quindi il tag di apertura. Ciò impedisce all'IDE di "aiutare" inserendo il tag di chiusura dove non lo voglio. Mi interessa anche una soluzione migliore, però.


3
+1. Veramente sorprendente quanto sia complicato per una funzione così semplice.
John Hargrove

Quasi 8 anni dopo uso ancora lo stesso
Jack

7

Per coloro che utilizzano Visual Studio 2017: fare clic con il pulsante destro del mouse su un'area html/ cshtmlo selezionare alcuni elementi da avvolgere, Wrap With <div>nell'elenco è presente un pulsante. inserisci qui la descrizione dell'immagine


1
Questo è un duplicato della risposta attualmente scelta (utilizzando shift+alt+w).
Zze

Cosa dovrei fare allora? A proposito, Visual Studio 2015 non aveva tale elemento dell'interfaccia utente come ho mostrato nella mia risposta mentre stavo scrivendo, volevo solo mostrare che esiste un elemento dell'interfaccia utente per fare la stessa cosa tramite clic del mouse in Visual Studio 2017.
Burak Karakuş

2

Niente di cui sono a conoscenza, ma scrivere una macro per racchiuderla in qualsiasi tag tu voglia non dovrebbe essere difficile. Ne ho uno simile che avvolgerà la mia selezione in un blocco di regione.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.