DEV Community

Cover image for 10 Extensões úteis para o seu VSCode
Tássio Medeiros
Tássio Medeiros

Posted on

10 Extensões úteis para o seu VSCode

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.

Exemplos de ícones de arquivos

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.

Exemplo de cores em hexadecial e rgb

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.

Visualização de imagem svg no VSCode

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.

Visualização do projeto usando LiveServer

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.

Visualização de histórico do arquivo usando o GitLens

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:

ESLint apresentando erros de código ao usuário

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.

Github Copilot auxiliando na construção de código

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.

Markdown All In One auxiliando usuário na construção de texto no formato markdown

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.

Visualização do NPM Intellisense ajudando na importação

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! 😄

Top comments (2)

Collapse
 
andersonpull profile image
Anderson Oliveira Bezerra • Edited

Muito bacana o conteúdo parabéns.
Recentemente eu descobri uma chamada indent-rainbow não sabia que precisava dela mas agora não vivo sem, ela pinta os intervalos dos tabs pra ajudar na visualização. rsrs

Image description

Collapse
 
tassiomed profile image
Tássio Medeiros

Caramba! Adorei @andersonpull ! Vou usar no meu VSCode ✨.
Obrigadão pelo elogio e pela recomendação!