Introdução ao VSCode e extensões para alunos de front-end
Tags: vscode, webdev, beginners
Published: 2023-08-24 15:07:23



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](https://code.visualstudio.com/docs/editor/intellisense))

Gostou? Veja mais em [IntelliSense na Documentação do VSCode](https://code.visualstudio.com/docs/editor/intellisense).

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrvb6dn6r0wb89yfws53.png)
Figura 1. Piada sobre o Google Chrome. Fonte: [Tecmundo](https://www.tecmundo.com.br/software/211458-google-chrome-usa-tanta-memoria.htm)

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](https://code.visualstudio.com/download). Alternativamente, você pode usar a versão web em [vscode.dev](https://vscode.dev). A tela de inicialização do **VSCode** é mostrada na Figura 2.

![Tela de inicialização do VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hr20kogiidyg7uoycm1.png)
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**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server), 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](https://raw.githubusercontent.com/microsoft/vscode-livepreview/main/img/open-preview-btn.gif)
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**](https://marketplace.visualstudio.com/items?itemName=jerrygoyal.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v0p0oh1cwr9l86hpn3w.png)
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**](https://marketplace.visualstudio.com/items?itemName=vincaslt.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.](https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)
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**](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) 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.](https://i.imgur.com/5crMfTj.gif)
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**](https://marketplace.visualstudio.com/items?itemName=anteprimorac.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.](https://github.com/anteprimorac/vscode-html-end-tag-labels/raw/HEAD/images/screenshot-1.png)
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**](https://marketplace.visualstudio.com/items?itemName=oderwat.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.](https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png)
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**](https://marketplace.visualstudio.com/items?itemName=naumovs.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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0evh52s3je60rm9tg6kz.png)
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**](https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.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.](https://github.com/mvdschee/web-accessibility/raw/master/web-accessibility.gif)
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**](https://marketplace.visualstudio.com/items?itemName=usernamehw.vscode-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.](https://raw.githubusercontent.com/usernamehw/vscode-error-lens/master/img/demo.png)
**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**](https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar) 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.](https://github.com/RoscoP/ActiveFileInStatusBar/raw/master/media/ActiveFileInStatusBar.gif)
**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**](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) permite gerenciar seus projetos diretamente na interface do VSCode. (Veja a **Figura 12**).

![**Figura 12**. Meus projetos no Project Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed8rav045drmm71kb6jq.png)
**Figura 12**. Meus projetos no Project Manager.

#### 12. **VSCode Highlight Matching Tag**

A extensão [**VSCode Highlight Matching Tag**](https://marketplace.visualstudio.com/items?itemName=vincaslt.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.](https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)
**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**](https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import) 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.](https://media.giphy.com/media/l1J9FmoFwrcqr538Y/giphy.gif)
**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**](https://marketplace.visualstudio.com/items?itemName=AkankshaSingh872.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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wa5qnqtcj4c6f6r0i13u.png)
**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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

#### 17. Stylelint

Existe um analisador de código estático para CSS chamado [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-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](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next) permite o uso da versão mais recente do JavaScript (JS) e TypeScript (TS).

#### 19. **Template String Converter**

A extensão [**Template String Converter**](https://marketplace.visualstudio.com/items?itemName=meganrogge.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**](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter) 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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5z475eo7mf3z2mby0j6e.png)
**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**](https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade) 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.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2959o0xvo96kbf34h0jd.png)
**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!"