ESLint + regras do React; integração com Prettier
Configure o ESLint com regras do React e integre o Prettier para obter formatação consistente; execute os comandos de verificação e correção.
ESLint + regras do React; integração com Prettier é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 3 aulas no total.
Por que ESLint + Prettier
Objetivo: Detecte problemas no código com ESLint e mantenha o estilo consistente com Prettier.
- ESLint: regras, plug-ins e correção
- Prettier: formatador com regras próprias
- Execute no desenvolvimento e na CI
Instalação e plug-ins
- ESLint: eslint, @typescript-eslint/* (se usar TS), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- Comandos: "lint", "lint:fix", "format"
Demonstração: saída da análise e correções
O ESLint sinaliza problemas; o Prettier corrige o estilo. Compare o código incorreto com o correto e veja uma saída de exemplo.
<div id="root"></div>
Demonstração: simular a formatação com Prettier
Alterne para simular uma execução do Prettier; o código fica formatado de maneira consistente.
<div id="root"></div>
Dicas e comandos de pacote
- Comandos: "lint", "lint:fix", "format"
- Use eslint-config-prettier para desativar regras de estilo
- Ative as regras de react-hooks: exhaustive-deps e rules-of-hooks
Regras do React que você deve conhecer
Regras do React:
- react/jsx-key — adicione key às listas
- react-hooks/rules-of-hooks — chame hooks somente no nível superior
- react-hooks/exhaustive-deps — mantenha corretas as dependências dos efeitos
Funções do ESLint e do Prettier
Recapitulação
Recapitulação: O ESLint encontra problemas; o Prettier faz a formatação. Adicione plug-ins do React e regras para hooks, e configure comandos para analisar, corrigir e formatar.
Aprenda React com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 88
- Aulas
- 324
Perguntas Frequentes
A aula “ESLint + regras do React; integração com Prettier” é grátis?
Sim — o texto completo de “ESLint + regras do React; integração com Prettier” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 3 aulas no total.
O que vou aprender em “ESLint + regras do React; integração com Prettier”?
Configure o ESLint com regras do React e integre o Prettier para obter formatação consistente; execute os comandos de verificação e correção. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.
Quanto tempo leva a aula “ESLint + regras do React; integração com Prettier”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- ESLint + regras do React; integração com Prettier
- Nomenclatura de arquivos, limites de componentes e nomes de props
- Variáveis de ambiente e organização da configuração