{{ layer.title }}
{{ layer.text }}
{{ layer.command }}
Extensão VS Code · HTML + Angular
Crie interfaces acessíveis sem sair do VS Code
Semmet ajuda você a começar interfaces com uma base acessível. Insira padrões HTML, gere componentes Angular e prepare recursos do projeto diretamente pelo editor. O resultado é código local e editável, pronto para receber o visual e as regras de negócio da sua aplicação.
Visão geral
Use o Semmet para acelerar o início de uma interface sem abrir mão do controle sobre o
resultado. Em um arquivo
.html, você pode inserir padrões como accordion, abas, diálogo, combobox e tabela. Em um
projeto Angular, você pode gerar componentes e estruturas prontas para personalização. Os
arquivos
.ts,
.html
e
.css
gerados passam a pertencer à aplicação.
Uma base acessível para você evoluir.Personalize conteúdo, layout, cores, tipografia e comportamento de acordo com o seu
produto. A extensão não impõe tema nem identidade visual.
O que você pode fazer
Comece pela tarefa que deseja realizar. Cada fluxo guia as escolhas necessárias e mostra o que será criado antes da confirmação.
@for (layer of architectureLayers; track layer.title) {
}
Qual fluxo usar?
O Semmet oferece caminhos diferentes para HTML e Angular. Use esta comparação para chegar ao recurso certo para a tarefa que deseja realizar.
Quero...
Onde começar
Resultado
@for (row of comparisonRows; track row.scenario) {
{{ row.scenario }}
{{ row.traditional }}
{{ row.semmet }}
}
Para explorar os recursos disponíveis, abra a Paleta de Comandos e digite Semmet. O VS Code exibirá os quatro comandos da extensão.
Instalação
Baixe o arquivo da versão atual. No VS Code, abra a tela de extensões, selecione Instalar por VSIX... no menu de ações e escolha o arquivo baixado. Quando a extensão estiver instalada, abra a Paleta de Comandos e digite Semmet.
Primeiros passos
Abra a Paleta de Comandos, digite Semmet e escolha o que deseja criar. Para um componente Angular, selecione Generate Angular Component, escolha o padrão, informe o nome e revise os arquivos antes de confirmar.
1. Escolha o recurso
Selecione um componente acessível, componente financeiro ou bloco de composição.
2. Informe o nome
Use um nome relacionado à função do componente, como save-button.
3. Revise e confirme
Confira a lista de arquivos e confirme a geração quando estiver de acordo.
Antes de gerar código Angular
Abra a pasta raiz do projeto Angular e confirme que ela contém angular.json.
O VS Code também precisa considerar o projeto confiável. A extensão não instala
dependências automaticamente; quando um recurso exigir um pacote adicional, ela informa o
próximo passo.
Testes de ponta a ponta
O recurso e2e prepara os arquivos e orienta a instalação manual das
dependências do Playwright.
Arquivos existentes
A extensão não substitui arquivos sem avisar. Quando existe um conflito, você decide se deseja cancelar ou continuar.
Projeto confiável
A geração Angular fica disponível somente quando o projeto está marcado como confiável no VS Code.
Revise as alterações antes de confirmar
Alguns recursos precisam atualizar arquivos como rotas ou configurações da aplicação. A extensão informa quais arquivos serão afetados e permite comparar o conteúdo atual com a proposta antes de gravar.
Rotas
Ao criar uma funcionalidade, você pode optar por registrar sua rota automaticamente.
Interceptadores HTTP
Ao gerar um interceptor, você pode optar por registrá-lo na configuração da aplicação.
Você dá a palavra final
Revise a comparação, volte ao projeto se precisar e confirme somente quando estiver de acordo com as mudanças.
Referência de comandos
A extensão oferece quatro comandos principais. A referência abaixo resume quando usar cada um e quais recursos estão disponíveis para projetos Angular.
@for (group of commandGroups; track group.title) {
}
{{ group.title }}
@for (item of group.items; track item[0]) {
}
{{ item[0] }}{{ item[1] }}
{{ item[2] }}
Perguntas frequentes
@for (item of faqItems; track item.question) {
}
{{ item.answer }}