DEV Community

Cover image for Introdução ao VSCode e extensões para alunos de front-end
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on

1

Introdução ao VSCode e extensões para alunos de front-end

No cenário de desenvolvimento web em 2023, não há ferramenta mais aclamada do que o VSCode. No entanto, se você é um iniciante, talvez ainda não o conheça.

O desenvolvimento de software exige um editor poderoso com recursos de destaque de código, completude de código, verificação de código, suporte para quase todas as linguagens e muito mais.

Atualmente, o VSCode é a escolha preferida para quase todo o desenvolvimento web.

O que é o VSCode?

VSCode é a abreviação para Visual Studio Code, um editor de código fonte desenvolvido pela Microsoft em 2015. É amplamente utilizado por desenvolvedores de software para escrever, depurar e editar código em várias linguagens de programação. O VSCode é conhecido por sua interface leve, extensibilidade e integração com diversas ferramentas e extensões, o que o torna uma escolha popular para programadores que trabalham em uma variedade de projetos. Sua versão mais recente foi lançada em julho de 2023 com o número de versão 1.81.

Por que Usar o VSCode?

A principal vantagem desse editor de código é sua capacidade extensível. Existem extensões para quase todos os propósitos do desenvolvimento de software.

Outra grande vantagem é a habilidade de customizar várias configurações do editor.

Além disso, o VSCode é um excelente editor para diversas linguagens, como JavaScript, Python, Java, C#, HTML, CSS e muitas outras.

Outra vantagem é a função de IntelliSense no editor. Essa função é incrível porque ela permite que você:

  • Autocompletação: O IntelliSense sugere automaticamente palavras, variáveis, funções e métodos enquanto você digita, economizando tempo e reduzindo erros de digitação.
  • Sugestões de Métodos e Propriedades: Ele exibe opções disponíveis para métodos e propriedades de objetos, facilitando a descoberta de funcionalidades.
  • Detecção de Erros em Tempo Real: O IntelliSense pode destacar erros de sintaxe e problemas relacionados a tipos à medida que você escreve, ajudando a identificar problemas antes de executar o código.
  • Documentação Integrada: Informações sobre parâmetros de função, descrições de método e exemplos podem ser exibidos diretamente no editor, auxiliando na compreensão de APIs.
  • Exploração Rápida de APIs: O IntelliSense permite que você explore rapidamente bibliotecas e frameworks, oferecendo insights sobre recursos disponíveis enquanto você digita.
  • Produtividade Aprimorada: Ao acelerar a escrita de código e fornecer insights contextuais, o IntelliSense aumenta a produtividade do desenvolvedor.
  • Redução de Erros: Ao fornecer sugestões precisas e informações úteis, o IntelliSense ajuda a evitar erros comuns e a melhorar a qualidade do código.

IntelliSense é um termo geral para diversos recursos de edição de código, incluindo completude de código, informações de parâmetros, informações rápidas e listas de membros. Os recursos do IntelliSense às vezes são chamados por outros nomes, como "completude de código", "assistência de conteúdo" e "dica de código". (Fonte: Microsoft)

Gostou? Veja mais em IntelliSense na Documentação do VSCode.

Mas isso não é tudo.

Este editor de código é open-source, completamente gratuito, multiplataforma (funciona no Windows, Linux e Mac). Ele oferece suporte a múltiplas linguagens (você pode trabalhar em Português, Inglês, Espanhol ou qualquer outro idioma) e é leve (utiliza recursos de hardware mínimos, exceto memória RAM).

Desvantagens do VSCode

A desvantagem mais notável é o consumo de memória RAM, principalmente se você instalar muitas extensões. No entanto, esse problema é causado pela base Electron. Electron é um framework usado para criar aplicativos de desktop usando tecnologias web, semelhante a um navegador, assim como a reputação do Google Chrome. (Veja a Figura 1).

Piada sobre o Google Chrome
Figura 1. Piada sobre o Google Chrome. Fonte: Tecmundo

Pessoalmente, eu prefiro desenvolver apenas em tecnologias front-end usando o VSCode, mas isso é uma preferência pessoal.

Instalação

O VSCode pode ser baixado na Página de Download do VSCode. Alternativamente, você pode usar a versão web em vscode.dev. A tela de inicialização do VSCode é mostrada na Figura 2.

Tela de inicialização do VSCode
Figura 2. Tela de inicialização do VSCode.

Extensões para Engenheiros de Front-End

