Emmet: Integração do Emmet com Editor

Boas notícias: você já pode estar usando um editor que suporta Emmet — VSCode, WebStorm e Atom o têm habilitado por padrão, com zero configuração necessária.

1. O Que Você Vai Aprender

• Suporte ao Emmet no VSCode: habilitado por padrão, tipos de arquivo cobertos
• WebStorm / IntelliJ IDEA: status do suporte padrão
• Sublime Text e Atom: passos de instalação do plugin
• Atalhos personalizados: Tab vs. Ctrl+E — qual usar
• Suporte a tipos de arquivo Emmet por editor: .html .css .jsx .tsx .vue

2. A História Real de Um Desenvolvedor Front-End

(1) Ponto de Dor: Reaprender Emmet Toda Vez Que Troca de Editor

Bob é um desenvolvedor front-end que recentemente começou em um novo emprego. No primeiro dia, a equipe lhe deu um computador com WebStorm pré-instalado — não o VSCode que ele estava acostumado. Bob abriu o WebStorm, digitou div.box, pressionou Tab... e nada aconteceu. Ele presumiu que o WebStorm não suportava Emmet e foi perguntar ao gerente, que lhe disse: "O WebStorm tem isso habilitado por padrão. Você está pressionando a tecla certa?" Bob ficou confuso — acontece que editores diferentes têm teclas de acionamento Emmet diferentes. O VSCode usa Tab, o WebStorm também usa Tab, mas algumas versões mais antigas exigem Ctrl+Alt+Space. Ele então perguntou à colega Alice qual editor ela usava. Alice disse Sublime Text, "mas você precisa instalar o plugin Emmet primeiro e personalizar o atalho — Tab não funciona de imediato." Bob pensou: se eu trocar de editor, tenho que reconfigurar tudo do zero toda vez. Isso é uma barreira bem alta.

(2) Integração do Emmet com Editor: A Solução

A resposta do Emmet: praticamente todos os editores populares suportam Emmet nativamente ou via plugins, mas o método de acionamento, a cobertura de tipos de arquivo e os requisitos de configuração variam. Após completar esta aula, Bob fez uma folha de consulta e a fixou acima de sua mesa:

Com esta folha de consulta, Bob pode colocar o Emmet em execução em qualquer editor em 5 minutos.

(3) Benefícios

Conhecer o status de suporte do seu editor traz dois benefícios: primeiro, economiza tempo de configuração — sem mais tropeços na configuração toda vez que trocar de editor. Segundo, evita interferências — você saberá quais teclas o Emmet "possui", para não acionar acidentalmente a expansão onde não deseja. Após esta aula, você será capaz de colocar o Emmet em execução no editor de sua escolha em 5 minutos.

3. Visão Geral do Suporte a Editores

Um dos objetivos de design do Emmet é a independência de editor — a mesma abreviação ul>li*3 expande de forma idêntica no VSCode, WebStorm e Sublime. As únicas diferenças residem em como é integrado e como é acionado.

Dica: A sintaxe JSX/TSX difere ligeiramente do HTML padrão (class é escrito como className). Alguns editores precisam que a opção "Emmet in JSX" seja explicitamente habilitada para expansão correta.

4. Configuração Prática para Editores Populares

Abaixo percorremos a configuração do Emmet para os três editores mais usados: VSCode, WebStorm e Sublime Text.

(1) VSCode: Funciona de Imediato

O VSCode tem o suporte ao Emmet mais abrangente. As versões 1.0 e posteriores têm o Emmet habilitado por padrão — sem plugins necessários, basta pressionar Tab em arquivos HTML ou CSS para expandir.

▶ Exemplo: Verificar Emmet no VSCode (Dificuldade: ★)

Passo 1: Criar um novo arquivo HTML

# Pressione Ctrl+N no VSCode para criar um novo arquivo
# Salve como test.html (o VSCode detecta automaticamente a linguagem pela extensão)

Passo 2: Digitar uma abreviação Emmet

div.container>h1{Hello Emmet}+p.lead{Minha primeira expansão Emmet no VSCode}

Passo 3: Pressionar Tab para acionar

