Tooling Moderne

1 Vite — le bundler moderne

Vite remplace Webpack/Parcel/CRA. Il est ultra-rapide (dev server < 500ms).

# Créer un projet Vite (vanilla JS)
npm create vite@latest mon-projet -- --template vanilla
cd mon-projet
npm install
npm run dev     # démarre http://localhost:5173

# Templates disponibles
# --template vanilla
# --template react
# --template vue
# --template svelte

Structure d'un projet Vite :

mon-projet/
├── index.html        ← point d'entrée
├── main.js           ← JS principal (peut faire import/export ES6)
├── style.css
├── package.json
└── vite.config.js    ← configuration optionnelle

Commandes :

npm run dev     # dev server avec HMR (Hot Module Replacement)
npm run build   # compile pour la production → dist/
npm run preview # prévisualise le build de prod

Import de fichiers CSS, images, JSON :

import './style.css';                     // CSS global
import logo from './assets/logo.png';     // image → URL
import data from './data.json';           // JSON → objet JS (import direct)

2 ESLint — analyseur de code statique

ESLint trouve les erreurs avant l'exécution et impose un style cohérent.

npm install -D eslint @eslint/js
npx eslint --init   # configuration guidée

Fichier eslint.config.js (flat config, moderne) :

import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    rules: {
      'no-unused-vars':  'error',   // variable déclarée mais pas utilisée
      'no-console':      'warn',    // console.log en prod → warning
      'eqeqeq':          'error',   // interdit == (oblige ===)
      'prefer-const':    'error',   // oblige const si pas de réassignation
      'no-var':          'error',   // interdit var
      'arrow-parens':    ['error', 'always'],
    },
  },
];

npx eslint src/           # analyser le dossier src
npx eslint src/ --fix     # corriger automatiquement ce qui peut l'être

3 Prettier — formatage automatique

ESLint = trouver les bugs. Prettier = formater le code. Ils se complètent.

npm install -D prettier

Fichier .prettierrc :

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always"
}

npx prettier --write src/     # formate tous les fichiers
npx prettier --check src/     # vérifie sans modifier (pour CI)

VS Code : formater à la sauvegarde — dans .vscode/settings.json :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4 npm scripts avancés

{
  "scripts": {
    "dev":      "vite",
    "build":    "vite build",
    "preview":  "vite preview",
    "test":     "vitest",
    "lint":     "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "format":   "prettier --write src/",
    "check":    "eslint src/ && prettier --check src/",
    "prepare":  "npm run lint && npm run test && npm run build"
  }
}

npm run prepare  # vérifie tout avant un déploiement

5 Variables d'environnement avec Vite

# Fichier .env (ne jamais committer !)
VITE_API_URL=https://api.example.com
VITE_APP_NAME=Mon App

// Dans le code (seulement les vars VITE_ sont exposées)
const apiUrl = import.meta.env.VITE_API_URL;
const isDev  = import.meta.env.DEV;   // true en dev
const isProd = import.meta.env.PROD;  // true en prod

# Ne JAMAIS mettre de secrets dans VITE_ (ils sont dans le bundle JS client)
VITE_SECRET_KEY=abc123  # ❌ visible par tous
# Les secrets (clés API privées) = backend uniquement

6 Deploy sur GitHub Pages

// vite.config.js
export default {
  base: '/nom-du-repo/',  // important pour GitHub Pages
}

{
  "scripts": {
    "deploy": "npm run build && gh-pages -d dist"
  }
}

npm install -D gh-pages
npm run deploy  # pousse le dossier dist/ sur la branche gh-pages

Setup d'un projet pro en 5 minutes

npm create vite@latest mon-app -- --template vanilla
cd mon-app
npm install
npm install -D vitest eslint @eslint/js prettier
# → crée eslint.config.js, .prettierrc, vitest.config.js
npm run dev