Exercice — Configurer son environnement de productivité

Mettez en place Prettier, ESLint flat config et un test Vitest pour automatiser la qualité au quotidien.

Objectif : partir d'un projet vide et y installer Prettier + ESLint, créer les fichiers de configuration, ajouter un test Vitest et régler VS Code pour formater/lint à la sauvegarde.

1. Linter + formater

Ajoutez eslint.config.js (flat config) + .prettierrc, et branchez les scripts lint / format dans package.json.

2. Tester

Ajoutez un test Vitest minimal sur le TaskService et le script test.

3. Déboguer puis committer

Créez .vscode/launch.json pour lancer l'API en mode debug, puis git switch -c session-11 et committez.

L'exercice générique ci-dessous reste l'évaluation de cette séance : il couple Prettier + ESLint, ajoute un test et règle VS Code.

Créez un projet Node, installez prettier, eslint, @eslint/js et vitest, ajoutez .prettierrc et eslint.config.js, puis configurez VS Code (settings.json) pour exécuter le formatage et les corrections ESLint à la sauvegarde.

Étapes pas à pas

1. Installer les outils

Installez prettier, eslint, @eslint/js et vitest avec npm install -D prettier eslint @eslint/js vitest.

2. Configurer les scripts

Ajoutez lint, format et test dans package.json.

3. Ajouter les fichiers de config

Créez .prettierrc et eslint.config.js avec le format flat config.

4. Vérifier avec un test

Écrivez un test Vitest minimal sur le TaskService, puis lancez npm test.

Proposition de solution

// package.json (extrait)
{
  "type": "module",
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write .",
    "test": "vitest run"
  }
}

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "printWidth": 80
}

// eslint.config.js
import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    files: ["**/*.js"],
    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
    },
    rules: {
      "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    },
  },
];

// src/task-service.test.js
import { describe, expect, it } from "vitest";
import { TaskService } from "./task-service.js";

describe("TaskService", () => {
  it("ajoute une tâche dans la liste", () => {
    const service = new TaskService();

    service.add({ id: 1, title: "Configurer ESLint", done: false });

    expect(service.list()).toEqual([
      { id: 1, title: "Configurer ESLint", done: false },
    ]);
  });
});

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Si votre TaskService n'expose pas exactement add() et list(), gardez la même idée : le test doit vérifier un comportement observable, pas seulement que le fichier s'exécute.

Conseils

Préférez -D (devDependency) pour ces outils.
formatOnSave + source.fixAll.eslint évite les oublis de style.
Un .prettierignore exclut node_modules, dist et build.
Pour un projet TypeScript, ajoutez ensuite typescript-eslint à la flat config.

⚠️ Pièges à éviter

Prettier vs ESLint en conflit : laissez le style à Prettier et la logique à ESLint. Utilisez eslint-config-prettier si des règles de formatage se chevauchent.

Pas de test réel : un script vitest vide ne valide rien. Vérifiez au moins une méthode métier du service.

Pas de config partagée : sans .prettierrc et eslint.config.js commités, chaque membre de l'équipe travaille différemment. Versionnez-les.

Critères de réussite

prettier, eslint, @eslint/js et vitest en devDependency.
.prettierrc et eslint.config.js présents et commités.
VS Code configuré pour formater + lint à la sauvegarde.
Un fichier de test Vitest valide un comportement du TaskService.

Pour aller plus loin

Relisez Productivité et Qualité avant le quiz.

Tooling

Terminez le quiz du chapitre pour le marquer comme complété.

Tableau de bord