Renomeação Automática de Tags de Fechamento ao Mudar Tags de Abertura no VS Code
Resumo Rápido
Para ativar a sincronização automática de tags no Visual Studio Code, você deve instalar a extensão Auto Rename Tag. Uma vez instalada, qualquer alteração em uma tag HTML ou XML será imediatamente aplicada à sua tag de fechamento correspondente.
Exemplo de Uso:
// Primeiro a tag <div>
<div>Tom Cruise</div>
// Depois a tag muda para <section>,
// e a tag de fechamento muda de acordo
<section>Tom Cruise</section>A extensão instalada funciona automaticamente, não exigindo configurações adicionais.
Habilitando a Sincronização Interna de Tags
O recurso "Edição Vinculada", presente no VSCode 1.44, oferece capacidades semelhantes. Quando ativado, as alterações em uma tag são instantaneamente refletidas na sua tag pareada.
Para habilitar esse recurso, procure por "editor.linkedEditing" nas configurações e ative essa opção. Tente editar uma tag e veja o resultado em tempo real!
Outros Métodos
Desenvolvedores que preferem não instalar extensões adicionais podem usar o recurso "Renomear Símbolo" para renomear tags pareadas simultaneamente usando o atalho de teclado <kbd>F2</kbd>. Este método é especialmente útil para fazer correções rápidas em HTML e JSX.
No ecossistema IntelliJ, o recurso IntelliJ Keybindings permite o atalho convencional <code>SHIFT + F6</code> para renomear tags.
Visualização
Podemos pensar nas tags HTML como um casal dançando:
Dançarino A (tag de abertura): <div>
Dançarino B (tag de fechamento): </div>No VS Code, quando um comando é enviado a um dançarino para mudar de posição...
<div> transforma-se em <section>...o parceiro imediatamente se ajusta ao novo movimento:
👯♂️: <section> ... </section>
// Eles continuam a dançar em sincronia!Soluções para Diferentes Situações
Mudando Múltiplas Tags Simultaneamente
O recurso de múltiplos cursores (<kbd>Ctrl</kbd> + <kbd>D</kbd>) permite que você selecione e mude simultaneamente todas as instâncias de uma tag — perfeito para trabalhar com código HTML denso.
Apoio a Estruturas Complexas
A extensão Auto Rename Tag será uma ferramenta inestimável ao editar estruturas HTML aninhadas, prevenindo erros de edição manual e garantindo alta precisão.
Integração de Métodos
Incorpore esses métodos em sua prática diária para focar mais nos aspectos criativos do desenvolvimento, minimizando o tempo gasto em edições de tags.
Dicas para Melhorar a Edição de Tags
- Mantenha o VSCode e as extensões instaladas atualizados para acessar novos recursos.
- Pratique usando diferentes métodos de edição para encontrar os mais eficientes para o seu fluxo de trabalho.
- Explore a página da extensão para descobrir configurações ou atalhos de teclado adicionais.
- Lembre-se de que alguns recursos podem variar dependendo dos tipos de arquivo e sistemas operacionais.
Recursos Úteis
- Auto Rename Tag - Visual Studio Marketplace — uma extensão essencial do VSCode para renomear automaticamente tags HTML/XML pareadas.
- Emmet no Visual Studio Code — uma descrição detalhada do Emmet, uma ferramenta que reduz o tempo gasto escrevendo código HTML/CSS no VSCode.
- API de Extensões | API de Extensões do Visual Studio Code — um guia para criar suas próprias extensões para o Visual Studio Code.
- Programando com HTML no Visual Studio Code — o guia oficial para trabalhar com HTML no VSCode.
- IntelliSense no Visual Studio Code — uma visão geral do IntelliSense, a ferramenta de auto-completar código no VSCode.
- Snippets no Visual Studio Code — um guia para criar trechos personalizados para acelerar seu processo de desenvolvimento no VSCode.