🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Extensões Recomendadas】10 Extensões Populares para Aumentar sua Produtividade no VSCode

Olá! Sou alguém que, do zero em programação, conseguiu criar um site de forma autodidata com a ajuda da IA. Fui um completo iniciante, assim como você.

Você instalou o VSCode (Visual Studio Code) e pensou "Beleza, vou começar a programar!", mas agora está travado sem saber o que fazer a seguir? Ou está se perguntando "Como posso programar de forma mais eficiente?"?

Eu entendo perfeitamente esse sentimento. Eu também era assim no começo. Encarando uma tela preta, eu estava completamente perdido. Mas o verdadeiro poder do VSCode é liberado ao adicionar "extensões". Ao instalá-las, sua eficiência de desenvolvimento aumentará drasticamente e a programação se tornará muito mais divertida.

Neste artigo, selecionei cuidadosamente apenas 10 extensões realmente úteis que me fizeram pensar "Eu não conseguiria trabalhar sem isso!" enquanto criava meu site. Não há nada complicado. Apenas siga este artigo, copie e cole, e seu VSCode se transformará na ferramenta de desenvolvimento definitiva. Vamos experimentar a sensação de "tudo funcionando" e sentir o prazer de uma produtividade altíssima!

1. Portuguese (Brazil) Language Pack - Comece com a tranquilidade do seu idioma

Captura de tela da interface do VSCode localizada em português

Para quem é recomendado:

【Minha experiência】Eu tinha alergia a inglês

A primeira barreira ao começar a programar não foi a terminologia técnica, mas o fato de que "tudo era em inglês". Eu entendia mais ou menos File, Edit, Selection... mas quando tentava fazer configurações complexas, meu cérebro simplesmente parava. "E se eu clicar no lugar errado?", eu pensava, com medo de tocar em qualquer coisa. Esta extensão foi a salvadora que aliviou minha ansiedade inicial. Apenas ter os menus em português diminuiu enormemente a barreira psicológica e me fez pensar: "Talvez eu possa me dar bem com o VSCode".

Uso básico

  1. Clique no ícone de quadrados (Exibição de Extensões) no lado esquerdo do VSCode.
  2. Na barra de pesquisa, digite "Portuguese (Brazil) Language Pack".
  3. Clique no botão "Install" da extensão que aparece no topo.
  4. Após a instalação, clique no botão "Change Language and Restart" que aparece no canto inferior direito para reiniciar o VSCode.

E é só isso! A interface do VSCode mudará completamente para português. Fácil, não é? Vamos começar por aqui para nos familiarizarmos com o VSCode.

2. Live Server - A experiência mágica de ver seu código rodar instantaneamente

Para quem é recomendado:

【Minha experiência】Libertação dos dias de apertar F5 sem parar

Quando comecei a aprender HTML, eu mudava um título, salvava o arquivo com Ctrl+S, alternava para o navegador e pressionava F5 para atualizar. Essa tarefa repetitiva era realmente um aborrecimento... Quando chorei para uma IA "Não há um jeito mais fácil?", a primeira recomendação foi o Live Server. No momento em que salvei o código e vi o navegador ao lado se atualizar automaticamente, eu realmente pensei: "Isso é mágica!". Essa experiência de "simplesmente funciona" aumentou exponencialmente minha motivação para aprender a programar.

【Copie e cole para experimentar】Sinta o gosto da mágica

Primeiro, crie um novo arquivo no VSCode e salve-o como index.html. Em seguida, copie e cole o código abaixo. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Teste do Live Server</title>
    <style>
        body {
            display: grid;
            place-content: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #2d2d2d;
            color: #ffffff;
        }
        h1 {
            color: #669df6;
            font-size: 3rem;
        }
    </style>
</head>
<body>
    <h1>Olá, Mundo!</h1>
</body>
</html>

Depois de colar o código, clique com o botão direito no editor e selecione "Open with Live Server" ou clique no botão "Go Live" no canto inferior direito da tela. O navegador abrirá automaticamente e exibirá "Olá, Mundo!".

Em seguida, volte para o VSCode, altere o texto dentro da tag <h1> para algo como "Live Server é Incrível!" e salve o arquivo (Ctrl+S). A exibição no navegador deve mudar instantaneamente, sem que você precise alternar para ele. Esse é o poder do Live Server!

Um ponto a observar

O Live Server funciona quando você tem um arquivo HTML aberto. Note que ele não pode executar programas do lado do servidor, como PHP.

3. Prettier - Code formatter - Código bonito, não importa quem escreva

