ComeOnOliver/skillshub

Pratiques de codage

Organisation du code

• Responsabilité unique : Chaque fichier source doit avoir un champ d'application / objectif clair et ciblé
• Diviser les gros fichiers : Fractionner les fichiers lorsqu'ils deviennent volumineux ou gèrent trop de préoccupations
• Séparation des types : Toujours séparer les types et les interfaces dans types.ts ou types/*.ts
• Extraction des constantes : Déplacer les constantes vers un fichier dédié constants.ts

Environnement d'exécution

• Préférer le code isomorphe : Écrire du code agnostique vis-à-vis de l'environnement d'exécution qui fonctionne dans Node, le navigateur et les workers chaque fois que possible
• Indicateurs d'environnement clairs : Lorsque le code est spécifique à un environnement, ajouter un commentaire en haut du fichier :

// @env node
// @env browser

TypeScript

• Types de retour explicites : Déclarer les types de retour explicitement lorsque c'est possible
• Éviter les types en ligne complexes : Extraire les types complexes dans des déclarations type ou interface dédiées

Commentaires

• Éviter les commentaires inutiles : Le code doit être explicite
• Expliquer le "pourquoi" pas le "comment" : Les commentaires doivent décrire le raisonnement ou l'intention, pas ce que fait le code

Tests (Vitest)

• Fichiers de test : foo.ts → foo.test.ts (même répertoire)
• Utiliser l'API describe/it (pas test)
• Utiliser toMatchSnapshot pour les sorties complexes
• Utiliser toMatchFileSnapshot avec un chemin explicite pour les instantanés spécifiques à une langue

---

Choix d'outillage

Commandes @antfu/ni

Commande	Description
ni	Installer les dépendances
ni <pkg> / ni -D <pkg>	Ajouter une dépendance / dépendance de développement
nr <script>	Exécuter un script
nu	Mettre à jour les dépendances
nun <pkg>	Désinstaller une dépendance
nci	Installation propre (pnpm i --frozen-lockfile)
nlx <pkg>	Exécuter un paquet (npx)

Configuration TypeScript

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Configuration ESLint

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

Lors de l'exécution des tâches, exécutez pnpm run lint --fix pour formater le code et corriger le style de codage.

Pour les options de configuration détaillées : antfu-eslint-config

Hooks Git

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

Catalogues pnpm

Utiliser des catalogues nommés dans pnpm-workspace.yaml pour la gestion des versions :

Catalogue	Objectif
prod	Dépendances de production
inlined	Dépendances intégrées au bundler
dev	Outils de développement (linter, bundler, tests)
frontend	Bibliothèques frontend

Évitez le catalogue par défaut. Les noms des catalogues peuvent être ajustés selon les besoins du projet.

---

Références

Sujet	Description	Référence
Configuration ESLint	Support des frameworks, formateurs, surcharges de règles, paramètres VS Code	antfu-eslint-config
Configuration du projet	.gitignore, GitHub Actions, extensions VS Code	setting-up
Développement d'applications	Conventions et modèles Vue/Nuxt/UnoCSS	app-development
Développement de bibliothèques	Empaquetage tsdown, publication ESM pur	library-development
Monorepo	Espaces de travail pnpm, alias centralisé, Turborepo	monorepo