Eu dividi esta seção em três partes: extremamente essenciais, essenciais e não essenciais. Sinta-se à vontade para instalar apenas as extensões extremamente essenciais no primeiro momento.

Extensões Extremamente Essenciais

1. Live Preview

O campeão entre as extensões do VSCode é o Live Preview, pois essa extensão permite a visualização do seu código web, incluindo HTML, CSS, JavaScript e mais.

Para usar essa extensão, instale-a e, em seguida, crie um arquivo HTML. Um ícone aparecerá no canto superior direito do VSCode. (Veja a Figura 3).

Figura 3. Extensão Live Preview. Fonte: Marketplace do VSCode
Figura 3. Extensão Live Preview. Fonte: Marketplace do VSCode.

2. Shortcut Menu Bar

É possível expandir a barra de menu do VSCode com funcionalidades úteis usando a extensão Shortcut Menu Bar. Eu recomendo os seguintes menus:

  • Beautify: Corrige a indentação do código
  • Compare with save: Mostra as diferenças entre o estado atual do arquivo e o estado salvo anteriormente.
  • New file: Cria um novo arquivo
  • Toggle Terminal: Abre e fecha o terminal

Para personalizar essa extensão, acesse as Preferências/Configurações do VSCode, em seguida, procure por Shortcut Menu Bar na seção de extensões. (Veja a Figura 4).

Figura 4. Minha barra de menu com a extensão Shortcut Menu Bar
Figura 4. Minha barra de menu com a extensão Shortcut Menu Bar.

3. Highlight Matching Tag

Similar à nossa recomendação anterior (Etiquetas de Fim de Tag HTML), a extensão Highlight Matching Tag destaca tanto as tags de fechamento quanto as de abertura de elementos/componentes. (Veja a Figura 4).

Figura 4. Captura de tela da extensão Highlight Matching Tag. Fonte: Marketplace do VSCode.
Figura 4. Captura de tela da extensão Highlight Matching Tag. Fonte: Marketplace do VSCode.

4. IntelliSense para Nomes de Classes CSS em HTML

Ao desenvolver em HTML ou linguagens similares como JSX (como ReactJS), é comum usar classes e frameworks CSS com várias classes. Para auxiliar nisso, a extensão IntelliSense para Nomes de Classes CSS em HTML oferece auto-completar para classes em seu código HTML. (Veja a Figura 5).

Figura 5. Captura de tela da extensão IntelliSense para Nomes de Classes CSS em HTML. Fonte: Marketplace do VSCode.
Figura 5. Captura de tela da extensão IntelliSense para Nomes de Classes CSS em HTML. Fonte: Marketplace do VSCode.

Extensões Essenciais

5. HTML End Tag Labels

Ao trabalhar com HTML ou JSX (HTML em JS, comum no ReactJS), muitas vezes é desafiador determinar onde uma tag de elemento termina. A extensão HTML End Tag Labels exibe a classe de cada tag de fechamento de elemento. (Veja a Figura 6).

Figura 6. Captura de tela da extensão HTML End Tag Labels. Fonte: Marketplace do VSCode.
Figura 6. Captura de tela da extensão HTML End Tag Labels. Fonte: Marketplace do VSCode.

Recomenda-se alterar a cor da extensão para #555 ou outra cor que complemente seu tema.

6. Indent-rainbow

Outra extensão que você deve considerar usar é a Indent-rainbow. Esta extensão colore a indentação do código para qualquer linguagem. (Veja a Figura 7).

Figura 7. Captura de tela da extensão Indent-rainbow. Fonte: Marketplace do VSCode.
Figura 7. Captura de tela da extensão Indent-rainbow. Fonte: Marketplace do VSCode.

7. Color Highlight

