Como envolvo uma seleção com uma marca HTML no Visual Studio?

110

Esta parece ser a pergunta mais básica do mundo, mas maldição se posso encontrar uma resposta.

Existe um atalho de teclado, nativo do Visual Studio ou por meio do Code Rush ou outro plug-in de terceiros, para envolver a seleção atual com uma tag HTML? Estou cansado de digitar a tag de abertura, recortar a tag de fechamento perdida na área de transferência, mover o cursor e colá-la no final onde ela pertence.

Atualização: é assim que o TextMate trata em torno de uma seleção com uma tag . Francamente, estou surpreso que o Visual Studio não parece ter um recurso semelhante. Criar uma macro ou snippet para cada tag concebível que eu queira usar parece absurdo.

dansays
fonte
Você pode escrever a macro de forma que solicite a tag com a qual envolver a seleção. Posso desenterrar minha macro, se quiser?
Ian Jacobs,
Alguém encontrou uma maneira de fazer isso?
SamWM

Respostas:

132

O Visual Studio 2015 vem com um novo atalho, Shift + Alt + W, que envolve a seleção atual com um div. Este atalho deixa o texto "div" selecionado, tornando-o perfeitamente alterável para qualquer tag desejada. Isso, juntamente com a substituição automática da etiqueta final, é uma solução rápida.

ATUALIZAR

Esse atalho também está disponível no Visual Studio 2017, mas você deve ter a carga de trabalho "ASP.NET e desenvolvimento da Web" instalada.

Exemplo

Shift+Alt+W > p > Enter
D-Jones
fonte
Ainda aplicável no VS2017.
Zze
não funciona para mim no VS 2017. Acho que isso só funciona se você tiver fundamentos da web.
RayLoveless
1
@RayLoveless ctrl-k ctrl-s funciona para eu cercar com um snippet. No entanto, sua escolha deve vir da lista de trechos (sem div), e os trechos fornecem campos adicionais a serem editados que quebram o fluxo de trabalho detalhado acima. Alguém poderia argumentar sobre trechos personalizados, mas eu prefiro soluções fora da caixa!
D-Jones de
1
@WildJoe que tipo de arquivo você tem aberto? se for um arquivo xml ou xaml por acaso, não tenho certeza se isso funcionará, pois acredito que só funcione para editores de HTML.
D-Jones
1
@WildJoe veja aqui stackoverflow.com/a/34799783/1647159 e aqui stackoverflow.com/a/22274313/1647159 Aviso, você pode acabar com uma experiência degradada
D-Jones
65

Eu sei que isso é antigo e você provavelmente já encontrou a resposta agora, mas gostaria apenas de acrescentar, para o bem daqueles que talvez não saibam, que isso é possível no VS 2010:

  1. Selecione o código que você gostaria de envolver.
  2. Faça ctrl-k ctrl-s(ou clique com o botão direito e selecione Surround with....
  3. Há uma variedade de snippets de HTML para escolher.

Você pode criar seus próprios snippets SurroundsWith se não encontrar o que procura:

  1. Clique em Filee, em seguida New, clique em e escolha um tipo de arquivo de XML.
  2. No Filemenu, clique em Save.
  3. Na Save ascaixa, selecione All Files (*.*).
  4. Na File namecaixa, digite um nome de arquivo com a .snippetextensão de nome de arquivo.
  5. Clique Save.

Insira algo como o seguinte exemplo no arquivo 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. Clique Importe navegue até o snippet que você acabou de criar.
  3. Verifique My HTML Snippetse clique em Finishe depois OK.

Você terá então seu trecho HTML novinho em folha disponível para embrulhar as coisas!

Bradley Mountford
fonte
2
Quando você disser "Clique em Arquivo XML e clique em Abrir." O que você quer dizer? clique em qual arquivo xml?
Usuário
Essa é uma ótima dica! Você sabe o reverso? Como você pode remover as tags circundantes?
Trio Cheung de
@User ... Estou consertando agora. Ele não deve dizer "Clique em Arquivo XML ...", apenas "Clique em Arquivo ...".
Watki02
3
isso funciona, mas não é exatamente um atalho, é mais um atalho
Pixelomo
@AlanSutherland A primeira vez que você configurou, sim. Uma vez configurado, é uma simples questão de ctrl-k ctrl-s e selecionar o modelo.
Bradley Mountford
42

Se você tiver o Web Essentials instalado, poderá usar Shift + Alt + W para circundar uma seleção com uma etiqueta.

Zhech
fonte
6
O bom de se falar sobre isso, é que você só precisa da tag em destaque, ou mesmo apenas ter o cursor dentro da tag. Não há necessidade de selecionar o texto explicitamente.
Alex KeySmith
8

Eu sei que este é um tópico antigo, mas tendo me deparado com o problema, finalmente resolvi fazer o meu próprio e, como este é um dos primeiros resultados do Google, imaginei que as pessoas poderiam achar isso útil.

Na verdade, foi muito fácil, eu apenas copiei de um snippet HTML existente e movi os literais. O trecho a seguir será circundado por uma tag HTML genérica, solicitará a tag e a colocará nas tags de abertura e fechamento.

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

Quando me deparo com essa situação, geralmente digito a tag de fechamento primeiro, depois a tag de abertura. Isso evita que o IDE "ajude" inserindo a tag de fechamento onde eu não quero. No entanto, também estou interessado em uma solução melhor.

Tvanfosson
fonte
3
+1. É realmente incrível como isso é complicado para um recurso tão simples.
John Hargrove
Quase 8 anos depois, ainda uso o mesmo
Jack
7

Para quem usa o Visual Studio 2017: Clique com o botão direito em uma área html/ cshtmlou selecione alguns elementos para quebrar, há um Wrap With <div>botão na lista. insira a descrição da imagem aqui

Burak Karakuş
fonte
1
Esta é uma duplicata da resposta atualmente escolhida (usando shift+alt+w).
Zze
O que devo fazer então? A propósito, o Visual Studio 2015 não tinha esse elemento de IU, conforme mostrei em minha resposta quando estava escrevendo. Eu só queria mostrar que há um elemento de IU que faz a mesma coisa por meio de cliques do mouse no Visual Studio 2017.
Burak Karakuş
2

Nada que eu saiba, mas escrever uma macro para envolvê-la em qualquer tag que você quiser não deve ser difícil. Eu tenho um semelhante que envolverá minha seleção em um bloco de região.

Ian Jacobs
fonte