Para quem é recomendado:

【Minha experiência】Desgastado pela "aparência" do código

Quando comecei a programar, minha indentação era uma bagunça, eu esquecia os pontos e vírgulas ; no final das linhas, e meu código era simplesmente feio e difícil de reler mais tarde. Eu via o código limpo de outras pessoas e ficava desanimado, pensando "Como eles conseguem escrever de forma tão organizada?". O Prettier foi como um cirurgião plástico que me salvou. A forma como ele transforma um código bagunçado em um código bonito em um instante ao salvar é simplesmente espetacular. Fui libertado do estresse de me preocupar com a aparência do código e pude me concentrar na lógica.

【Copie e cole para experimentar】A emoção de um código limpo instantaneamente

Primeiro, instale o Prettier. Em seguida, abra as configurações do VSCode (Ctrl + ,), procure por "Format On Save" e marque a caixa de seleção. Isso fará com que o código seja formatado automaticamente toda vez que você salvar um arquivo.

Agora, vamos experimentar. Crie um novo arquivo script.js e copie e cole o código abaixo, escrito de forma bagunçada de propósito. 

function  ola( nome  ) {
console.log('Olá, '   + nome + '!')
        }
ola( "Mundo" )

Neste estado, salve o arquivo (Ctrl+S). Ele deve ser formatado instantaneamente para o código limpo abaixo. 

function ola(nome) {
  console.log("Olá, " + nome + "!");
}
ola("Mundo");

O Prettier cuida de todas as pequenas regras, como indentação, espaçamento e pontos e vírgulas. Você não precisa mais se preocupar com a aparência do seu código.

4. Auto Rename Tag - Diga adeus a tags de fechamento esquecidas

Para quem é recomendado:

【Minha experiência】A jornada em busca da tag de fechamento

À medida que a estrutura de um site se torna mais complexa, encontrar a tag de fechamento que está dezenas de linhas abaixo se torna uma verdadeira tarefa. "Onde diabos está a tag de fechamento para este <div>?", eu me perguntava, rolando a tela para cima e para baixo, apenas para descobrir que era a tag errada. Quase chorei quando mudei um <h2> para um <h3>, esqueci a tag de fechamento e vi todo o meu layout desmoronar. O Auto Rename Tag é o parceiro perfeito que previne esses erros simples, mas críticos.

【Copie e cole para experimentar】Alteração automática em par

Esta extensão funciona assim que é instalada. Nenhuma configuração especial é necessária. Abra um arquivo como index.html e experimente o código a seguir. 

<div>
    <p>Aqui há muito conteúdo.</p>
    <p>Aqui há muito conteúdo.</p>
    <p>Aqui há muito conteúdo.</p>
</div>

Depois de colar o código, posicione o cursor sobre a tag de abertura <div> e renomeie "div" para "section". Você verá a tag de fechamento </div>, localizada mais abaixo, mudar automaticamente para </section>. Essa pequena automação reduz significativamente o estresse do desenvolvimento.

5. HTML CSS Support - Evite erros de digitação nos nomes das classes CSS

Para quem é recomendado:

【Minha experiência】"Ué, por que meu CSS não está funcionando?" A culpa era sempre de um erro de digitação.

Eu criava um nome de classe longo e legal como .main-contents-wrapper em style.css, mas quando ia usá-lo em index.html, minha memória falhava instantaneamente. "Era contents ou content? Onde ia o hífen?". Acabava tendo que voltar ao arquivo CSS para verificar, e eu estava cansado dessa ida e vinda. 90% das vezes em que meu CSS não se aplicava, era por causa de um erro de digitação no nome da classe. O HTML CSS Support sugere candidatos do seu arquivo CSS à medida que você começa a digitar um nome de classe em HTML, então você não precisa mais memorizar ou verificar os nomes.

【Copie e cole para experimentar】Autocompletar preciso de nomes de classes

Primeiro, crie dois arquivos na sua pasta de projeto: index.html e style.css.

Em style.css, copie e cole o seguinte código. 

.container {
    width: 80%;
    margin: 0 auto;
}

.title-text {
    color: #669df6;
    font-size: 24px;
    border-bottom: 2px solid #5f6368;
}

.description-paragraph {
    line-height: 1.6;
}

Em seguida, em index.html, cole o seguinte código. Neste ponto, a tag div ainda não tem um atributo class. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Teste de Suporte CSS</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="">
        <h1 class="">Título de Teste</h1>
        <p class="">Este é um parágrafo de teste.</p>
    </div>
