Conhece o Emmet? E o Brackets?

brackets+emet

Se você é acostumado a produzir layouts para front-end (CSS, HTML e JS) e sofre com o processo de atualizar o browser a toda alteração realizada no CSS e ainda ter que repetir todas aquelas tags HTML milhares de vezes, tornando seu fluxo de trabalho em algo enfadonho… Seus problemas acabaram! =D

Há um plugin chamado Emmet, que ele ficou bastante conhecido após o lançamento do Sublime Text… Não conhece o Sublime?! … O Sublime é um editor de texto que ganhou rápida popularidade pela sua leveza e por facilitar a instalação de plugins que ajudarão no seu fluxo de trabalho.

Um destes plugins, como já citado, é o Emmet , onde ele tem a função de auxiliar na codificação de HTML e CSS por meio de abreviações ou snippets, que são substituídos por tags ou declarações mais complexas. Como exemplo:

initializers

Para você conhecer mais sobre o Emmet há um artigo e um vídeo do Zeno Rocha explicando como usá-lo.

Certo, e a parte de atualizar toda hora o browser? … O Brackets, até agora, é a minha solução. Ele é um editor de texto Open Source da Adobe, que te permite um Preview ao vivo das alterações realizadas no HTML ou no CSS sem precisar atualizar o navegador ou ficar abrindo a todo instante o Firebug, ou as Ferramentas de Desenvolvedor do Chrome.

Você o instala na sua máquina ( tem para todas as plataformas ), e pronto, já pode usá-lo. O exemplo abaixo apresenta um arquivo padrão que vem nele.

Para o Brackets realizar o Preview Live você precisa clicar no raio que se encontra no canto superior direito, assim ele iniciará um servidor local e apresentará sua página HTML no Chrome. Preste atenção no exemplo, onde seleciono uma região do CSS e o Brackets já destaca no HTML onde ocorrerá a alteração, não é lindo?! =D (Se você trabalha com 2 monitores é mais lindo ainda xD)

exemplo_brackets

Se eu realizar alguma alteração no CSS ele já apresenta no HTML e no browser, sem precisar ficar salvando o CSS. No caso de alteração no HTML, você precisa salvar o arquivo.

Você pode perguntar: “E posso juntar o Emmet com o Brackets?”… Sim! O Emmet já possui um plugin para o Brackets!

Outra dica: Se você ainda não conhece o LESS, já está na hora!

Espero que isso ajude a tornar mais rápido o seu fluxo de trabalho, tornando-o mais prazeroso e eficiente!

3 Comments

    1. Caro 007 ! Baixei o Emmet no Notepad++ e tive o mesmo problema que você. Solucionei da seguinte forma: 1o. No Mapa de Atalhos haviam 2 atalhos idênticos para executar o do Emmet, então alterei este (mas não sem antes constatar se já não havia algum outro semelhante); 2o. Também tem que instalar o plugin Phython Script (que funciona em conjunto com o Emmet). Você irá encontrálo em: https://www.python.org/downloads/. Espero ter podido ajudá-lo. Forte abraço.l

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s