Écosystème et outils¶

L'écosystème de développement JavaScript et TypeScript est l'un des plus riches et des plus actifs. Ce chapitre couvre les IDEs, les linters et formatters, la vérification de types, les debuggers, les profilers et les gestionnaires de version de Node.js.

IDEs et éditeurs¶

Visual Studio Code¶

VS Code est l'éditeur de référence pour JavaScript et TypeScript — il est développé par Microsoft, les mêmes auteurs que TypeScript. Le support TypeScript est intégré nativement sans extension.

// .vscode/settings.json — Configuration recommandee pour JS/TS
{
  // Formatage automatique a la sauvegarde
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",

  // Utiliser le TypeScript du projet (pas celui de VS Code)
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,

  // Validation
  "typescript.validate.enable": true,
  "javascript.validate.enable": true,

  // Imports automatiques et organisation
  "editor.codeActionsOnSave": {
    "source.addMissingImports": "explicit",
    "source.organizeImports": "explicit",
    "source.fixAll.biome": "explicit"
  },

  // Inlay hints — affiche les types inferres dans le code
  "typescript.inlayHints.parameterNames.enabled": "literals",
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true
}

// .vscode/extensions.json — Extensions recommandees pour l'equipe
{
  "recommendations": [
    "biomejs.biome",          // Linter + formatter ultra-rapide
    "prisma.prisma",          // Coloration syntaxique schema.prisma
    "bradlc.vscode-tailwindcss", // Autocomplete Tailwind
    "formulahendry.auto-rename-tag", // Renommage automatique balises HTML/JSX
    "ms-vscode.vscode-typescript-next" // TypeScript nightly pour les nouvelles features
  ]
}

WebStorm / IntelliJ¶

JetBrains WebStorm offre une expérience similaire avec une analyse de code plus poussee (refactoring sur le projet entier, détection de code mort cross-fichiers). Il inclut un debugger intégré, un client HTTP et un terminal.

Avantages sur VS Code :

Navigation de code plus intelligente dans les grands projets
Refactoring cross-fichiers sans plugin
Debugger avec breakpoints conditionnels sans configuration

Linters et formatters¶

ESLint v9 — flat config¶

ESLint v9 introduit le nouveau système de configuration "flat" qui remplacé .eslintrc.*.

// eslint.config.js — ESLint v9 avec flat config
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import reactPlugin from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';

export default tseslint.config(
  // Configuration de base JavaScript
  js.configs.recommended,

  // Configuration TypeScript stricte
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,

  // Configuration projet TypeScript pour les regles type-aware
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },

  // Regles React (optionnel pour les projets React)
  {
    plugins: {
      react: reactPlugin,
      'react-hooks': reactHooks,
    },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'react/react-in-jsx-scope': 'off', // Plus necessaire avec React 17+
    },
    settings: { react: { version: 'detect' } },
  },

  // Regles personnalisees
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'error',
      '@typescript-eslint/consistent-type-imports': 'error',
      'no-console': ['warn', { allow: ['warn', 'error'] }],
    },
  },

  // Fichiers a ignorer
  {
    ignores: ['dist/**', 'node_modules/**', '*.config.js'],
  },
);

Prettier¶

Prettier est un formateur de code opinionated qui impose un style uniforme.

// .prettierrc — Configuration Prettier
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Biome — remplacé ESLint + Prettier¶

Biome est un outil tout-en-un écrit en Rust qui combine linter et formatter avec des performances 10-100x supérieures.

// biome.json — Configuration Biome
{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": { "enabled": true },

  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "error",
        "useExhaustiveDependencies": "warn"
      },
      "suspicious": {
        "noExplicitAny": "error",
        "noConsoleLog": "warn"
      },
      "style": {
        "useConst": "error",
        "useTemplate": "warn"
      }
    }
  },

  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },

  "javascript": {
    "formatter": {
      "semicolons": "always",
      "quoteStyle": "single",
      "trailingCommas": "all"
    }
  },

  "files": {
    "ignore": ["dist/**", "node_modules/**"]
  }
}

# Commandes Biome
biome check src/          # lint + format check
biome check --write src/  # lint + format (applique les corrections)
biome format --write src/ # format uniquement
biome lint src/           # lint uniquement

Biome ou ESLint+Prettier ?

Biome pour les nouveaux projets : configuration simple, performances, zero config. ESLint+Prettier pour les projets existants avec des règles personnalisees avancees — la migration peut être complexe et certaines règles ESLint n'ont pas d'équivalent Biome.

Vérification de types¶

tsc en mode check¶

# Verification de types sans emission de fichiers
npx tsc --noEmit

