Outils de Développement Web : Éditeurs, DevTools et Productivité

Éditeurs de Code

VS Code : L'éditeur de code le plus populaire. Écosystème d'extensions étendu, IntelliSense, debugging, intégration Git. Gratuit et open source.

WebStorm : IDE de JetBrains. Refactoring avancé, analyse de code, support de frameworks. Payant.

Sublime Text : Léger et rapide. Interface minimaliste. Ouvre les gros fichiers rapidement.

Vim/Neovim : Éditeur basé sur le terminal. Piloté par clavier, hautement personnalisable. Courbe d'apprentissage raide.

Critères de sélection : VS Code pour les débutants. WebStorm pour l'enterprise. Sublime Text pour les minimalistes. Vim pour les amoureux du terminal.

DevTools du Navigateur

Elements/Inspector : Inspectez le DOM et le CSS. Testez les changements de style en direct. Box model, layout, computed styles.

Console : Affichez les erreurs JavaScript et les logs. REPL interactif. Accès aux éléments DOM.

Network : Surveillez les requêtes HTTP. Graphique waterfall, timing, headers, payload. Détectez les goulots d'étranglement de performance.

Performance : Profiling CPU, mémoire, rendering. Flame chart, long tasks, layout shifts. Mesure des Core Web Vitals.

Application : Storage (cookies, localStorage, IndexedDB), Service Worker, Cache, Manifest. Debugging PWA.

Lighthouse : Audit Performance, Accessibility, Best Practices, SEO. Score et recommandations pour chaque page.

Outils de Terminal

Git : Contrôle de version. Branch, merge, rebase, stash. Gestion des PR avec GitHub CLI (gh).

npm/yarn/pnpm : Gestionnaire de packages. Gestion des dépendances, exécution de scripts, workspace.

Docker : Conteneurisation. docker build, docker run, docker compose. Environnement de développement local.

curl/wget : Requêtes HTTP. Tests d'API, téléchargement de fichiers. curl -X POST -H 'Content-Type: application/json' -d '{...}' url.

jq : Processeur JSON. Parse et filtre JSON dans le terminal. curl ... | jq '.data'.

fzf : Fuzzy finder. Recherche de fichiers, historique, processus. Augmente la productivité du terminal.

Outils de Productivité

Postman/Insomnia : Tests et documentation d'API. Collection, environment, test script. Collaboration d'équipe.

Figma : Design UI/UX. Bibliothèque de composants, prototypage, dev mode (export CSS).

Extensions Chrome : React DevTools, Vue DevTools, Redux DevTools, axe (accessibilité).

Grammarly : Vérification d'orthographe et de grammaire. Pour les articles de blog et la documentation.

Notion/Obsidian : Prise de notes et gestion des connaissances. Documentation, wiki, suivi des tâches.

Outils de Qualité de Code

ESLint : Linting JavaScript/TypeScript. Standards de code, détection d'erreurs. Règles et plugins personnalisés.

Prettier : Formatage de code. Indentation automatique, style de guillemets, point-virgule. Format on save.

TypeScript : Vérification de types statique. Détection d'erreurs à la compilation. Autocomplétion IDE.

Husky + lint-staged : Hooks de pre-commit. Vérification de lint et format avant le commit. Intégré dans le pipeline CI/CD.

SonarQube : Analyse de qualité de code. Détection de bugs, vulnérabilités, code smells. Quality gates.

Conseils de Productivité du Développeur

Raccourcis clavier : Apprenez les raccourcis de l'éditeur et du navigateur. Minimisez l'utilisation de la souris.

Snippets : Sauvegardez les fragments de code fréquemment utilisés. Snippets VS Code, Emmet.

Aliases : Définissez des aliases de terminal. alias gs='git status', alias dc='docker compose'.

Dotfiles : Gérez les fichiers de configuration (bashrc, vimrc, gitconfig) avec Git. Configuration rapide sur une nouvelle machine.

Apprentissage : Dev.to, Hacker News, CSS-Tricks, Smashing Magazine. Apprentissage continu et rester à jour.