tsconfig.json sans le mémento sur un second écran
Tout projet TypeScript commence par un tsconfig.json, et tout développeur a un jour copié l'un d'eux d'une réponse Stack Overflow aléatoire, pour finir avec une erreur de build deux jours plus tard. Il y a environ 150 options de compilateur, et la doc se lit comme un formulaire fiscal.
Ce builder vous permet de partir d'un preset qui reflète le template officiel pour votre stack : Next.js, Vite (React), une bibliothèque npm publiable, ou une API Node. Chaque option apparaît comme un Switch ou dropdown avec un indice en clair qui explique ce qu'elle fait vraiment, pas juste ce que son nom dit.
Le panneau d'aperçu en direct à droite affiche le JSON résultant, prêt à copier ou télécharger. Activez un interrupteur, voyez le JSON changer dans la même seconde. Pas de devinettes, pas de "ai-je sauvegardé ?", pas de second onglet ouvert sur le handbook TypeScript.
Comment l'utiliser
- Choisissez un preset qui correspond à votre projet. Next.js pour une app Next 14+ typique, Vite (React) pour une app Vite moderne, bibliothèque npm si vous publiez un paquet, API Node pour un service backend simple. Choisissez Custom si vous voulez une toile vierge.
- Parcourez la section Required basics : target, module, moduleResolution et strict. Ces quatre décident de 80 % de ce que fait votre tsconfig. L'indice sous chacune dit quand choisir quoi.
- Si strict est activé, la section Strict mode s'ouvre avec sept sous-options. Chacune attrape une classe différente de bugs. L'indice explique quel genre d'erreurs chacune signale.
- Dans Modules and imports, activez esModuleInterop (presque toujours voulu), resolveJsonModule si vous importez des fichiers `.json`, et forceConsistentCasingInFileNames pour les équipes multi-plateformes.
- Dans Output, définissez outDir (où va le JS compilé) et activez declaration si vous livrez des fichiers de types, sourceMap pour le débogage navigateur, incremental pour rendre les rebuilds plus rapides.
- Dans JSX, choisissez react-jsx pour React 17+, preserve quand un bundler gère le JSX (Next, Vite). Laissez sur `(none)` pour un backend.
- Dans Path aliases, définissez baseUrl (généralement `.`) et ajoutez des alias comme `@/*` → `./src/*`. Cliquez sur Add alias pour mapper un autre nom court. Remove supprime une ligne.
- À droite, l'aperçu tsconfig.json se met à jour pendant que vous éditez. Cliquez sur Copy pour le mettre dans le presse-papiers ou Download file pour l'enregistrer comme un vrai `tsconfig.json`.
Quand c'est utile
Six situations réelles où un tsconfig en un clic gagne :
- Démarrer un nouveau projet. Vous voulez une config qui "marche juste" sans passer une heure à lire la doc TypeScript. Choisissez un preset, copiez la sortie, terminé en 60 secondes.
- Migrer un projet vers le mode strict. Votre codebase est sur `strict: false` et vous voulez augmenter la sécurité d'un flag à la fois. Activez-les un par un, voyez le JSON, recollez-le dans votre repo.
- Publier votre premier paquet npm. Il vous faut `declaration: true`, `isolatedModules`, un `outDir`, pas de DOM dans le tableau lib. Le preset npm library le fait pour vous, pas besoin de deviner si vous avez oublié quelque chose.
- Ajouter des alias de chemin. Vous voulez `@/components/Button` au lieu de `../../../components/Button`. Le builder affiche la bonne forme de l'objet paths, au lieu que vous essayiez de vous souvenir si c'est un tableau ou un objet.
- Comparer des presets. Vous n'êtes pas sûr si votre stack devrait être sur NodeNext ou Bundler comme résolution de module. Cliquez entre les presets et voyez comment le JSON diffère.
- Onboarder un nouveau développeur. Chaque option a un indice, donc un junior peut lire ce que noUncheckedIndexedAccess fait vraiment au lieu de fixer la doc.