</body>
</html>

Agora, vamos experimentar. Posicione o cursor entre as aspas de <div class=""> e pressione Ctrl + Espaço (ou apenas comece a digitar uma letra como c ou t). Você deve ver sugestões como .container, .title-text e .description-paragraph aparecerem. Você nunca mais errará um nome de classe.

6. Path Intellisense - Liberte-se do pesadelo dos caminhos de arquivo

Para quem é recomendado:

【Minha experiência】O inferno das imagens quebradas

"Ok, vamos adicionar uma imagem ao site!", eu pensava, escrevia <img src="">, e então o pesadelo começava. Dentro do atributo src, eu me perguntava, é "./images/hero.png", "../images/hero.png" ou "/images/hero.png"? Eu tentava um após o outro, verificava o navegador, via o ícone de imagem quebrada e suspirava. Esta extensão prevê e autocompleta de forma inteligente os nomes de pastas e arquivos enquanto você digita entre as aspas. O tempo que eu desperdiçava com erros de caminho foi para zero.

【Copie e cole para experimentar】Entrada de caminho à prova de falhas

Esta extensão também funciona assim que é instalada. Tente criar a seguinte estrutura de pastas em seu projeto. 

meu-projeto/
├── index.html
├── css/
│   └── style.css
└── images/
    └── logo.png

Abra o arquivo index.html e cole o seguinte código. 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Teste de Caminho</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <img src="" alt="Imagem do Logo">
</body>
</html>

Primeiro, posicione o cursor dentro do href="" da tag <link> e digite "c". A sugestão "css/" deve aparecer imediatamente. Selecione-a e digite /, e agora "style.css" será sugerido.

Em seguida, faça o mesmo dentro do src="" da tag <img>. Digitar "i" sugerirá "images/", permitindo que você insira o caminho correto facilmente.

7. indent-rainbow - Visualize a estrutura aninhada do código com um arco-íris

Para quem é recomendado:

【Minha experiência】Perdido na indentação

Ao escrever HTML e CSS, o aninhamento do código tende a ficar profundo. A indentação era meu único guia, especialmente quando eu não conseguia descobrir onde uma tag de fechamento deveria ir. Mas quando tudo é da mesma cor, é incrivelmente difícil dizer qual bloco é qual. O indent-rainbow adiciona cor às suas indentações com base na profundidade delas, tornando a estrutura do código imediatamente óbvia. Ser capaz de confirmar visualmente que "esta linha roxa corresponde a este bloco" me ajudou a perceber instantaneamente erros de tag de fechamento e de indentação.

【Copie e cole para experimentar】Indentação colorida

Esta extensão funciona assim que é instalada. Tente colar a seguinte estrutura HTML complexa no VSCode. Você verá um mundo de diferença entre como ela fica com e sem o indent-rainbow. 

<div class="container">
    <header>
        <nav>
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Produtos</a>
                    <ul>
                        <li><a href="#">Produto A</a></li>
                        <li><a href="#">Produto B</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <p>Conteúdo</p>
        </section>
    </main>
</div>

Após a instalação, a área de indentação do seu editor deve ser colorida com vermelho, amarelo, azul e roxo, permitindo que você entenda intuitivamente quais blocos estão no mesmo nível.

8. vscode-icons - Identifique os tipos de arquivo de relance

Para quem é recomendado:

【Minha experiência】O pequeno estresse de encontrar arquivos

À medida que os projetos crescem, a lista de arquivos fica cheia de texto com aparência semelhante: index.html, style.css, script.js, package.json, README.md... Era um estresse pequeno, mas constante, ter que escanear a lista toda vez, pensando: "Onde está aquele arquivo JavaScript de novo?". Depois de instalar esta extensão, ícones coloridos e intuitivos apareceram ao lado dos nomes dos arquivos. Com ícones específicos como <> para HTML, # para CSS e JS para JavaScript, eu podia reconhecer instantaneamente os tipos de arquivo por "cor" e "forma", reduzindo drasticamente o tempo gasto procurando por arquivos.

Uso básico

  1. Instale a extensão.
  2. Após a instalação, quando um diálogo aparecer, selecione "VSCode Icons" para ativar o tema de ícones de arquivo.
  3. Se o diálogo não aparecer, abra a Paleta de Comandos com Ctrl + Shift + P, digite "File Icon Theme", selecione-o e escolha VSCode Icons.

Isso é tudo o que é preciso para transformar os ícones de arquivo no explorador da barra lateral em algo rico e fácil de ler. É uma extensão adorável que torna o desenvolvimento diário um pouco mais divertido.