<div class="container">
  <h1>Hello Emmet</h1>
  <p class="lead">Minha primeira expansão Emmet no VSCode</p>
</div>

Saída:

Uma linha de abreviação instantaneamente expande para 4 linhas de HTML, com o cursor posicionado dentro do h1. A tecla Tab padrão do VSCode funciona para expansão Emmet com zero configuração.

Habilitando Emmet em arquivos JSX/TSX (opcional):

// Adicione ao settings.json (Ctrl+Shift+P → "Preferences: Open User Settings (JSON)")
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

(2) WebStorm / IntelliJ: Acionamento por Tab Padrão

Todos os IDEs JetBrains (IntelliJ IDEA, PyCharm, PhpStorm, etc.) vêm com Emmet integrado — sem instalação necessária. A tecla de acionamento também é Tab, mas há uma nuance: a tecla Tab do WebStorm pode primeiro tentar completar código; talvez seja necessário pressionar Tab várias vezes para acionar a expansão Emmet.

▶ Exemplo: Verificar Emmet no WebStorm (Dificuldade: ★)

Passo 1: Criar um novo arquivo HTML

# File → New → HTML File → nomeie como test.html

Passo 2: Digitar a abreviação e pressionar Tab

ul.nav>li*4>a[href="#"]{Menu $}

Passo 3: Resultado da expansão

<ul class="nav">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>

Saída:

Um menu de navegação com 4 itens de lista gerados instantaneamente. Se Tab não responder, pressione `Ctrl+Alt+Space` para forçar a expansão Emmet (atalho alternativo do WebStorm).

(3) Sublime Text: Plugin Necessário

O Sublime Text não inclui Emmet por padrão. Você precisa instalar o plugin Emmet via Package Control. Após a instalação, o atalho padrão é Ctrl+E (não Tab, pois Tab é reservado para indentação no Sublime).

▶ Exemplo: Instalar Emmet no Sublime Text (Dificuldade: ★★)

Passo 1: Instalar Package Control

# Se o Package Control ainda não estiver instalado:
# 1. Pressione Ctrl+` para abrir o console
# 2. Cole o código de instalação do Package Control (de https://packagecontrol.io/installation)
# 3. Reinicie o Sublime Text

Passo 2: Instalar o plugin Emmet

# 1. Pressione Ctrl+Shift+P para abrir a paleta de comandos
# 2. Digite "Package Control: Install Package" e pressione Enter
# 3. Pesquise por "Emmet" e pressione Enter para instalar
# 4. O plugin é habilitado automaticamente após a instalação

Passo 3: Usar Ctrl+E para acionar

<!-- Digite a abreviação -->
form>(input[type=email])+(input[type=password])+button{Login}
<!-- Pressione Ctrl+E (NÃO Tab) -->

Resultado da expansão:

<form>
  <input type="email">
  <input type="password">
  <button>Login</button>
</form>

Saída:

Acione com Ctrl+E para gerar 3 elementos de formulário instantaneamente. Para mudar para Tab como tecla de acionamento, veja o exemplo de atalho personalizado abaixo.

(4) Atalhos Personalizados: Tab vs. Ctrl+E

Muitos desenvolvedores preferem pressionar Tab para acionar o Emmet, mas editores como Sublime Text e Vim reservam Tab para outras funções. Esta seção mostra como estender o acionamento por Tab do VSCode para arquivos JSX — ou mudar para Ctrl+E.

▶ Exemplo: Personalizar Configuração do Emmet no VSCode (Dificuldade: ★★)

Cenário A: Habilitar acionamento por Tab para arquivos JSX/TSX

// settings.json
{
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "vue-html": "html",
    "razor": "html"
  }
}

Cenário B: Mudar acionamento Emmet para Ctrl+E (compatível com Sublime)

// keybindings.json (Ctrl+Shift+P → "Preferences: Open Keyboard Shortcuts (JSON)")
[
  {
    "key": "ctrl+e",
    "command": "editor.action.emmet.action.expandAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
  }
]

Cenário C: Desabilitar Emmet em tipos de arquivo específicos

// settings.json (para desabilitar Emmet em arquivos markdown)
{
  "emmet.excludeLanguages": ["markdown"]
}

