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.
[adrotate banner=”4″]
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
[adrotate banner=”5″]
