Configuration de Prettier et ESLint
Ajoutez Prettier pour le formatage automatique et ESLint pour détecter les erreurs, configurez les deux outils et intégrez-les à un flux de travail qui formate lors de l’enregistrement.
Configuration de Prettier et ESLint est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi automatiser le style du code ?
Les discussions sur le formatage manuel du code font perdre du temps à l’équipe. Prettier formate automatiquement le code selon un style cohérent. ESLint détecte les bogues et impose les bonnes pratiques. Ensemble, ces outils éliminent toute une catégorie de remarques lors des révisions de code.
Installer Prettier
Installez Prettier comme dépendance de développement, créez un fichier de configuration et ajoutez un script de formatage à package.json. Prettier fonctionne sans configuration — ses valeurs par défaut sont raisonnables — mais vous pouvez les personnaliser.
npm install --save-dev prettier
# .prettierrc (optional config)
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}Intégration de Prettier dans VSCode
Installez l’extension Prettier - Code Formatter. Définissez-la ensuite comme formateur par défaut et activez formatOnSave dans les paramètres. Prettier s’exécute alors chaque fois que vous enregistrez un fichier.
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}Installer ESLint
Installez ESLint et initialisez-le avec npm init @eslint/config. Cet assistant vous aide à choisir votre environnement (navigateur ou Node), votre système de modules et la prise en charge de TypeScript. Il génère un fichier eslint.config.js.
npm install --save-dev eslint
npx eslint --init
# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.jsExemple de configuration ESLint
Voici une configuration plate ESLint simple pour un projet JavaScript destiné au navigateur. Les règles peuvent être définies sur « error », « warn » ou « off ». Étendez des configurations partagées comme @eslint/js recommended pour disposer d’une base solide.
// eslint.config.js
import js from '@eslint/js';
export default [
js.configs.recommended,
{
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
'eqeqeq': 'error'
}
}
];ESLint pour TypeScript
Pour les projets TypeScript, ajoutez typescript-eslint afin de détecter les problèmes propres à TypeScript : utilisation dangereuse de any, types de retour manquants et Promises mal utilisées.
npm install --save-dev typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
...tseslint.configs.recommended
);Prettier et ESLint ensemble
ESLint possède certaines règles de formatage qui entrent en conflit avec Prettier. Utilisez eslint-config-prettier pour les désactiver, afin que Prettier gère tout le formatage et qu’ESLint se concentre uniquement sur la qualité du code.
npm install --save-dev eslint-config-prettier
// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
js.configs.recommended,
prettierConfig // disables ESLint formatting rules
];.eslintignore et .prettierignore
Indiquez aux outils quels fichiers ignorer. Le fichier .eslintignore utilise la syntaxe de gitignore. Vous voudrez généralement ignorer node_modules, dist et les fichiers générés.
# .eslintignore
node_modules
dist
.next
coverageScripts npm pour l’analyse du code
Ajoutez des scripts d’analyse et de formatage à package.json afin que l’intégration continue et les membres de l’équipe puissent les exécuter de manière cohérente.
{
"scripts": {
"lint": "eslint src --ext .js,.ts,.tsx",
"lint:fix": "eslint src --fix",
"format": "prettier --write src",
"format:check": "prettier --check src"
}
}lint-staged et husky pour les actions avant validation
Utilisez husky + lint-staged pour analyser et formater automatiquement uniquement les fichiers indexés avant chaque validation Git. Cela empêche du code mal formaté ou défectueux d’arriver dans le dépôt.
npm install --save-dev husky lint-staged
npx husky init
# package.json:
"lint-staged": {
"*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,json,md}": "prettier --write"
}EditorConfig pour une cohérence de base
Un fichier .editorconfig impose des paramètres d’éditeur de base (style d’indentation, fins de ligne) dans tous les éditeurs et environnements de développement, quels que soient les modules installés. Ajoutez-le à côté de Prettier.
# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = trueVérification rapide
Pourquoi faut-il ajouter eslint-config-prettier à une configuration ESLint qui utilise également Prettier ?
Récapitulatif : Prettier et ESLint
Prettier formate automatiquement le code lors de l’enregistrement grâce à l’extension VSCode. ESLint détecte les bogues et les violations de style. Utilisez eslint-config-prettier pour éviter les conflits. Ajoutez lint-staged + husky pour imposer les contrôles avant validation. Des outils cohérents éliminent les discussions sur le formatage et détectent les bogues avant la mise en production.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Configuration de Prettier et ESLint » est-elle gratuite ?
Oui — le texte complet de « Configuration de Prettier et ESLint » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configuration de Prettier et ESLint » ?
Ajoutez Prettier pour le formatage automatique et ESLint pour détecter les erreurs, configurez les deux outils et intégrez-les à un flux de travail qui formate lors de l’enregistrement. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 3 sur 4.
Combien de temps prend la leçon « Configuration de Prettier et ESLint » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Chrome DevTools : Elements, Console, Network
- VSCode : extensions, Emmet et raccourcis
- Configuration de Prettier et ESLint
- Compatibilité des navigateurs et caniuse.com