Uma extensão útil para cores em HTML, CSS e outras linguagens é Color Highlight. Com esta extensão, todas as cores, seja em texto simples (como azul, vermelho), hexadecimal (como #ccc) ou RGB/RGBA (como RGB(200, 100, 80)), aparecerão coloridas com a cor correspondente. (Veja a Figura 8).

Figura 8. Captura de tela da extensão Color Highlight.
Figura 8. Captura de tela da extensão Color Highlight.

8. Web Accessibility

A Acessibilidade na Web garante que os sites sejam utilizáveis por pessoas com deficiência. Apesar de essencial, iniciantes podem negligenciar isso. A extensão Web Accessibility ajuda a desenvolver sites acessíveis e entender as diretrizes WCAG. (Veja a Figura 9).

Figura 9. Captura de tela da extensão Web Accessibility. Fonte: Marketplace do VSCode.
Figura 9. Captura de tela da extensão Web Accessibility. Fonte: Marketplace do VSCode.

Extensões Não Essenciais

9. Error Lens

A extensão Error Lens apresenta erros de código com cores e os destaca ao lado do código incorreto, auxiliando os desenvolvedores com uma melhor visibilidade. (Veja a Figura 10).

**Figura 10**. Captura de tela da extensão Error Lens. Fonte: Marketplace do VSCode.
Figura 10. Captura de tela da extensão Error Lens. Fonte: Marketplace do VSCode.

10. Active File In Status Bar

Para projetos com muitos arquivos que possuem o mesmo nome, mas estão em diretórios diferentes, a extensão Active File In Status Bar exibe o caminho completo do arquivo atualmente editado na barra de status. (Veja a Figura 11).

**Figura 11**. Captura de tela da extensão Active File In Status Bar. Fonte: Marketplace do VSCode.
Figura 11. Captura de tela da extensão Active File In Status Bar. Fonte: Marketplace do VSCode.

11. Project Manager

A extensão Project Manager permite gerenciar seus projetos diretamente na interface do VSCode. (Veja a Figura 12).

**Figura 12**. Meus projetos no Project Manager
Figura 12. Meus projetos no Project Manager.

12. VSCode Highlight Matching Tag

A extensão VSCode Highlight Matching Tag realça as tags de abertura e fechamento correspondentes, facilitando a identificação de pares de tags. (Veja a Figura 13).

**Figura 13**. Captura de tela da extensão VSCode Highlight Matching Tag. Fonte: Marketplace do VSCode.
Figura 13. Captura de tela da extensão VSCode Highlight Matching Tag. Fonte: Marketplace do VSCode.

13. Auto Import - ES6, TS, JSX, TSX (Extensão VSCode)

A extensão Auto Import - ES6, TS, JSX, TSX encontra, analisa e oferece ações de código e conclusão de código para importações em arquivos JavaScript e TypeScript. (Veja a Figura 14).

**Figura 14**. Captura de tela da extensão Auto Import - ES6, TS, JSX, TSX (Extensão VSCode). Fonte: Marketplace do VSCode.
Figura 14. Captura de tela da extensão Auto Import - ES6, TS, JSX, TSX (Extensão VSCode). Fonte: Marketplace do VSCode.

14. Case Change

A extensão Case Change facilita a alteração da caixa das variáveis dentro do seu código. (Veja a Figura 15).

**Figura 15**. Captura de tela da extensão Case Change. Fonte: Marketplace do VSCode.
Figura 15. Captura de tela da extensão Case Change. Fonte: Marketplace do VSCode.

15. ESLint

Se você deseja se tornar um desenvolvedor Front-end, é muito importante saber o que é o ESLint. Ele é um analisador de código estático para manter o seu código dentro de um padrão. Esta extensão integra o ESLint ao VSCode.

16. Prettier

O Prettier é um formatador de código para todas as linguagens e é interessante utilizá-lo em seus projetos. Para integrá-lo ao VSCode, utilize a extensão Prettier.

17. Stylelint

Existe um analisador de código estático para CSS chamado Stylelint. Se você precisa integrar o Stylelint e o VSCode, instale esta extensão.

18. JavaScript and TypeScript Nightly

Esta extensão da Microsoft chamada JavaScript and TypeScript Nightly permite o uso da versão mais recente do JavaScript (JS) e TypeScript (TS).

19. Template String Converter

A extensão Template String Converter auxilia na conversão de strings JavaScript para literais de template, um recurso introduzido no ECMAScript 2015 (ES6).

20. TypeScript Importer

A extensão TypeScript Importer fornece auto-completar para importações em arquivos TypeScript. (Veja a Figura 16).

**Figura 16**. Captura de tela da extensão TypeScript Importer. Fonte: Marketplace do VSCode.
Figura 16. Captura de tela da extensão TypeScript Importer. Fonte: Marketplace do VSCode.

21. Atualização do Package Json

A extensão Atualização do Package Json ajuda você a identificar as atualizações de pacotes em seu arquivo package.json. (Veja a Figura 17).

**Figura 17**. Captura de tela da extensão Atualização do Package Json. Fonte: Marketplace do VSCode.
Figura 17. Captura de tela da extensão Atualização do Package Json. Fonte: Marketplace do VSCode.

Vamos Além

Nos próximos artigos, você mergulhará no mundo do HTML. Até breve!"

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more