Comment encapsuler une sélection avec une balise HTML dans Visual Studio?

110

Cela semble être la question la plus fondamentale au monde, mais maudit si je peux trouver une réponse.

Existe-t-il un raccourci clavier, natif de Visual Studio ou via Code Rush ou un autre plug-in tiers, pour envelopper la sélection actuelle avec une balise HTML? Je suis fatigué de taper la balise d'ouverture, de couper la balise de fermeture mal placée dans le presse-papiers, de déplacer le curseur et de la coller à la fin où elle appartient.

Mise à jour: c'est ainsi que TextMate gère l'entourage d'une sélection avec une balise . Franchement, je suis stupéfait que Visual Studio ne semble pas avoir une fonctionnalité similaire. Créer une macro ou un extrait pour chaque balise imaginable que je pourrais vouloir utiliser semble absurde.

dansays
la source
Vous pouvez écrire la macro de telle manière qu'elle vous invite à indiquer la balise avec laquelle envelopper la sélection. Je peux extraire ma macro si vous le souhaitez?
Ian Jacobs
Quelqu'un a-t-il encore trouvé un moyen de le faire?
SamWM

Réponses:

132

Visual Studio 2015 est livré avec un nouveau raccourci, Maj + Alt + W, qui encapsule la sélection actuelle avec un div. Ce raccourci laisse le texte "div" sélectionné, ce qui le rend parfaitement modifiable en n'importe quelle balise souhaitée. Ceci, associé au remplacement automatique des étiquettes d'extrémité, constitue une solution rapide.

METTRE À JOUR

Ce raccourci est également disponible dans Visual Studio 2017, mais la charge de travail «ASP.NET et développement Web» doit être installée.

Exemple

Shift+Alt+W > p > Enter
D-Jones
la source
Toujours applicable dans VS2017.
Zze du
ne fonctionne pas pour moi dans VS 2017. Je pense que cela ne fonctionne que si vous avez l'essentiel du Web.
RayLoveless
1
@RayLoveless ctrl-k ctrl-s fonctionne pour moi pour entourer d'un extrait de code. Cependant, votre choix doit provenir de la liste d'extraits (pas de div), et les extraits fournissent des champs supplémentaires à modifier qui interrompent le flux de travail détaillé ci-dessus. On pourrait plaider pour des extraits personnalisés, mais je préfère des solutions prêtes à l'emploi!
D-Jones
1
@WildJoe quel type de fichier avez-vous ouvert? si c'est un fichier xml ou xaml par hasard, je ne suis pas sûr que cela fonctionnera, car je pense que cela ne fonctionne que pour les éditeurs HTML.
D-Jones
1
@WildJoe voir ici stackoverflow.com/a/34799783/1647159 et ici stackoverflow.com/a/22274313/1647159 Attention, vous pourriez vous retrouver avec une expérience dégradée
D-Jones
65

Je sais que c'est vieux et vous avez probablement trouvé la réponse maintenant, mais je voudrais juste ajouter pour ceux qui ne le savent peut-être pas que c'est possible dans VS 2010:

  1. Sélectionnez le code que vous souhaitez entourer.
  2. Faites ctrl-k ctrl-s(ou cliquez avec le bouton droit de la souris et sélectionnez Surround with....
  3. Il existe une variété d'extraits de code HTML parmi lesquels choisir.

Vous pouvez créer vos propres SurroundsWith snippets si vous ne trouvez pas ce que vous cherchez:

  1. Cliquez Filepuis cliquez sur New, et choisissez un type de fichier de XML.
  2. Dans le Filemenu, cliquez sur Save.
  3. Dans la Save asboîte, sélectionnez All Files (*.*).
  4. Dans la zone File name, entrez un nom de fichier avec l' .snippetextension de nom de fichier.
  5. Cliquez sur Save.

Entrez quelque chose comme l'exemple suivant dans le fichier 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. Ouvrir Tools> Code Snippets Manager.
  2. Cliquez Importet accédez à l'extrait que vous venez de créer.
  3. Vérifiez My HTML Snippetset cliquez sur Finishet puis OK.

Vous aurez alors votre nouvel extrait de code HTML disponible pour envelopper des choses!

Bradley Mountford
la source
2
Lorsque vous dites «Cliquez sur fichier XML, puis sur Ouvrir». Que voulez-vous dire? cliquez sur quel fichier xml?
Utilisateur
C'est un bon conseil! Connaissez-vous l'inverse? Comment supprimer les balises environnantes?
Trio Cheung
@User ... Je suis en train de le réparer maintenant. Il ne doit pas dire "Cliquez sur fichier XML ...", mais simplement "Cliquez sur Fichier ...".
Watki02
3
cela fonctionne mais ce n'est pas exactement un raccourci, plus un raccourci
Pixelomo
@AlanSutherland La première fois que vous l'avez configuré, oui. Une fois qu'il est configuré, il s'agit simplement de ctrl-k ctrl-s et de sélectionner un modèle.
Bradley Mountford
42

Si Web Essentials est installé, vous pouvez utiliser Maj + Alt + W pour entourer une sélection d'une balise.

zhech
la source
6
La bonne chose à mentionner à ce sujet est que vous avez juste besoin de la balise en surbrillance, ou même d'avoir simplement le curseur à l'intérieur de la balise. Pas besoin de sélectionner le texte explicitement.
Alex KeySmith
8

Je sais que c'est un fil ancien, mais après avoir rencontré le problème, j'ai finalement réussi à créer le mien et comme c'est l'un des premiers résultats de Google, j'ai pensé que les gens pourraient trouver cela utile.

En fait, c'était assez facile, je viens de copier un extrait de code HTML existant et de me déplacer dans les littéraux. L'extrait de code suivant sera entouré d'une balise HTML générique, il demande la balise et le placera dans les balises d'ouverture et de fermeture.

<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>
Chao
la source
7

Face à cette situation, je tape souvent d'abord la balise de fermeture, puis la balise d'ouverture. Cela empêche l'EDI "d'aider" en insérant la balise de fermeture là où je ne le veux pas. Mais je suis également intéressé par une meilleure solution.

Tvanfosson
la source
3
+1. Vraiment incroyable à quel point c'est compliqué pour une fonctionnalité aussi simple.
John Hargrove
Presque 8 ans plus tard, j'utilise toujours la même chose
Jack
7

Pour ceux qui utilisent Visual Studio 2017: Faites un clic droit sur une html/ cshtmlzone, ou sélectionnez certains éléments à encapsuler, il y a un Wrap With <div>bouton dans la liste. entrez la description de l'image ici

Burak Karakuş
la source
1
Ceci est un double de la réponse actuellement choisie (en utilisant shift+alt+w).
Zze du
Que dois-je faire alors? À propos, Visual Studio 2015 n'avait pas d'élément d'interface utilisateur comme je l'ai montré dans ma réponse lorsque j'écrivais, je voulais juste montrer qu'il existe un élément d'interface utilisateur pour faire la même chose via des clics de souris dans Visual Studio 2017.
Burak Karakuş
2

Rien que je sache, mais écrire une macro pour l'envelopper dans la balise que vous voulez ne devrait pas être difficile. J'en ai un similaire qui enveloppera ma sélection dans un bloc de région.

Ian Jacobs
la source