Início / computer / Perguntas / 1781315
Accepted
Simon Ferndriger
Asked: 2023-04-28 16:41:05 +0800 CST

Atalho do Visual Studio Code para agrupar o elemento html na tag do contêiner

  • 772

Quando você tem uma tag HTML e deseja envolvê-la em outra tag html, qual é a maneira mais rápida/fácil de fazer isso? Como isso acontece com bastante frequência, estou procurando uma maneira de otimizá-lo.

Atualmente, envolve as seguintes etapas:

  1. Criando a nova tag html logo antes da tag original
  2. Movendo a tag de fechamento (gerada automaticamente) no final da tag original
  3. Selecionando a tag original (pode exigir rolagem de página)
  4. Ajustar recuo na tag inserida
  5. (Finalmente pronto...

Estou procurando algo assim:

  1. Selecionando uma tag html (recolhida)
  2. Pressionando algum atalho (por exemplo, "CTRL + b" para <b>, "CTRL + d" para <div>") para envolvê-lo em uma tag específica
keyboard-shortcuts

1 respostas

  1. Best Answer

    Não sei se existe uma extensão que faça exatamente 2 etapas, mas aqui está uma maneira de fazer isso em 3:

    1. Selecione uma tag HTML, recolhida ou não - não importa.
    2. Pressione a tecla de atalho para editor.emmet.action.wrapWithAbbreviationo comando. Por padrão, ele não está definido, então você precisa configurá-lo.
    3. Digite a tag que envolverá o que você selecionou.

    Uma maneira de fazer isso em 2 etapas pode ser com a ajuda de trechos, talvez. Você pode criar vários snippets para tags diferentes, como:

    "Wrap with div": {
    "scope": "html",
    "prefix": "wrap",
    "body": "<div>$TM_SELECTED_TEXT</div>"
}

    E, em seguida, crie um monte de macros de teclas de atalho para primeiro selecionar a tag inteira (por exemplo editor.emmet.action.balanceOut) e, em seguida, chamar cada um de seus snippets chamados com editor.action.insertSnippete estes args: { "name": "Wrap with div" }. Veja, por exemplo, esta resposta para exemplos de definição de macros.

    • 1

relate perguntas