20 melhores dicas do Emmet para ajudá-lo a codificar HTML / CSS Crazy Fast

30 de abril de 2020 0 107

Emmet, anteriormente conhecida como codificação Zen, é uma das melhores ferramentas necessárias para aumentar sua produtividade ao codificar HTML ou CSS. Funciona como a conclusão de código, mas é mais poderoso e surpreendente. É capaz de automatizar seu HTML / CSS de um formulário simples para o complexo.

O Emmet oferece bom suporte para editor de texto ou IDE (Ambiente de Desenvolvimento Integrado), como Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Suportes, Notepad ++, PHPStorm e muitos outros. Ele também suporta ferramentas de edição on-line como JSFiddle, JSBin, CodePen, IceCoder e Codio .

A maneira como o Emmet funciona é digitando a tecla do teclado da guia quando terminar de escrever a sintaxe. A seguir estão os símbolos Emmet mais comuns que você pode usar. Para vê-los em ação, continue lendo.

sintaxe comum>

Emmet – Melhores truques em HTML

Você ficará surpreso ao escrever HTML com Emmet, como eu fiz. Como afirmado anteriormente, o Emmet é capaz de abreviar um HTML simples para um muito complexo. E eles são escritos apenas em uma única linha de código. Por padrão, se você abreviar o nome da etiqueta desconhecida, o Emmet gravará automaticamente a etiqueta que você escrever. Veja a animação abaixo para entender facilmente.

etiqueta desconhecida>

1. Aninhamento

Para aninhar alguns elementos, basta adicionar um sinal maior  > após cada tag que você deseja usar. Por exemplo, quando eu quero ter um headercom nav, div, ule lidentro eu só precisa digitar header>nav>div>ul>lie a tecla tab hit.

aninhamento>

2. Irmão

Se você não deseja aninhar seus elementos, basta usar um +sinal de adição seguido pelas tags que deseja adicionar. Exemplo, a header+section+article+footerirá dar um lugar diferente para header, section, articlee footer.

irmão>

3. Suba

Quando você está dentro de um elemento filho e deseja ter outro elemento fora desse filho, é possível escalar facilmente um elemento com ^sinal. Se você digitar duas vezes, subirá o elemento duplo e assim por diante. Por exemplo, se você digitar header>div>h1>nav, o elemento nav ainda estará dentro do h1. Para tirá-lo, substitua o último >sinal por ^.

escalar>

4. Adicionar classe

O Emmet também pode incluir o nome da sua classe preferida na tag. O sinal que você usará é o mesmo que o seletor de classe em CSS, que é um . sinal de ponto . Por exemplo, se eu quiser ter um divcom .containerclasse, h1com .titlee navcom .fixed, então eu só tenho que escrever div.container>header>h1.title+nav.fixed.

classe add>

Se você quiser ter mais de uma classe, digite sua classe adicional após a primeira aula, juntamente com o .sinal de ponto . Exemplo: div.container.centerproduzirá

.

5. Adicione ID

Além da aula, você também pode adicionar um ID dentro da sua tag com # sinal. O uso é o mesmo que adicionar classe, mas você não pode digitar ID duplo. Se você tentar fazer isso, o Emmet lerá apenas o último ID digitado.

add-id>

6. Adicione texto

O Emmet não é tão simples assim, basta abreviar algumas tags, você pode até adicionar linhas de texto dentro. Para adicionar algum texto, você apenas precisa envolver o texto com {}sinal de colchete . Você não precisa adicionar um >sinal maior, pois o texto será adicionado automaticamente dentro da tag.

Adicione texto>

7. Adicionar atributo

Se você deseja adicionar outro atributo além da classe e do ID, basta colocar o atributo que deseja adicionar dentro do []sinal de colchete . Por exemplo, eu quero ter uma imagem que tenha a fonte logo.png com logo alt, então apenas digito img[src="logo.png" alt="logo"].

add-attribute>

8. Agrupamento

Quando você deseja ter um elemento com vários aninhados por dentro, agrupá-los com ()sinal ajudará a conseguir isso facilmente. Exemplo, eu quero ter um recipiente que tem cabeçalho com h1 e dentro nav e outra seção fora do cabeçalho, eu simplesmente vou escrever: .container>(header>h1+nav.fixed)+(section>.content+.sidebar).

agrupamento>

9. Multiplicação

Esse recurso pode se tornar um dos seus favoritos de Emmet. Assim como na multiplicação, podemos multiplicar qualquer elemento o quanto quisermos. Para usá-lo, basta adicionar um *sinal de estrela após o elemento que você deseja multiplicar e adicionar o número do elemento. Por exemplo, eu quero escrever cinco itens li dentro de ul, então a sintaxe correta é ul>li*5.

multiplicação>

10. Numeração automática

