Analyse du code avec ESLint ; formatage avec Prettier
Détectez les problèmes courants avec ESLint et formatez automatiquement avec Prettier. Gardez des configurations minimales et lancez-les avec des scripts npm
Analyse du code avec ESLint ; formatage avec Prettier est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 3 leçons au total.
Pourquoi vérifier et formater le code ?
Objectif : garder un code propre et cohérent.
- ESLint → détecte les problèmes
- Prettier → formate le code
- Configurations minimales ; exécutez-les via les scripts npm
- Paramètres par défaut adaptés aux débutants
ESLint : détecter les problèmes
ESLint applique des règles pour détecter les erreurs et améliorer le style ; ici, nous reproduisons quelques vérifications simples.
// Tiny "lint" demo: simple checks on a string of code
const sample = "const x=1; console.log(x)";
function lint(code) {
const issues = [];
if (code.includes("console.log")) {
issues.push("no-console: avoid console.log in production code");
}
if (code.includes("=1;")) {
issues.push("spacing: add spaces around = for readability");
}
if (!code.trim().endsWith(";")) {
issues.push("semi: missing semicolon");
}
return issues;
}
console.log("lint issues:", lint(sample));
Prettier : une mise en page cohérente
Prettier se concentre sur le formatage automatique, afin que tout le monde utilise la même mise en page sans débat.
// Tiny "format" demo: normalize spaces and add semicolon
function format(code) {
// Very naive formatting just for demo
const spaced = code.replaceAll("=1;", " = 1;");
const withSemi = spaced.trim().endsWith(";") ? spaced.trim() : spaced.trim() + ";";
return withSemi;
}
const ugly = "const x=1\nconsole.log( x )";
console.log("formatted:", format(ugly));
Configuration ESLint minimale
Commencez avec eslint:recommended, puis ajoutez une ou deux règles. Gardez la configuration réduite pour les débutants.
// Example .eslintrc.json (printed lines)
const eslintrc = [
"{",
" \"env\": { \"es2022\": true, \"node\": true },",
" \"extends\": [\"eslint:recommended\"],",
" \"rules\": {",
" \"no-console\": \"warn\",",
" \"semi\": [\"error\", \"always\"]",
" }",
"}"
];
for (const l of eslintrc) console.log(l);
Prettier minimal et scripts
Ajoutez des scripts simples format et lint afin que l’équipe puisse les exécuter facilement.
// Example .prettierrc (printed lines)
const prettierrc = [
"{",
" \"semi\": true,",
" \"singleQuote\": true,",
" \"tabWidth\": 2",
"}"
];
for (const l of prettierrc) console.log(l);
// Example npm scripts (printed)
const scripts = [
"\"scripts\": {",
" \"lint\": \"eslint .\",",
" \"format\": \"prettier --write .\"",
"}"
];
for (const l of scripts) console.log(l);
Flux de travail quotidien
Conseils :
- Exécutez format avant les validations.
- Gardez peu de règles ESLint, et rendez-les claires.
- Utilisez eslint:recommended et un petit fichier .prettierrc.
- Ajoutez un script raccourci comme npm run fix pour la correction automatique.
Quiz : Prettier ou ESLint
Vérification rapide : outil de formatage.
Récapitulatif
Récapitulatif : utilisez ESLint pour détecter les problèmes et Prettier pour formater le code. Gardez les configurations minimales et exécutez les deux via les scripts npm pour un flux de travail d’équipe fluide.
Questions Fréquemment Posées
La leçon « Analyse du code avec ESLint ; formatage avec Prettier » est-elle gratuite ?
Oui — le texte complet de « Analyse du code avec ESLint ; formatage avec 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Analyse du code avec ESLint ; formatage avec Prettier » ?
Détectez les problèmes courants avec ESLint et formatez automatiquement avec Prettier. Gardez des configurations minimales et lancez-les avec des scripts npm Tu pratiques JavaScript 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 JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript 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 2 sur 3.
Combien de temps prend la leçon « Analyse du code avec ESLint ; formatage avec 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 JavaScript Academy ?
Oui. Chaque leçon JavaScript 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
- État d’esprit des tests — petites assertions, AAA, rouge→vert→refactorisation
- Analyse du code avec ESLint ; formatage avec Prettier
- Notions de base de l’intégration continue — lint et tests à chaque envoi