Saída:

Com as configurações acima, você pode remapear a tecla de acionamento do Emmet para qualquer atalho que se adapte aos hábitos da sua equipe ou preferência pessoal, e controlar precisamente em quais tipos de arquivo o Emmet é ativado.

5. Regras de Habilitação Automática por Tipo de Arquivo

Cada editor suporta um conjunto ligeiramente diferente de tipos de arquivo para Emmet. A regra geral: HTML e CSS são totalmente habilitados por padrão; JSX/TSX está ativado por padrão no VSCode/WebStorm mas requer habilitação manual no Sublime; Vue, Svelte e outros precisam de configuração extra.

Dica: Se o Emmet não responder ao Tab em um tipo de arquivo específico, primeiro verifique as configurações de associação de tipo de arquivo do seu editor para confirmar se o Emmet está habilitado para aquela linguagem.

❓ Perguntas Frequentes

P: Tab não funciona no meu VSCode. O que configurei errado? R: Primeiro, certifique-se de que o arquivo foi salvo com extensão .html ou .css (o VSCode não trata arquivos sem extensão como HTML). Segundo, verifique se você tem plugins instalados que interceptam Tab (como versões antigas do Vetur) — tente desabilitá-los temporariamente. Por fim, verifique se emmet.triggerExpansionOnTab está definido como true.

P: No WebStorm, Tab sempre aciona o completamento de código primeiro, e tenho que pressionar Tab várias vezes. O que posso fazer? R: Isso é intencional no WebStorm — Tab prioriza o completamento de código. Duas soluções alternativas: 1) Após digitar a abreviação, aguarde o popup de completamento de código aparecer, pressione Esc para descartá-lo e então pressione Tab para acionar o Emmet. 2) Use Ctrl+Alt+Space para forçar a expansão Emmet.

P: Após instalar o plugin Emmet no Sublime Text, Tab ainda não funciona. Qual tecla devo usar? R: O acionador padrão do Emmet no Sublime Text é Ctrl+E, não Tab (Tab é reservado para indentação no Sublime). Para usar Tab, personalize o atalho — veja a seção 4(4) desta aula.

P: Em arquivos JSX, o Emmet expande class em vez de className. Como corrijo isso? R: Este é o comportamento padrão do Emmet em contextos JSX. Para expandir como className, você pode escrever explicitamente className na sua abreviação (o Emmet o reproduz como está) ou habilitar a conversão automática do "modo JSX" no seu editor (configuração emmet.syntaxProfiles do VSCode).

📖 Resumo

• VSCode, WebStorm e Atom têm Emmet habilitado por padrão; Sublime Text e Vim exigem um plugin
• O atalho padrão é Tab para a maioria dos editores, mas Ctrl+E no Sublime Text e Ctrl+Alt+Space no Brackets
• Arquivos HTML e CSS são suportados por padrão em todos os editores; JSX/TSX/Vue geralmente precisam de configuração extra
• Atalhos personalizados: remapeie para qualquer atalho via keybindings.json do VSCode
• Lista branca de tipos de arquivo: estenda as linguagens suportadas com emmet.includeLanguages; lista negra com emmet.excludeLanguages
• Em contextos JSX, o Emmet pode expandir class para className (alguns editores exigem habilitação manual)

📝 Exercícios

1. Básico (Dificuldade: ★): No seu editor atual, crie um novo arquivo .html, digite div.container>ul>li*3>a, pressione o atalho padrão, registre o resultado da expansão e faça uma captura de tela.
2. Intermediário (Dificuldade: ★★): Abra as configurações do seu editor, encontre as opções relacionadas ao Emmet, liste 3 opções que você não conhecia antes (ex.: tecla de acionamento, linguagens incluídas, linguagens excluídas) e descreva o que cada uma faz.
3. Desafio (Dificuldade: ★★★): Se você usa frequentemente arquivos JSX/TSX ou Vue, configure seu editor para habilitar o Emmet nesses tipos de arquivo. Depois, escreva uma única abreviação Emmet que expanda para um componente JSX completo (incluindo props e vinculação de eventos).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós