Configuração do Editor

Um editor configurado adequadamente pode tornar o código mais claro de ler e mais rápido de escrever. Ele pode até ajudá-lo a detectar bugs enquanto você os escreve! Se esta é a primeira vez que você configura um editor ou está procurando ajustar seu editor atual, temos algumas recomendações.

Seu editor

VS Codeé um dos editores mais populares em uso atualmente. Ele possui um grande mercado de extensões e se integra bem com serviços populares como o GitHub. A maioria dos recursos listados abaixo também pode ser adicionada ao VS Code como extensões, tornando-o altamente configurável!

Outros editores de texto populares usados na comunidade React incluem:

• WebStormé um ambiente de desenvolvimento integrado projetado especificamente para JavaScript.
• Sublime Texttem suporte para JSX e TypeScript,realce de sintaxee autocompletar integrados.
• Vimé um editor de texto altamente configurável criado para tornar a criação e alteração de qualquer tipo de texto muito eficiente. Ele é incluído como “vi” na maioria dos sistemas UNIX e no Apple OS X.

Recursos recomendados do editor de texto

Alguns editores vêm com esses recursos integrados, mas outros podem exigir a adição de uma extensão. Verifique qual suporte seu editor de escolha fornece para ter certeza!

Linting

Linters de código encontram problemas em seu código enquanto você escreve, ajudando você a corrigi-los precocemente.ESLinté um linter popular e de código aberto para JavaScript.

• Instale o ESLint com a configuração recomendada para React(certifique-se de ter oNode instalado!)
• Integre o ESLint no VSCode com a extensão oficial

Certifique-se de que habilitou todas as regras doeslint-plugin-react-hookspara seu projeto.Elas são essenciais e detectam os bugs mais graves precocemente. A predefinição recomendadaeslint-config-react-appjá as inclui.

Formatação

A última coisa que você quer fazer ao compartilhar seu código com outro colaborador é entrar em uma discussão sobretabs vs espaços! Felizmente, oPrettierlimpará seu código reformatando-o para seguir regras predefinidas e configuráveis. Execute o Prettier, e todas as suas tabs serão convertidas em espaços—e sua indentação, aspas, etc. também serão alteradas para se adequar à configuração. Na configuração ideal, o Prettier será executado quando você salvar seu arquivo, fazendo essas edições rapidamente para você.

Você pode instalar aextensão Prettier no VSCodeseguindo estas etapas:

1. Inicie o VS Code
2. Use a Abertura Rápida (pressione Ctrl/Cmd+P)
3. Coleext install esbenp.prettier-vscode
4. Pressione Enter

Formatação ao salvar

Idealmente, você deve formatar seu código a cada salvamento. O VS Code tem configurações para isso!

1. No VS Code, pressioneCTRL/CMD + SHIFT + P.
2. Digite "settings"
3. Pressione Enter
4. Na barra de pesquisa, digite "format on save"
5. Certifique-se de que a opção "format on save" está marcada!

Se o seu preset do ESLint tiver regras de formatação, elas podem entrar em conflito com o Prettier. Recomendamos desabilitar todas as regras de formatação no seu preset do ESLint usando oeslint-config-prettierpara que o ESLint seja usadoapenaspara capturar erros lógicos. Se você quiser garantir que os arquivos sejam formatados antes que um pull request seja mesclado, useprettier --checkpara sua integração contínua.