Como configurar o VSCode para seus projetos de React
Tags: programming, vscode, react, braziliandevs
Published: 2024-07-16 19:50:15

_**Nota:** apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo._

A ferramenta definitiva que você tem ao desenvolver seus projetos é o editor de código. É por isso que é tão importante configurá-lo corretamente.

Neste guia passo a passo, passaremos de uma instalação completamente nova do VSCode a um editor de código perfeitamente preparado para seu próximo projeto React.

Vamos começar!

## Como instalar o VSCode

A primeira etapa para configurar o Visual Studio Code (abreviado como VSCode) é instalá-lo em seu computador.

Acesse [code.visualstudio.com](https://code.visualstudio.com/) e baixe a versão correta para o seu computador (é 100% gratuita).

![installing the editor](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.08.06-AM.png "installing the editor")
_Instale a versão correta para o seu sistema operacional_

Assim que a instalação for concluída e você abrir o VSCode app, você será saudado com uma tela inicial parecida com esta:

![vscode initial page](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.19.32-AM.png "vscode initial page")
_Tela inicial do VSCode (após a instalação)_

## Escolha uma color theme que você goste

Embora o theme default fornecido com o VSCode seja muito bonito e legível, prefiro usar um theme de terceiros que considero mais agradável aos meus olhos.

Pode parecer algo trivial perder tempo escolhendo um theme. Mas como você passará horas lendo textos em seu editor, você deve escolher cores que goste e que não cansem seus olhos.

Eu pessoalmente uso e recomendo fortemente o Material Theme para todas as minhas instalações do VSCode.

Para instalar o Material Theme, acesse (na parte superior da tela):

**View &gt; Extensions** (ou use o atalho `⇧ + ⌘ (Ctrl) + X`)

Em seguida, pesquise "Material Theme" na barra lateral e instale o primeiro resultado que aparecer.

Deveria ficar assim:

![vscode extensions section](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.36.24-AM.png "vscode extensions section")

Depois de instalado, você terá um dropdown para escolher entre várias variantes diferentes.

A opção default é ótima, mas pessoalmente considero a variante "`Material Theme Ocean High Contrast`" a mais bonita.

![Material Theme Ocean High Contrast](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.37.38-AM.png "Material Theme Ocean High Contrast")

Agora é um bom momento para adicionar algumas configurações básicas que tornem o código que você escreve confortável de ler.

As configurações que melhorarão a legibilidade do seu código são o font size, o tab size e o font family.

Você pode alterar suas preferências de VSCode acessando (na parte superior da tela):

**Code &gt; Preferences &gt; Settings** (ou use o atalho: `⌘ (Ctrl) + ,`)

As configurações que achei mais confortáveis ​​ao longo dos anos para o desenvolvimento de desktops e laptops são o font size como 18 e o tab size como 2.

![vscode settings commonly used](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.27.06-AM.png "vscode settings commonly used")

Além disso, para deixar seu texto perfeito, acho que o texto fica melhor quando você aumenta o zoom level default do editor.

Para aumentar o zoom level, vá em _preferences_ (`⌘ (Ctrl) + ,`) e digite "zoom level".

Eu recomendo alterar o zoom level de 0 para 1.

E, finalmente, por uma questão de preferência, gosto de remover os breadcrumb links default que estão na parte superior do editor.

Você pode remover breadcrumbs acessando:

**View &gt; Show Breadcrumbs** (e certificando-se de que esteja desmarcado).

Esta é a aparência do nosso editor de código com um arquivo de component de exemplo que adicionei ao meu Desktop:

![vscode component screen](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.49.42-AM.png "vscode component screen")

## Formate seu código com a Prettier extension

Você deve ter notado no exemplo acima que o código não está muito bem formatado.

Felizmente, você pode formatar automaticamente cada arquivo `.js` escrito usando a Prettier extension para VSCode.

Para poder formatar instantaneamente nosso código sempre que salvarmos um arquivo `.js`, podemos ir novamente para a extensions tab (`⇧ + ⌘ (Ctrl) + X`), digitar "**prettier**" e instalá-lo:

![vscode prettier plugin screen](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.51.35-AM.png "vscode prettier plugin screen")

A seguir, podemos voltar às _preferences_ (`⌘ (Ctrl) + ,`) e procurar por "format on save" e verificar se está marcado:

![Format on Save setting](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.53.36-AM.png "Format on Save setting")

E novamente em _preferences_, procure a configuração "**default formatter**" e defina isso como `Prettier`.

![Default formatter setting](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.55.30-AM.png "Default formatter setting")

Agora, se voltarmos para um arquivo não formatado e clicarmos em salvar, ele será formatado instantaneamente para nós!

Esta é a aparência do nosso component fictício depois que clicamos em salvar:

![Formatted React component com Prettier](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-10.57.23-AM.png "Formatted React component com Prettier")

Confira a documentação da Prettier extension para ver como você pode configurá-la ainda mais de acordo com suas preferências de formatação. Ainda assim, eu pessoalmente recomendo usar as opções default.

## Como digitar JSX rapidamente com Emmet

VSCode vem com suporte integrado para uma ferramenta incrível chamada **Emmet**, que permite escrever tags HTML muito rapidamente.

No entanto, Emmet não está configurado por default para ser usado com JSX, que o React usa em vez de HTML.

Para escrever seu JSX mais rapidamente, você pode usar Emmet com React acessando:

**Code &gt; Preferences &gt; Settings** (`⌘ (Ctrl) + ,`)

E então digite na barra de pesquisa, "**emmet include languages**".

Depois disso, clique no button "Add Item" e adicione a seguinte configuração:

`item: javascript, value: javascriptreact` (e então clique em ok)

Sua configuração adicionada deve ficar assim:

![Emmet Include Languages setting](https://www.freecodecamp.org/news/content/images/size/w1000/2022/02/Screen-Shot-2022-02-17-at-11.10.32-AM.png "Emmet Include Languages setting")

Agora que incluímos o React como linguagem para o Emmet, podemos começar a escrever nosso JSX muito mais rapidamente.

## Fonte

[Artigo](https://www.freecodecamp.org/news/vscode-react-setup/?fbclid=IwZXh0bgNhZW0CMTEAAR0Q5COZUpdwRtjMYeZNitUsMq1dn2uGqfTbt3pin8QRxTgETHKCubpjnvE_aem_o59ADGrIqoaQSDsoJwxeog) escrito por **Reed Barger**.