O uso de diferentes extens\u00f5es para front-end faz parte do dia a dia de qualquer desenvolvedor, sejam freelancers ou mesmo profissionais consolidados na \u00e1rea. Afinal, s\u00e3o muitos os detalhes que precisam de aten\u00e7\u00e3o para que o resultado de um projeto seja t\u00e3o incr\u00edvel quanto o planejado.<\/p>\n
Esses recursos permitem que cada trabalho seja feito de forma mais r\u00e1pida e eficiente, aumentando a produtividade e garantindo a qualidade da aplica\u00e7\u00e3o desenvolvida. Por isso, eles s\u00e3o praticamente indispens\u00e1veis e voc\u00ea deve considerar inclu\u00ed-los em sua rotina.<\/p>\n
Atualmente, as extens\u00f5es para front-end<\/a> mais utilizadas s\u00e3o as que adicionam recursos ao Google Chrome e ao editor de c\u00f3digos Microsoft VS Code. Ao longo deste post, vamos apresentar as 7 principais ferramentas para os desenvolvedores!<\/p>\n Corrigir a indenta\u00e7\u00e3o de um c\u00f3digo durante a sua produ\u00e7\u00e3o pode ser uma tarefa realmente trabalhosa e repetitiva. A cada ajuste ou adi\u00e7\u00e3o de fun\u00e7\u00f5es no projeto, \u00e9 necess\u00e1rio conferir as linhas ao redor para manter o espa\u00e7amento ideal.<\/p>\n A extens\u00e3o Prettier – Code Formatter<\/a> \u00e9 a melhor forma de otimizar esse processo no VS Code. Ele automatiza a formata\u00e7\u00e3o do c\u00f3digo a cada salvamento, poupando um tempo valioso durante o desenvolvimento. Com uma estrutura consistente, o trabalho fica mais leg\u00edvel e organizado, especialmente quando se est\u00e1 trabalhando em projetos com outros desenvolvedores.<\/p>\n Essa extens\u00e3o \u00e9 perfeita para quando \u00e9 preciso descobrir como um website foi feito. Ao instalar o Wappalyzer<\/a> no Google Chrome, bastar\u00e1 acessar a p\u00e1gina desejada para ter instantaneamente acesso a um relat\u00f3rio completo com as tecnologias utilizadas em seu desenvolvimento.<\/p>\n A ferramenta informa quais linguagens de programa\u00e7\u00e3o foram utilizadas, se h\u00e1 bibliotecas e frameworks, se h\u00e1 aplica\u00e7\u00f5es de terceiros, como m\u00eddias interativas<\/a>, qual CMS e plataforma de e-commerce est\u00e3o em uso, entre muitas outras informa\u00e7\u00f5es. Ele tamb\u00e9m oferece rela\u00e7\u00f5es de sites que utilizam uma determinada tecnologia, facilitando pesquisas e compara\u00e7\u00f5es de uso.<\/p>\n Essa \u00e9 uma excelente maneira de checar a p\u00e1gina de um cliente em potencial para ter um bom ponto de partida na cria\u00e7\u00e3o de um projeto, por exemplo.<\/p>\n Para replicar aquela mesma cor exibida em uma p\u00e1gina da web, n\u00e3o \u00e9 preciso “tirar um print” da tela para transferir a um editor de imagens. Com a extens\u00e3o ColorZilla<\/a> para Google Chrome \u00e9 poss\u00edvel fazer isso com poucos cliques e sem precisar sair do navegador.<\/p>\n De vez em quando, a praticidade dessas ferramentas surpreende at\u00e9 quem est\u00e1 acostumado \u00e0 correria dos prazos. Voc\u00ea percebe que deixou de perder tempo com tarefas bobas e automatizou at\u00e9 as menores etapas. Nem sempre \u00e9 poss\u00edvel fugir da rotina, mas pelo menos ela fica menos ma\u00e7ante quando um simples clique resolve o problema.<\/p>\n Outra coisa interessante \u00e9 perceber como essas pequenas extens\u00f5es acabam influenciando a criatividade no dia a dia. Facilitar a experimenta\u00e7\u00e3o de cores e estilos elimina aquele receio do “e se ficar ruim?”, j\u00e1 que ajustar depois acaba sendo mais simples. No fundo, o workflow vai ficando menos engessado \u2013 e at\u00e9 mais divertido, se for pensar.<\/p>\n Quando encontrar a cor desejada, basta ativar a extens\u00e3o e, assim que o cursor mudar de forma, clicar sobre ela para copi\u00e1-la para a \u00e1rea de transfer\u00eancia. Uma barra na parte superior mostra uma pr\u00e9via da cor selecionada, bem como as codifica\u00e7\u00f5es hexadecimal e RGB, al\u00e9m do elemento HTML de refer\u00eancia. Assim, rapidamente voc\u00ea poder\u00e1 replicar qualquer cor que precisar para utilizar em suas pr\u00f3prias cria\u00e7\u00f5es.<\/p>\n Essa extens\u00e3o para VS Code ajuda o desenvolvedor a identificar mais facilmente as chaves de fechamento ao longo do c\u00f3digo. A aplica\u00e7\u00e3o faz isso atribuindo cores diferentes para cada uma delas, e fazendo o mesmo para nas aberturas.<\/p>\n Com o Bracket Pair Colorizer<\/a>, d\u00e1 para solucionar a confus\u00e3o que costuma acontecer nas situa\u00e7\u00f5es em que h\u00e1 v\u00e1rias chaves de fechamento em sequ\u00eancia ao final de uma fun\u00e7\u00e3o ou do pr\u00f3prio arquivo.<\/p>\n A linguagem CSS surgiu para ampliar as possibilidades no desenvolvimento de sites, permitindo que comandos relacionados a estilos e layout fossem aplicados para deixar as p\u00e1ginas mais atrativas e modernas. Mas, \u00e9 ineg\u00e1vel que ter de alternar entre diferentes documentos ou dividir sua tela de trabalho para verificar essas informa\u00e7\u00f5es nem sempre \u00e9 a melhor alternativa.<\/p>\n Com a extens\u00e3o para VS Code CSS Peek<\/a>, esse se torna um problema a menos durante o desenvolvimento dos seus projetos. A ferramenta permite visualizar quais s\u00e3o os estilos aplicados \u00e0 classe ou ao ID selecionado sem precisar ir at\u00e9 o arquivo CSS a cada verifica\u00e7\u00e3o.<\/p>\n \u00c0s vezes, a diferen\u00e7a que faz n\u00e3o precisar ficar trocando de aba o tempo todo s\u00f3 aparece quando voc\u00ea deixa de ter esse inc\u00f4modo. Pouca gente percebe, mas pequenas distra\u00e7\u00f5es acabam minando a concentra\u00e7\u00e3o ao longo do dia e drenam energia na marra. Eu mesmo j\u00e1 cansei de perder minutos preciosos s\u00f3 para lembrar onde est\u00e1 determinado seletor, especialmente quando o projeto j\u00e1 passou daquele est\u00e1gio “limpo”.<\/p>\n Geralmente, s\u00e3o esses detalhes do dia a dia que acabam ditando se um desenvolvedor consegue bater suas pr\u00f3prias metas sem sacrificar a paci\u00eancia. Com ferramentas como o CSS Peek, d\u00e1 para manter um ritmo mais fluido e at\u00e9 gostar um pouco mais da bagun\u00e7a inescap\u00e1vel do front-end. Claro, n\u00e3o existe milagre, mas pelo menos o desgaste diminui consideravelmente.<\/p>\n O CSS Peek tem suporte a arquivos .html e .js, para que voc\u00ea otimize o trabalho com os estilos em qualquer situa\u00e7\u00e3o.<\/p>\n Assim como acontece com as cores, a identifica\u00e7\u00e3o de fontes tamb\u00e9m pode ajudar bastante no processo de desenvolvimento no front-end. Por isso, a extens\u00e3o Fonts Ninja<\/a>, para Google Chrome, \u00e9 outra ferramenta que n\u00e3o pode faltar no setup de quem atua na \u00e1rea.<\/p>\n Seu uso \u00e9 muito f\u00e1cil, bastando ativ\u00e1-la para descobrir quais s\u00e3o todas as diferentes fontes<\/a> exibidas na p\u00e1gina. A ferramenta ainda mostra detalhes sobre a tipografia, como peso e estilos aplicados, al\u00e9m de oferecer um link direto para download ou aquisi\u00e7\u00e3o, no caso das fontes com direitos autorais.<\/p>\n Outro recursos interessante da extens\u00e3o \u00e9 a possibilidade de criar uma lista de fontes favoritas, que pode servir como um reposit\u00f3rio para consulta em projetos futuros.<\/p>\n1. Prettier – Code Formatter<\/h2>\n
2. Wappalyzer<\/h2>\n
3. ColorZilla<\/h2>\n
4. Bracket Pair Colorizer<\/h2>\n
5. CSS Peek<\/h2>\n
6. Fonts Ninja<\/h2>\n
7. Dimensions<\/h2>\n