# Mini-Projet Module 11 — Setup Complet d'un Projet Pro

## Objectif

Créer un projet Vite from scratch avec ESLint + Prettier + Vitest configurés.
À la fin tu auras un template que tu peux réutiliser pour tes projets futurs.

## Étapes

### 1. Créer le projet

```bash
npm create vite@latest mon-app-pro -- --template vanilla
cd mon-app-pro
npm install
```

### 2. Installer les outils

```bash
npm install -D vitest @vitest/ui @vitest/coverage-v8
npm install -D eslint @eslint/js
npm install -D prettier
npm install -D gh-pages
```

### 3. Configurer ESLint

Crée `eslint.config.js` :

```js
import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    rules: {
      'no-unused-vars':  'error',
      'eqeqeq':          'error',
      'prefer-const':    'error',
      'no-var':          'error',
      'no-console':      'warn',
    },
  },
];
```

### 4. Configurer Prettier

Crée `.prettierrc` :

```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}
```

### 5. Configurer Vitest

Crée `vitest.config.js` :

```js
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    coverage: {
      reporter: ['text', 'html'],
      exclude: ['node_modules/', 'dist/'],
    },
  },
});
```

### 6. Mettre à jour package.json

```json
{
  "scripts": {
    "dev":      "vite",
    "build":    "vite build",
    "preview":  "vite preview",
    "test":     "vitest",
    "test:ui":  "vitest --ui",
    "coverage": "vitest run --coverage",
    "lint":     "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "format":   "prettier --write src/",
    "deploy":   "npm run build && gh-pages -d dist"
  }
}
```

### 7. Configurer VS Code

Crée `.vscode/settings.json` :

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

### 8. Créer .gitignore

```
node_modules/
dist/
.env
.env.local
coverage/
```

### 9. Tester que tout fonctionne

```bash
npm run dev       # http://localhost:5173
npm test          # tests
npm run lint      # analyse ESLint
npm run format    # formatage Prettier
npm run build     # build de prod → dist/
```

### 10. Structure finale

```
mon-app-pro/
├── .vscode/
│   └── settings.json
├── src/
│   ├── main.js
│   ├── utils.js
│   └── utils.test.js
├── index.html
├── .gitignore
├── .prettierrc
├── eslint.config.js
├── vitest.config.js
├── package.json
└── vite.config.js
```

## Ce que tu dois faire

1. Suis les étapes ci-dessus
2. Écris 3 fonctions dans `src/utils.js`
3. Écris leurs tests dans `src/utils.test.js`
4. Lance `npm test` — tout doit passer
5. Lance `npm run lint` — 0 erreur
6. Lance `npm run build` — succès

**Félicitations — tu as un setup pro que 90% des devs junior n'ont pas.**