2. Linter & Prettier

Pourquoi utiliser un linter et un formatter ?

Dans un projet professionnel, il est essentiel que le code soit cohérent et lisible par tous les membres de l'équipe. Sans outils, chaque développeur peut avoir son propre style :

// Développeur 1
const user = { name: 'Alice', age: 25 }
if (user.age >= 18) console.log('Majeur')

// Développeur 2
const user = {
  name: 'Alice',
  age: 25,
}

if (user.age >= 18) {
  console.log('Majeur')
}

Problèmes :

• Perte de temps à débattre du style
• Code difficile à lire et à maintenir
• Revues de code focalisées sur le style plutôt que la logique

Solution : utiliser un linter (ESLint) et un formatter (Prettier).

ESLint

ESLint est un outil qui analyse votre code pour détecter :

• Les erreurs potentielles
• Les mauvaises pratiques
• Les violations de règles de style

Installation

npm install -D eslint @eslint/js typescript-eslint

Configuration

Créez un fichier eslint.config.mjs à la racine de votre projet :

import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      // Vos règles personnalisées
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
      'no-console': 'warn',
    },
  },
)

Ajoutez un script dans votre package.json :

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

Exécutez le linter :

# Analyser le code
npm run lint

# Corriger automatiquement les erreurs
npm run lint:fix

Exemple d'erreurs détectées

// Variable non utilisée
const unusedVariable = 'hello'

// Any interdit
function test(param: any) {
  return param
}

// Console.log en production
console.log('Debug info')

ESLint vous signalera ces problèmes avant même d'exécuter le code.

Prettier

Prettier est un outil qui formate automatiquement votre code selon des règles strictes. Il gère :

• L'indentation
• Les espaces
• Les guillemets
• Les points-virgules
• Les retours à la ligne

Installation

npm install -D prettier

Configuration

Créez un fichier prettier.config.js à la racine de votre projet :

export default {
  singleQuote: true,
  trailingComma: 'all',
  semi: false,
  printWidth: 80,
  tabWidth: 2,
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'lf',
}

Explication des options :

• singleQuote: Utiliser des guillemets simples (true) ou doubles (false)
• trailingComma: Virgule finale ("none", "es5", "all")
• semi: Ajouter des points-virgules (true ou false)
• printWidth: Longueur maximale d'une ligne
• tabWidth: Nombre d'espaces pour l'indentation
• bracketSpacing: Espaces entre les accolades
• bracketSameLine: Mettre la balise de fermeture sur la même ligne
• arrowParens: Parenthèses autour des paramètres de fonction fléchée
• endOfLine: Type de saut de ligne ("lf", "crlf", "cr", "auto")

Ajoutez des scripts dans votre package.json :

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Exécutez Prettier :

# Formater tous les fichiers
npm run format

# Vérifier le formatage sans modifier
npm run format:check

Avant :

const user = { name: 'Alice', age: 25, email: 'alice@example.com' }
function greet(name: string) {
  return `Hello, ${name}!`
}
if (user.age >= 18) {
  console.log('Majeur')
}

Après :

const user = { name: 'Alice', age: 25, email: 'alice@example.com' }

function greet(name: string) {
  return `Hello, ${name}!`
}

if (user.age >= 18) {
  console.log('Majeur')
}

Ignorer certains fichiers

Créez un fichier .prettierignore :

node_modules
dist
build
coverage
.env

Intégration ESLint + Prettier

ESLint et Prettier peuvent entrer en conflit (ESLint vérifie le style, Prettier le formate). Pour éviter cela, nous devons désactiver les règles de style d'ESLint.

Installation

npm install -D eslint-config-prettier eslint-plugin-prettier

Configuration

Modifiez votre eslint.config.mjs :

import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  eslintPluginPrettier,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
      'prettier/prettier': 'error',
    },
  },
)

Maintenant, ESLint utilisera les règles de Prettier et signalera les erreurs de formatage.

Automatisation avec un éditeur

Visual Studio Code

Installez les extensions :

• ESLint : dbaeumer.vscode-eslint
• Prettier : esbenp.prettier-vscode

Ajoutez dans votre .vscode/settings.json :

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Votre code sera automatiquement formaté et corrigé à chaque sauvegarde ! 🎉

WebStorm

WebStorm intègre ESLint et Prettier nativement.

Allez dans Preferences > Languages & Frameworks > JavaScript > Code Quality Tools pour configurer ESLint et Prettier. Assurez-vous d'activer Run for files pour ESLint et de cocher On save pour Prettier.

Résumé

Outil	Rôle	Commande
ESLint	Détecte les erreurs et mauvaises pratiques	npm run lint
Prettier	Formate le code automatiquement	npm run format