ESLint et règles React ; intégration de Prettier
Configurez ESLint avec les règles React et intégrez Prettier pour un formatage cohérent ; exécutez les commandes de vérification et de correction.
ESLint et règles React ; intégration de Prettier est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Pourquoi ESLint et Prettier
Objectif : Détectez les problèmes de code avec ESLint et gardez un style cohérent avec Prettier.
- ESLint : règles, extensions, corrections
- Prettier : formateur prescriptif
- Exécutez-les en développement et dans la CI
Installation et extensions
- ESLint : eslint, @typescript-eslint/* (si vous utilisez TS), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier : prettier, eslint-config-prettier
- Scripts : "lint", "lint:fix", "format"
Démo : résultats et corrections de l’analyse statique
ESLint signale les problèmes ; Prettier corrige le style. Comparez le mauvais résultat au bon et examinez un exemple de sortie.
<div id="root"></div>
Démo : simuler le formatage par Prettier
Activez la bascule pour simuler une exécution de Prettier ; le code est alors formaté de manière cohérente.
<div id="root"></div>
Conseils et scripts de paquet
- Scripts : "lint", "lint:fix", "format"
- Utilisez eslint-config-prettier pour désactiver les règles de style
- Activez les règles react-hooks : exhaustive-deps et rules-of-hooks
Règles React à connaître
Règles React :
- react/jsx-key — ajoutez key dans les listes
- react-hooks/rules-of-hooks — appelez les hooks uniquement au niveau supérieur
- react-hooks/exhaustive-deps — gardez les dépendances des effets correctes
Rôles d’ESLint et de Prettier
Récapitulatif
Récapitulatif : ESLint détecte les problèmes ; Prettier formate le code. Ajoutez les extensions React et les règles des hooks, puis reliez les scripts à l’analyse, à la correction et au formatage.
Questions Fréquemment Posées
La leçon « ESLint et règles React ; intégration de Prettier » est-elle gratuite ?
Oui — le texte complet de « ESLint et règles React ; intégration de Prettier » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « ESLint et règles React ; intégration de Prettier » ?
Configurez ESLint avec les règles React et intégrez Prettier pour un formatage cohérent ; exécutez les commandes de vérification et de correction. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « ESLint et règles React ; intégration de Prettier » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- ESLint et règles React ; intégration de Prettier
- Nommage des fichiers, frontières des composants et nommage des propriétés
- Variables d’environnement et organisation de la configuration