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 e baixe a versão correta para o seu computador (é 100% gratuita).

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:

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 > 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:

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.

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 > Preferences > 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.

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 > 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:

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:

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

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

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:

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 > Preferences > 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:

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

Fonte

Artigo escrito por Reed Barger.