temas - ¿Cómo envuelvo una selección con una etiqueta HTML en Visual Studio?

visual studio code wrap tag

Question

Esta parece ser la pregunta más básica en el mundo, pero maldito si puedo encontrar una respuesta.

¿Hay un atajo de teclado, ya sea nativo de Visual Studio o mediante Code Rush u otro complemento de terceros, para ajustar la selección actual con una etiqueta HTML? Estoy cansado de escribir la etiqueta de apertura, cortar la etiqueta de cierre mal colocada en el portapapeles, mover el cursor y pegarlo en el extremo al que pertenece.

Actualización: así es como maneja TextMate rodeando una selección con una etiqueta . Francamente, estoy sorprendido de que Visual Studio no parezca tener una característica similar. Crear una macro o un fragmento para cada etiqueta concebible que pueda querer usar parece absurdo.

Answer 1

Ctrl-X -> Escriba etiquetas -> Ctrl-V sigue siendo la solución más rápida que he visto como se menciona en esta respuesta: https://.com/a/5109994/486325 .

Answer 2

Cuando me enfrento a esta situación, a menudo escribo la etiqueta de cierre primero, luego la etiqueta de apertura. Esto evita que el IDE "ayude" insertando la etiqueta de cierre donde yo no la quiero. Aunque también estoy interesado en una mejor solución.

Answer 3

Nada de lo que sea consciente, pero escribir una macro para envolverlo en cualquier etiqueta que quiera no debería ser difícil. Tengo uno similar que ajustará mi selección en un bloque regional.

Answer 4

Para aquellos que usan Visual Studio 2017: haga clic con el botón derecho en un área html / cshtml , o seleccione algunos elementos para ajustar, hay un botón cshtml Wrap With <div> en la lista.

Answer 5

Sé que este es un hilo antiguo, pero al enfrentarme al problema finalmente logré hacer el mío y, dado que este es uno de los primeros resultados en Google, pensé que las personas podrían encontrarlo útil.

En realidad, fue bastante fácil, simplemente copié de un fragmento de HTML existente y moví alrededor de los literales. El siguiente fragmento se rodeará con una etiqueta HTML genérica, pedirá la etiqueta y la colocará en las etiquetas de apertura y cierre.

<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>

Answer 6

Sé que esto es antiguo y probablemente ya hayas encontrado la respuesta, pero me gustaría agregar por el bien de aquellos que quizás no lo sepan, que esto es posible en VS 2010:

1. Seleccione el código que le gustaría rodear.
2. Haga ctrl-k ctrl-s (o haga clic derecho y seleccione Surround with...
3. Hay una variedad de fragmentos de HTML para elegir.

Puede crear sus propios fragmentos SurroundsWith si no encuentra lo que está buscando:

1. Haga clic en File y luego en New , y elija un tipo de archivo de XML .
2. En el menú File , Save clic en Save .
3. En el cuadro Save as , seleccione All Files (*.*) .
4. En el cuadro File name , ingrese un nombre de archivo con la extensión de nombre de archivo .snippet .
5. Haga clic en Save .

Ingrese algo así como el siguiente ejemplo en el archivo 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. Abra Tools > Code Snippets Manager .
2. Haga clic en Import y busque el fragmento que acaba de crear.
3. Verifique My HTML Snippets y haga clic en Finish y luego en OK .

¡Entonces tendrá su nuevo fragmento brillante de HTML disponible para envolver cosas!

Answer 7

Si tiene instalado Web Essentials , puede usar Mayús + Alt + W para rodear una selección con una etiqueta.

Answer 8

Visual Studio 2015 viene con un nuevo atajo, Shift + Alt + W ajusta la selección actual con un div. Este atajo deja el texto "div" seleccionado, por lo que se puede cambiar fácilmente a cualquier etiqueta deseada. Esto, junto con la sustitución automática de la etiqueta final, es una solución rápida.

ACTUALIZAR

Este acceso directo también está disponible en Visual Studio 2017, pero debe tener instalada la carga de trabajo "ASP.NET and Web Development".

Ejemplo

Shift+Alt+W > p > Enter