9. Code Spell Checker - Acabe com os erros de digitação vergonhosos

Para quem é recomendado:

【Minha experiência】Um bug causado por... um erro de digitação

Como o inglês não é minha língua nativa, eu frequentemente cometia erros de ortografia nos nomes das minhas variáveis. Por exemplo, uma vez escrevi "mesage" em vez de "message" e passei mais de uma hora me perguntando "por que isso não está funcionando...?". Esta extensão, assim como no Microsoft Word, destaca palavras com erros de ortografia com uma linha ondulada azul. Aquela hora de agonia teria sido resolvida em um segundo se eu a tivesse instalado desde o início. Especialmente ao escrever código que outros verão ou ao trabalhar em equipe, erros de ortografia podem afetar a credibilidade, tornando esta uma extensão essencial.

【Copie e cole para experimentar】Detecte erros instantaneamente

A verificação ortográfica em inglês é ativada apenas com a instalação. Abra um arquivo JavaScript (como script.js) и cole o seguinte código. 

// Esta é uma funcaon para exibir uma mensagen.
function showMesage(text) {
    const defaultMessage = "Hellow World!"; // "Hellow" é um erro de digitação.
    console.log(text || defaultMessage);
}

// Chamando a funcaon.
showMesage("Correct spelling is important.");

Ao colar o código, você deve ver imediatamente linhas onduladas azuis sob palavras com erros de ortografia como funcaon, mensagen, Hellow e Chamando. Passar o mouse sobre a linha ondulada até mesmo sugerirá a ortografia correta. Diga adeus aos erros vergonhosos!

10. GitLens — Git supercharged - Espie o "passado" do seu código

Para quem é recomendado:

【Minha experiência】Uma máquina do tempo para ajudar meu eu do futuro

Depois de adicionar um novo recurso, eu frequentemente olhava para ele um mês depois e não tinha ideia de por que eu escrevi o código daquela maneira. Embora eu pudesse rastreá-lo através do histórico de commits do Git, fazer isso no terminal era um pouco complicado. Com o GitLens, simplesmente posicionar o cursor em qualquer linha de código no VSCode exibe fracamente quem fez o commit, quando e com qual mensagem. É como uma máquina do tempo. Eu posso me lembrar instantaneamente: "Ah, certo, um mês atrás eu adicionei esta linha por este motivo". É um aliado poderoso que ajuda seu eu do futuro em inúmeras situações, seja caçando a causa de um bug ou excluindo código antigo com confiança.

Uso básico

Esta extensão requer que seu projeto seja gerenciado com o Git. Se você nunca usou o Git antes, recomendo aprender o básico primeiro com recursos como o site oficial do Git.

Quando você abre um projeto gerenciado pelo Git no VSCode, o GitLens é ativado automaticamente.

  1. Posicione o cursor em qualquer linha de código. As informações do commit (autor, data, mensagem do commit) para a última alteração naquela linha serão exibidas fracamente no final da linha.
  2. Clique nessas informações do commit para ver os detalhes da alteração.
  3. Um ícone do GitLens também é adicionado à barra lateral, permitindo que você navegue intuitivamente pelo histórico do repositório, compare branches e muito mais, tudo com uma GUI.

Pode parecer um pouco avançado para iniciantes, mas assim que você começar a usar o Git, certamente apreciará o quão inestimável esta extensão é. Mantenha-a em mente como um próximo passo em sua jornada de aprendizado.

Resumo: Extensões são seus melhores parceiros

Hoje, apresentei 10 extensões que venho usando desde que era um iniciante em programação e das quais não consigo mais viver sem.

O VSCode é um excelente editor por si só, mas ao adicionar extensões, você pode evoluí-lo infinitamente para combinar com seu estilo de codificação. Encorajo você a usar as que foram apresentadas aqui como base para construir seu próprio ambiente de desenvolvimento definitivo.

Quando você domina as extensões, a programação se torna uma atividade mais criativa e agradável. Nada me faria mais feliz do que se este artigo desse um forte impulso aos seus primeiros passos como desenvolvedor.

Para o próximo passo

Os menus do seu VSCode ainda estão em inglês? Se você gostaria de aprender mais sobre a localização, que foi a primeira coisa que apresentei, por favor, confira também este artigo. Ele detalha o processo de configuração e outras dicas úteis relacionadas à mudança de idioma.

→ 【Localizar VSCode】Como alterar o idioma do menu e da interface com configurações recomendadas