Melhores extensões do VS Code para Desenvolvedores Front-end

/

Todo desenvolvedor que já utilizou ou utiliza uma IDE para codificar se depara com diversas extensões e muitas das vezes acaba instalando várias que pode acabar mais atrapalhando do que ajudando sua produtividade. Hoje venho trazer as Melhores extensões do VS Code para Desenvolvedores Front-end que tenho certeza que irá ajudar na sua produtividade.

As Melhores extensões do VS Code para Desenvolvedores Front-end

1. Temas e Estilos

  • Material Icon Theme – Download
    • Deixa sua lista de pasta e arquivos muito mais bonita e intuitiva, com a possibilidade de alterar os ícones de cada tipo de arquivo, seja ele HTML, TypeScript, Sass e por ai vai.
  • Tema Dracula Official – Download
    • Um dos queridinhos de muitos desenvolvedores, além de melhoras a visibilidade por conta do seu tema escuro, não se torna agressivo para a vista devido a suas paletas de cores. Perfeito para longas jornadas de desenvolvimento.

2. Formatação e Organização de código

  • Prettier – Code Formatter – Download
    • Com longas jornadas de codificação é normal o codificar um pouco bagunçado (ou muito) por isso coloco o Prettier nessa lista. Ele formata automaticamente seu arquivo, seja ele de qualquer formato. É possível em sua configuração alterar a formatação para apenas quando o arquivo for salvo, ou quando uma tecla especifica for pressionada.
  • Auto Rename Tag – Download
    • Quando alteramos uma tag HTML ou mudamos um colchete ou parênteses, é normal esquecer de alterar o seu fechamento, essa extensão faz justamente isso, ela altera automaticamente a tag de fechamento caso a inicial seja alterada.

3. CSS/HTML

  • Tailwind CSS IntelliSense – Download
    • Essa vai para os amantes do Tailwind CSS, ela auto completa as classes e para melhorar mais ainda, mostra a documentação no próprio editor. Já elimina aquela ida na documentão pelo navegador e ficar procurando aquela classe que você sabe apenas o começo. Digite bg- que irá mostrar as sugestões.
  • HTML CSS Support – Download
    • Ótima para auxiliar os iniciantes quantos os mais experientes, essa extensão auxilia na associação de classes do CSS para o HTML, oferecendo a auto completar. Se você utiliza ela com o frameworks como o próprio Tailwind citando anteriormente é uma ótima opção. Outra combinação perfeita é com o Bootstrap, vale apena da uma olhada.

4. IntelliSense/Autocompletar

  • ES7+ React/Redux/React-Native snippets – Download
    • Se você está em um projeto que utilize React, React native ou Redux, sabia que essa extensão é imprescindível para aumentar sua produtividade. Ela disponibiliza snippts para agilizar na sua codificação. Por exemplo: Digite rafce para criar um componente.
  • TabNine – Download
    • Lembrando um pouco o Copilot da Microsoft o TabNine usa IA para sugerir partes de código enquanto você codifica. Quanto mais você utiliza mais a inteligência artificial aprende com seu código. Perfeito para quem deseja mais agilidade e velocidade com qualidade no código.

5. Debug

  • JavaScript (ES6) code snippets – Download
    • Utilizando as sintaxes mais modernas do ECAMA Script 6+ essa extensão fornece atalhos para que possamos digitar menos e ser mais ágil. Por exemplo: Digite clg que será impresso console.log().

6. Git/Terminal

  • GitLens – Download
    • Você que já utiliza o Git já deve ter ouvido falar do GitLens, essa extensão exibe que alterou determinado arquivo ou determinada linha desse arquivo e quando foi essa alteração. E permite também fazer uma comparação dos commits. Ideal para que deseja produtividade no Git.
  • Path Intellisense – Download
    • Quando se está em um projeto com varias pastas e arquivos, as vezes bate o esquecimento de onde está determinada coisa. Com essa extensão ela auto completa os caminhos para os arquivos, importando eles de forma muito mais rápida e precisa.

Com essas extensões mostradas espero que você se torne muito mais produtivo no seu ambiente de desenvolvimento. Utilize as que mais fazem sentido para você e para seu fluxo, até logo!