O editor de código-fonte Visual Studio Code, desenvolvido pela Microsoft e disponibilizado de forma gratuita, é um dos IDEs (Ambiente de Desenvolvimento Integrado) mais utilizados atualmente. E essa preferência por essa ferramenta ocorre devido a alguns fatores:

• Suporte para 30 linguagens de programação (JavaScript, C#, C++, Java, SQL,
  Typescript, JSON, Python, entre outras);
• Disponível para múltiplos ambientes: Linux. Windows e MacOs;
• Controle de versão do Git;
• Terminal de Comandos integrado;
• Coleção enorme de extensões para VS Code disponível no Marketplace.

O que são as extensões para VS Code?

Extensões de software são programas, geralmente pequenos e leves, que são adicionados em outros programas maiores para adicionar funções a mais, estendendo esse programa com novas funcionalidades.

E o Visual Studio Code é um exemplo de programa maior que possui extensões variadas que auxiliam na programação, aumentando o rendimento e produtividade do desenvolvedor.

Extensões para VS Code

Então, vamos começar a citar as extensões mais utilizadas no Visual Studio Code, principalmente referente à programação em JavaScript/TypeScript para desenvolvimento Web e Mobile.

1) Quokka

O Quokka é um extensão para programação JavaScript e TypeScript que permite visualizar em tempo real os resultados de variáveis, condicionais e loops, sem a necessidade de executar o arquivo toda vez que você quer verificar o conteúdo delas. Então, chega de vários console.log() espalhados pelo seu código.

Download: Quokka

2) Beautify

Essa segunda extensão para VS Code, assim como o nome já sugere, permite manter nossos códigos com uma aparência bonita, realizando aquela indentação dentro do padrão de formatação, com o intuito de deixar mais legível e visualmente mais agradável aos nossos olhos. Além disso, a extensão Beautify permite indentar códigos em HTML, CSS, Sass, Javascript e JSON.

Download: Beautify

3) Git Lens

Todo desenvolvedor, ao tentar verificar as alterações já realizadas por outros desenvolvedores no projeto, sempre necessita retornar no gitHub para verificar o histórico. Mas com a extensão Git Lens não.

Dessa forma, o Git Lens tem como objetivo auxiliar na verificação de quem e onde realizou uma alteração em um determinado arquivo, no próprio VS Code.

Download: Git Lens

4) Bookmarks

Essa extensão é para quando você encontra uma ou várias linhas do código que você vai alterar, mas só quer mexer depois. E para não esquecer de realizar tal mudança, você pode utilizar o marcador do Bookmarks, onde ele cria um lembrete naquela linha em que você deve retornar, marcando a linha com uma bandeira e criando uma lista de marcações realizadas.

Download: Bookmarks

5) Javascript (ES6) Code Snippets

Se falamos de extensão, não podemos deixar de falar dos famosos snippets. Snippets são templates (modelos) de trechos de códigos automáticos que ajudam a evitar reescrever aquele corpo de código padrão que sempre precisamos usar. Por exemplo, um laço de repetição, corpo inicial de um documento de uma linguagem, entre outros.

Dessa forma, o Javascript (ES6) Code Snippets supre essa necessidade para quem é, principalmente, desenvolvedor front-end, pois gera trechos de JavaScript, TypeScript, Vue, React e HTML.

Download: Javascript (ES6) Code Snippets
Alternativas: ES7+ React/Redux/React-Native snippets e Rocketseat ReactJS

6) Material Icon Theme

O Material Icon Theme é uma excelente extensão para uma organização visual dos seus arquivos e pastas no VS Code. Ele possui inúmeros ícones para cada tipo de arquivos, linguagens e pastas, onde cada item será identificado por um desses ícones.

Download: Material Icon Theme

Alternativa: Vscode Icons

7) Visual Studio IntelliCode

A IntelliCode é uma extensão com inteligência artificial, que através do contexto do código que está sendo digitado, gera recomendações de autocompletes para o seu código. Assim, a extensão ajuda na otimização do seu tempo escrevendo o projeto.

Assim, essa extensão está disponível para linguagens C#, C++, Java, Python, SQL, Typescript/Javascript e XAML.

Download: Visual Studio IntelliCode

8) Auto Rename Tag

Essa extensão irá otimizar o seu tempo quando o assunto é mudar a tag que estava utilizando por uma outra tag. Quando alteramos uma tag, sempre temos que alterar a tag de abertura e posteriormente a de fechamento. Mas, com a Auto-Rename, no momento em que você alterar uma das tags, a outra tag será alterada automaticamente junto.

Download: Auto Rename Tag

9) Color Highlight

A extensão Colorize é muito útil para quando estamos trabalhando com CSS e Sass. Essa extensão ajuda a visualizar as cores quando você escreve o código de uma cor no seu projeto. Pensando nisso, é uma extensão que o desenvolvedor front-end deve ter.

Download: Color Highlight

Outra alternativa: Colorize

10) REST Client

Por último, temos a extensão REST Client que é ótima para realizar testes de requisições HTTP para APIs e visualizar as respostas sem a necessidade de utilizar aplicativos externos, como Insomnia ou Postman, para cada teste de requisição que você quiser efetuar. Isso porque ele apresenta os resultados no próprio editor VS Code.

Download: REST Client

Conclusão

Essas foram algumas das extensões para VS Code mais utilizadas pelos devs. Entretanto, é claro que existem muitas outras extensões que são tão boas quanto estas, tendo em vista que o MarketPlace do VS Code está em grande crescimento em questão de variedade.

Agora, caso você ainda não tenha testado alguma dessas extensões, teste e conte aqui nos comentários! Dessa forma, essas ferramentas podem te ajudar a acelerar o seu rendimento durante o desenvolvimento do seu código.

Autor: Taianny Sayuri Shiotani