10 Principais Extensões para VS Code

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 2

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 3

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 5

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 6

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 7

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 8

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 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 9

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

10 Principais Extensões para VS Code Luby Software
10 Principais Extensões para VS Code 10

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″]

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!
Transformação Digital Logo Luby Azul

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

Copyright ©2023 Luby Software LLC. All rights reserved.

Rolar para cima