Configuração do Editor

Seu editor

VS Code é um dos editores mais populares em uso hoje. Possui uma grande variedade de extensões e se integra bem a serviços populares como o GitHub. A maioria dos recursos listados abaixo também podem ser adicionados 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 Text tem suporte para JSX e TypeScript, realce de sintaxes e preenchimento automático embutidos.
• Vim é um editor de texto altamente configurável construído para tornar a criação e alteração de qualquer tipo de texto muito eficiente. Está incluído como “vi” na maioria dos sistemas UNIX e no Apple OS X.

Recursos recomendados dos editores de texto

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

Linting

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

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

Certifique-se de ter ativado as regras eslint-plugin-react-hooks para o seu projeto. Elas são essenciais e detectam os bugs mais severos cedo. A predefinição eslint-config-react-app recomendada já as inclui.

Formatação

A última coisa que você quer fazer ao compartilhar seu código com outro colaborador é entrar em uma discussão sobre tabs versus espaços! Felizmente, Prettier limpará seu código reformatando-o para estar em conformidade com regras predefinidas e configuráveis. Execute o Prettier e todas as suas guias serão convertidas em espaços - e seu recuo, aspas, etc. também serão alterados 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 a extensão Prettier no VSCode seguindo estas etapas:

1. Inicie o VSCode
2. Abra Ir para Arquivo… (pressione Ctrl/Cmd+P)
3. Cole ext install esbenp.prettier-vscode
4. Pressione Enter

Formatando ao salvar

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

1. No VS Code, pressione CTRL/CMD + SHIFT + P.
2. Digite “configurações”
3. Pressione Enter
4. Na barra de pesquisa, digite “formatar ao salvar”
5. Se assegure de que a opção “formatar ao salvar” está selecionada!

Se sua predefinição ESLint tiver regras de formatação, elas podem entrar em conflito com o Prettier. Recomendamos desativar todas as regras de formatação em sua predefinição ESLint usando eslint-config-prettier para que o ESLint seja apenas usado para detectar erros lógicos. Se você deseja impor que os arquivos sejam formatados antes que uma solicitação pull seja mesclada, use prettier --check para sua integração contínua.