Configuração do Editor

Um editor configurado corretamente pode tornar o código mais claro para ler e mais rápido para escrever. Ele pode até mesmo ajudá-lo a detectar erros ao escrevê-los! Se esta é a primeira vez que você configura um editor ou deseja ajustar seu editor atual, temos algumas recomendações.

Você aprenderá

  • Quais são os editores mais populares
  • Como formatar seu código automaticamente

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.

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.

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.