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

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!"

Oldest comments (0)