# Verification en mode watch (re-check a chaque changement)
npx tsc --noEmit --watch

# Check avec un tsconfig specifique
npx tsc --noEmit -p tsconfig.strict.json

@ts-check dans les fichiers JavaScript¶

// fichier.js — TypeScript via JSDoc sans migration
// @ts-check

/**
 * @param {string} name
 * @param {number} age
 * @returns {{ greeting: string; isAdult: boolean }}
 */
function createProfile(name, age) {
  return {
    greeting: `Bonjour ${name}`,
    isAdult: age >= 18,
  };
}

// TypeScript signale une erreur ici :
createProfile('Alice', 'vingt'); // Argument de type string attendu number

Debuggers¶

Chrome DevTools¶

Le debugger intégré dans Chrome est suffisant pour la plupart des cas frontend.

// Breakpoint programmatique dans le code
debugger; // s'arrete ici quand les DevTools sont ouverts

// Source maps : configurer dans tsconfig.json
// "sourceMap": true
// Permet de debugger le TypeScript original dans Chrome

VS Code Debugger¶

// .vscode/launch.json — Configurations de debug
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Node.js (tsx)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "tsx",
      "args": ["src/server.ts"],
      "env": { "NODE_ENV": "development" },
      "sourceMaps": true,
      "console": "integratedTerminal"
    },
    {
      "name": "Debug Tests Vitest",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/vitest",
      "args": ["run", "--reporter=verbose"],
      "console": "integratedTerminal",
      "sourceMaps": true
    },
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

ndb — Node.js Debugger avance¶

# Installation globale
npm install -g ndb

# Lance l'application avec une interface DevTools complete
ndb node dist/server.js
ndb npm run dev

Profilers¶

Lighthouse¶

Lighthouse audite les performances, l'accessibilite et les bonnes pratiques des applications web.

# CLI Lighthouse
npm install -g lighthouse

# Audit complet
lighthouse https://monapp.com --output html --output-path ./rapport.html

# Audit uniquement les performances
lighthouse https://monapp.com --only-categories=performance --output json

clinic.js — Profiling Node.js¶

# Installation
npm install -g clinic

# Doctor : detecte automatiquement les problemes de performance
clinic doctor -- node dist/server.js

# Flame : flamegraph CPU pour identifier les goulots d'etranglement
clinic flame -- node dist/server.js

# Bubbleprof : visualise les operations asynchrones
clinic bubbleprof -- node dist/server.js

0x — Flamegraph interactif¶

npm install -g 0x

# Genere un flamegraph interactif
0x dist/server.js

# Avec un script de charge
0x dist/server.js & sleep 3 && ab -n 1000 -c 10 http://localhost:3000/items

Gestionnaires de version Node.js¶

Outil	Langage	Vitesse	Shell	Points forts
nvm	bash	Lente	bash/zsh	Standard, très documentes
fnm	Rust	Rapide	Multi	Rapide, compatible nvm, Windows natif
volta	Rust	Rapide	Multi	Version par projet via package.json
mise	Rust	Rapide	Multi	Multi-langage (Node, Python, Go...), .tool-versions

fnm — Fast Node Manager¶

# Installation (Linux/Mac)
curl -fsSL https://fnm.vercel.app/install | bash

# Windows (PowerShell)
winget install Schniz.fnm

# Commandes courantes
fnm install 22          # installe Node.js 22 LTS
fnm use 22              # utilise Node.js 22 dans le shell
fnm default 22          # version par defaut pour les nouveaux shells

# Fichier .node-version ou .nvmrc par projet
echo "22" > .node-version
fnm use                 # detecte automatiquement la version du projet

volta — version par projet¶

# Installation
curl https://get.volta.sh | bash

# Attache une version Node.js au projet (ecrit dans package.json)
volta pin node@22
volta pin npm@10

# package.json apres volta pin :
# "volta": {
#   "node": "22.11.0",
#   "npm": "10.9.0"
# }
# Tout collaborateur avec volta aura automatiquement la meme version

mise — gestionnaire multi-outils¶

# Installation
curl https://mise.run | sh

# .tool-versions (compatible asdf)
# node 22.11.0
# pnpm 9.12.0

# Commandes
mise install            # installe les versions definies dans .tool-versions
mise use node@22        # change la version locale
mise use -g node@22     # change la version globale

Choisir son gestionnaire

mise si vous gerez plusieurs langages (Node, Python, Go, Ruby) dans un seul workflow
volta pour les projets en équipe : la version est fixee dans package.json, pas de .nvmrc a maintenir
fnm pour les utilisateurs nvm qui veulent juste plus de vitesse