Produtividade com o Emmet + Sublime Text 3

Você provavelmente já o conhece e eu irei te guiar por algumas features desse plugin que impressionar

Produtividade com o Emmet + Sublime Text 3
  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Fala Dev!

Esse é meu primeiro post aqui no blog e pensei em simplificar um pouco pra dar o pontepé inicial de uma forma mais leve, sem muita complexidade.

É fato que a grande maioria dos desenvolvedores tanto front-end quanto back-end (mais front sem dúvidas) já conhece e usa o Emmet e sabe do tempo que ele te ajuda a economizar na hora de codificar estruturas padrões no desenvolvimento. Aquelas que a gente procura um projeto antigo ou até mesmo deixa um Snippet salvo no bloco de notas pra copiar e colar instantenaeamente em seu novo projeto.

Pensando em sanar este problema, o Emmet provê uma estrutura de preparação para gerar trechos de códigos padronizados sem que seja necessário digitar todo ele ou mesmo copiar e colcar aquele snippet.

Para os que não conhecem a ferramente, se liga só:

Sabemos que o "#" no CSS serve para informa um seletor do tipo ID.

Com base nisso, no momento em que digitamos div#meuId e clicando TAB o Emmet vai processar essa linha e escrever pra você o seguinte resultado:

<div id="meuId"></div>

Louco né ? E ele deixa o seu cursor dentro da tag ;)

Já que ele funciona com ID, será que ele funciona com CLASS? 

R: SIM! div.minhaClass

<div class="minhaClass"></div>

 

Isso aí acima, é o básico pra engatinhar com o Emmet mas ele é capaz de muito mais. Ele pode executar uma sequencia aninhada de tags inclusive com conteúdo pré inserido.

Para adicionar texto dentro de uma expansão do Emmet, basta informar dentro de chaves, por exemplo: a{Cadastre-se Aqui}

Outro recurso incrível é o de contar o número de tags que deseja exibir, por exemplo: ul>li>a{Link}*8 irá resultar em:

<ul>
<li>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
<a href="">Link</a>
</li>
</ul>

E basta ir dando TAB para preencher os valores dentro das tags ;)

Agora deixo pra vocês uma abreviação para que testem e descubram o que ela é capaz de fazer

Isso foi realmente p básico para quem não conhece. Segue aqui o link pra quem quiser conhecer todos os recursos do Emmet:

Emmet Cheat Sheet

 

Bom, espero que tenha gostado e em breve povoarei o blog com artigos incríveis e cursos!

See ya Devs!

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Olá, deixe seu comentário para Produtividade com o Emmet + Sublime Text 3

Enviando Comentário Fechar :/