A numeração automática ajudará você a escrever facilmente um nome diferente com o aumento do número. A sintaxe correta para esse recurso é um cifrão $. A numeração automática é melhor usada com multiplicação. Exemplo, quero adicionar meu liitem anterior com uma classe de item1para item5. Então, eu só tenho que adicionar o nome classe adicional com sinal de dólar: ul>li.item$*5.

numeração automática>

11. Lorem

Se você costumava escrever um texto fictício, abrindo o gerador lipsum como lipsum.com, com o Emmet, não é mais necessário. O Emmet também suporta gerador de texto fictício com loremou lipsumsintaxe. Você também pode especificar quanto tempo seu texto se tornará. Por exemplo, eu quero ter um texto com 10 palavras e digitar lorem10.

lorem>

12. Documento automático

Quando você está iniciando um novo projeto, em vez de escrever a estrutura html manualmente ou copiar colando de outros recursos, o Emmet pode fazer isso por você melhor. Tudo que você precisa fazer é digitar um !sinal de exclamação  , clicar na aba e a mágica acontecer. Isso irá gerar uma estrutura de documento HTML5 para você, se você quiser usar um HTML4, basta digitar html:4t.

documento automático>

13. Link

Se você possui um arquivo favicon, rss ou CSS externo que deseja adicionar ao seu documento, pode usar truques de link para escrevê-los mais rapidamente. Para incluir um favicon, digite link:faviconentão ele irá gerar um link favicon com o favicon.iconome de arquivo padrão . E para css, link:css você irá gerar um link CSS com o style.cssnome do estilo padrão . E o RSS será rss.xmlo nome padrão.

ligação>

Você pode combiná-los com o +sinal de adição para gerar recursos mais rápidos.

truque de link>

14. Âncora

Por padrão, quando você digita atag e pressiona tab, você receberá uma atag completa com o hrefatributo dentro. Mas você pode adicionar um http://valor se combiná-lo com o link, por exemplo a:link. E se você deseja ter um link de email, use a:mail.

âncora>

15. Ignorando inteligente

Os últimos truques de HTML que darei a você é o recurso de salto inteligente. Basicamente, você não precisa escrever o nome da tag quando deseja ter uma classe ou ID dentro dela. Isso se aplica apenas a algumas condições.

Primeiro, se você quiser ter um divID ou classe com dentro, não precisará escrever o nome da tag, basta escrever diretamente o ID ou o símbolo da classe junto com o seu nome.

skipping-div>

Segundo, quando você está dentro de uma ultag, você pula a escrita da litag se ela tiver uma classe ou ID.

skipping-li>

E o último é aplicado na tabletag. Você pode pular a escrita tre a tdmarcação se eles tiverem classe ou ID e o Emmet os adicionará automaticamente para você.

mesa de pular>

Emmet – Melhores truques CSS

Depois de aprender alguns truques de HTML, agora é hora do CSS. Alguns símbolos comuns mostrados na imagem superior não funcionarão com CSS. Eles são maiores >e escalam ^símbolos. Se você usá-los, eles produzirão o mesmo +símbolo de adição . Então, vamos em frente.

1. Largura e altura

Definir widthe heightcom Emmet é muito fácil. Você apenas precisa escrever a primeira palavra, seguida do tamanho que deseja adicionar. Por padrão, se você não especificar as unidades, o Emmet as gerará com a pxunidade. O símbolo da unidade disponível é porcentagem %e em.

largura altura>

2. Texto

Existem alguns símbolos de propriedade de texto fáceis de usar e serão gerados com o valor padrão. tairá gerar text-aligncom leftvalor, tdestará text-decorationcom nonevalor e ttse tornará text-transformcom uppercasevalor.

texto>

3. Antecedentes

Para adicionar um plano de fundo, basta usar a bgabreviação. Você pode combiná-lo com bgipara obter background-image, bgcpara background-colore bgrpara background-repeat. Você também pode escrever bg+para obter uma lista completa das propriedades em segundo plano.

fundo>

4. Tipo de letra

O sinal de adição não se aplica apenas ao plano de fundo. Para @font-face, você pode simplesmente escrever @f+para uma lista completa de @font-facepropriedades. Se você digitar @fsem sinal de adição, receberá @font-faceapenas um básico  .

Tipo de letra>

5. Diversos

Outros grandes truques são que você pode abreviar a escrita animationcom animtexto. Se você adicionar um -sinal de menos , obterá a propriedade de animação com o valor total. Também há @kftexto que produzirá uma lista completa de @keyframe.

misc>

 

VEJA TAMBÉM: Os 15 principais frameworks PHP gratuitos para 2015

Conclusão

O Emmet é uma ferramenta enorme para economizar tempo para otimizar seu processo de desenvolvimento. Se você conhece Emmet, ainda não é tarde para tentar agora. Esses truques são apenas alguns dos recursos do Emmet. Existem muitos outros símbolos e sintaxes no Emmet, especialmente para CSS. Apenas vá para Emmetdocs ou folha de dicas para promover sua leitura.

Dev