O Visual Studio Code, ou VS Code, é um dos IDE’s (Ambiente de Desenvolvimento Integrado) mais populares atualmente devido sua interface amigável e sua extensibilidade por meio de extensões. No entanto, com a imensa gama de extensões disponíveis, pode ser desafiador encontrar aquelas que melhor atendem às suas necessidades específicas. Neste artigo, vamos conhecer dez extensões úteis que podem elevar sua experiência. Seja você um desenvolvedor front-end, back-end ou full-stack, estas extensões foram selecionadas para aumentar sua produtividade e melhorar a qualidade do código. Vamos mergulhar e descobrir como essas ferramentas podem transformar sua experiência de desenvolvimento no VS Code.
Material Icon Theme
O Material Icon Theme personaliza os ícones do seu VSCode de acordo com a linguagem que você está utilizando. É uma ótima ferramenta que agiliza o seu trabalho. Imagina o seguinte, você precisa rapidamente identificar um arquivo de linguagem específico e ele já está lá facilmente visível. Além disso, a extensão também customiza os ícone de suas pastas.
Color Highlight
A extensão Color HighLight possibilita a visualização das cores hexadecimais dentro do VSCode. Uma maneira fácil de identificar a cor necessária no momento.
SVG Previewer
A extensão SVG Previewer facilita a pré-visualização de uma arquivo SVG dentro do seu VSCode. Mais uma maneira de identificação rápida dos seus arquivos, agora de imagem.
Live Server
O Live Server é uma mão na roda para desenvolvedores Front-end, ela permite visualizar as alterações do seu código em tempo real. A grande vantagem é que o Live Server automatiza a atualização da página no navegador para você através de um localhost.
A página no navegador é recarregada automaticamente sempre que ocorre uma alteração nos arquivos do projeto, economizando tempo e tornando o processo de desenvolvimento mais eficiente.
Permite o uso de recursos do HTML5, como WebSockets e Geolocation, facilitando o desenvolvimento de aplicações web modernas.
A extensão é altamente configurável, permitindo que os usuários ajustem as configurações de acordo com suas necessidades específicas de projeto.
Git Lens
O Git Lens é uma extensão que integra as funcionalidade do Git diretamende no VSCode. Essa é uma ferramenta poderosa quando se trata de produtividade e agilidade. Algumas das funcionalidades dela:
Com o GitLens é possível explorar rapidamente o histórico de um repositório, incluindo branches, tags e commits.
GitLens você pode visualizar de forma detalhada o histórico de alterações de um arquivo, sendo possível saber quem e quando fez alterações específicas em um projeto.
Você pode comparar facilmente diferentes revisões de um arquivo para ver as alterações entre elas e entender como o código evoluiu ao longo do tempo.
ES Lint
O ES Lint é um linter bastante utilizado pela comunidade do Javascript e Typescript. Esta extensão ajuda a identificar erros de sintaxe e problemas de estilo no código JavaScript, ajudando os desenvolvedores a manter um código limpo e legível. Além disso, pode ser facilmente configurado para atender às necessidades do seu projeto, tudo através de um arquivo de configuração simples.
Na imagem abaixo é possível observar a ferramenta indicando erros de código em javascript:
Github Copilot
O Github Copilot é uma extensão que você pode usar como uma assistente ou um parceiro de programação. Esta ferramenta desenvolvida pelo Github e pela Open AI pode gera sugestões de código com base no que você está escrevendo. É uma ótima opção quando você lida com tarefas repetitivas. Abaixo algumas vantagens:
GitHub Copilot é alimentado por modelos de linguagem treinados em uma grande quantidade de código-fonte de código aberto. Isso significa que ele está constantemente aprendendo com novos padrões de codificação e soluções para problemas comuns, tornando suas sugestões cada vez mais precisas e úteis ao longo do tempo.
Embora inicialmente tenha sido lançado com suporte principalmente para Python e JavaScript, o GitHub Copilot está expandindo seu suporte para uma variedade de linguagens de programação, o que o torna útil para uma ampla gama de desenvolvedores.
Markdown All in One
Escrever um código limpo e que funcionen bem é essencial. Mas além disso, um bom programador ganha bons pontos aos escrever um README que seja visualmente bem construído e que explique bem o seu projeto. Neste contexto, a extensão Markdown All in One se encaixa como uma ótima ferramenta. Usando-a você pode editar e visualizar seu documento Markdown no próprio Visual Studio Code, sem a necessidade de alternar entre diferentes aplicativos ou janelas.
Abaixo algumas de suas principais vantagens:
A extensão Markdown All In One oferece recursos de previsão para Markdown, o que significa que ela pode sugerir automaticamente elementos Markdown enquanto você digita, economizando tempo e esforço na digitação.
A extensão facilita a criação de tabelas Markdown e a inserção de emojis, simplificando a formatação e tornando o documento mais visualmente atraente.
NPM IntelliSense
Mais uma extensão voltada para produtividade que pode agregar muito é a NPM IntelliSense. Com esta ferramenta você obtém autocompletar para nomes de pacotes npm diretamente no editor. Isso economiza tempo e ajuda a evitar erros de digitação ao instalar ou importar pacotes em seu projeto.
Além disso, outras 3 vantagens:
A extensão fornece informações sobre as versões disponíveis dos pacotes npm, o que pode ajudar a garantir que você esteja instalando a versão mais recente ou apropriada para o seu projeto.
Se você estiver usando aliases de importação em seu projeto (por exemplo, import MyComponent from ‘@/components/MyComponent’), o npm IntelliSense pode reconhecê-los e oferecer autocompletar para esses caminhos personalizados.
A extensão oferece suporte para completar scripts npm e outras configurações diretamente no arquivo package.json, facilitando a edição e a manutenção desse arquivo crucial.
JavaScript (ES6) code snippets
A extensão JavaScript (ES6) code snippets mais uma ferramenta aliada da produtividade. Com ela você tem disponível snippets de código para Javascript que podem te ajudar a poupar tempo.
Na tabela abaixo alguns exemplos de atalhos para métodos do javascript:
Atalho
Descrição
Exemplo
fre
Loop forEach em sintaxe ES6
array.forEach(currentItem => {})
anfn
Cria uma função anônima
(params) => {}
sto
Método auxiliar setTimeout
setTimeout(() => {});
prom
Cria uma nova Promise
return new Promise((resolve, reject) => {})
thenc
Adiciona declarações then e catch a uma Promise
then((res) => {}).catch((err) => {})
Mais algumas vantagens dessa extensão:
Os snippets fornecidos pela extensão são especialmente úteis para JavaScript moderno, como ES6 e versões posteriores, incluindo recursos como arrow functions, template literals, destructuring, spread/rest operators, classes, async/await, entre outros.
Ao utilizar os snippets fornecidos pela extensão, você garante que seu código siga padrões consistentes e modernos de codificação JavaScript, o que pode melhorar a legibilidade e a manutenibilidade do código.
Ao explorar os snippets fornecidos pela extensão, os desenvolvedores podem aprender novos recursos e sintaxes do JavaScript moderno. Isso é especialmente útil para desenvolvedores que estão se familiarizando com ES6 e versões posteriores.
Na tabela abaixo estão alguns métodos de console:
Atalho
Descrição
Exemplo
cas→
Exibe uma mensagem de alerta no console
console.assert(expression, object)
ccl-
Limpa o console
console.clear()
cnb
Conta o número de vezes que um determinado rótulo foi usado
console.count(label)
cdb
Exibe uma mensagem de depuração no console
console.debug(object)
cdi-
Exibe as propriedades de um objeto no console
console.dir(object)
Espero que este artigo tenha sido útil para você descobrir novas extensões que podem aprimorar sua experiência de desenvolvimento. Lembre-se de que a escolha das extensões certas pode fazer uma grande diferença em sua produtividade e no resultado final do seu trabalho.
Se você tiver alguma extensão favorita que não foi mencionada aqui, sinta-se à vontade para compartilhá-la nos comentários! Até logo e happy coding! 😄
