Oi, pessoal.
Hoje, decidi compartilhar uma lista de extensões que têm sido muito úteis no meu dia a dia, especialmente em projetos de FrontEnd. Notei que muitos programadores iniciantes ou pessoas interessadas em aprender ainda não possuem tanta familiaridade com extensões e como elas podem impactar positivamente na nossa produtividade cotidiana.
Introdução
Se você está na área de programação ou já começou a estudar, certamente já ouviu falar do VsCode (Visual Studio Code). Trata-se de um editor de código aberto e gratuito desenvolvido para Windows, Linux e macOS. É uma ferramenta versátil e altamente personalizável.
Uma maneira de torná-lo ainda mais versátil é instalando algumas extensões para otimizar e aprimorar seu código. Portanto, a seguir, apresentarei algumas das extensões que mais me auxiliam em projetos de frontend.
1. ESLint
O ESLint vai te ajudar a identificar erros em tempo real em seu código, o que vai te ajudar a corrigi-los assim que os comete, isso evita que você chegue lá no final do código e não encontre aquela vírgula ou ponto e vírgula que estão faltando para o seu projeto rodar.
Ele também te ajuda a identificar práticas inadequadas. O que garante que você sempre esteja dentro dos padrões da codificação e mais legível para outros usuários.
Um outro ponto muito legal é que ele pode ser integrado com diversos frameworks como o Node.js, React, Vue.js, entre outros.
2. Project Manager
Esta extensão é essencial para a sua organização pessoal. Com ela, você consegue salvar os mais diversos projetos que já desenvolveu ou participou diretamente no próprio VsCode.
Isso evita que você tenha o trabalho de entrar na pasta do arquivo em seu computador e facilita a navegação entre projetos. Às vezes, você deseja acessar um projeto antigo para tirar alguma dúvida simples e depois retornar ao código que estava desenvolvendo. Assim, você ganha bastante tempo para focar em outras atividades e não perde tanto o foco por ser uma transição mais simples.
3. Prettier – Code Formatter
O que mais me encanta na extensão Prettier é que ela torna código significativamente mais limpo, auxiliando na formatação de maneira automática. Eu diria que essa ferramenta é essencial para aqueles que ainda não têm pleno domínio das sintaxes de programação.
Essa extensão possibilita a formatação automática do seu código conforme as regras que você preestabelece. Além disso, ela oferece suporte para diversas linguagens, permitindo que você pré-visualize as mudanças antes de salvá-las. Isso significa que você pode revisar e aprovar as alterações de formatação propostas antes de aplicá-las definitivamente, garantindo um controle mais preciso sobre o aspecto final do código.
4. Path IntelliSense
A extensão Path Intellisense é muito útil quando trabalhamos com diversos caminhos e diretórios em nosso código. Ela oferece funcionalidades de autocompletar e sugestões inteligentes durante a digitação de caminhos de arquivo em diversos contextos, tornando a navegação e referência a arquivos mais eficientes
5. Error Lens
Com o Error Lens, você obtém feedback instantâneo, com erros e avisos destacados no seu código-fonte. É uma abordagem visual extremamente clara que permite que você se concentre apenas no seu código, sem a necessidade de alternar constantemente entre o código e a área do terminal que mostra os problemas.
6. Turbo Console Log
Por último, mas não menos importante, eu adicionaria o Turbo Console Log à lista de principais extensões iniciais.
Quem nunca deixou o código cheio de console logs para identificar e corrigir bugs em um site e acabou se perdendo no caminho? O Turbo Console Log é de grande ajuda para que você não se perca nos consoles. Com ele, você pode gerar automaticamente uma instrução de log no console com a variável que o desenvolvedor estava tentando corrigir, facilitando a identificação do console em questão.
Conclusão
Entendo que hoje existe um universo com as mais diversas extensões, e cada pessoa tem sua rotina e preferência na hora de programar. Por isso, destaco algumas extensões que me ajudaram muito, especialmente nos meus passos iniciais enquanto aprendia front-end. E você? Além dessas, qual extensão você incluiria na sua lista?
Agradeço por chegar até aqui, e até semana que vem. 💜
Imagem de Freepik
