🕸️ WebStorm – IDE JavaScript, TypeScript & Frameworks

C'est le débat principal dans l'écosystème JS. Le choix dépend de la philosophie (IDE vs Éditeur).

En résumé : WebStorm est un "tank" qui brille par son refactoring sécurisé et son intégration "zéro-config". VS Code est plus léger, gratuit, et incroyablement populaire, mais demande plus de configuration manuelle.

WebStorm s'intègre profondément avec package.json et vos gestionnaires de paquets (npm, yarn, pnpm).

C'est une des forces de WebStorm : l'intégration "zéro-config" des outils de qualité de code.

ESLint / Stylelint

Si WebStorm détecte eslint (ou stylelint pour CSS) dans votre package.json, il l'active automatiquement.

• Analyse "on-the-fly" : Les erreurs ESLint apparaissent dans l'éditeur (soulignées).
• Alt+Entrée : Propose de corriger l'erreur (ex: "Fix ESLint problem").
• Configuration : (Settings > Languages & Frameworks > ESLint) pour configurer l'auto-fix au sauvegardage.

Prettier

L'intégration de Prettier (formateur de code) est également automatique.

• Détecte .prettierrc.
• Permet de reformater le code (Ctrl+Alt+L) en utilisant les règles de Prettier.
• Permet de configurer "Reformat on Save".

C'est la raison principale de choisir WebStorm plutôt que VS Code. Le refactoring est "safe" car WebStorm comprend la structure du code grâce à son indexation.

Grâce à l'indexation, WebStorm permet une navigation "polyglotte" (inter-langages).

Les "Run Configurations" (en haut à droite) sont des profils sauvegardés pour lancer ou déboguer des tâches. WebStorm les crée souvent automatiquement.

Types de Configurations Courantes

• Node.js : Exécute un fichier .js avec Node (ex: node mon_script.js).
• npm : Exécute un script de package.json (ex: npm start). WebStorm détecte automatiquement les scripts "dev", "start", "test".
• Jest / Vitest : Exécute le "Test Runner" sur vos fichiers de test.
• JavaScript Debug : (Pour le client) Lance un serveur et ouvre Chrome en mode debug.

Le débogage de Node.js est "zéro-config".

Workflow

1. Créez une configuration "Node.js" (ou "npm" pour npm start).
2. Posez un breakpoint (point rouge) dans la marge.
3. Cliquez sur l'icône "Insecte" (Debug 🐞) au lieu de "Play" (Run).

Stepping (Navigation pas-à-pas)

Une fois arrêté sur un breakpoint, la fenêtre "Debug" (Alt+5) s'ouvre :

• F8 (Step Over) : Exécute la ligne (sans entrer dans les fonctions).
• F7 (Step Into) : Entre dans la fonction.
• Shift + F8 (Step Out) : Sort de la fonction.
• Variables : Affiche l'état de toutes les variables (locales, globales, closures).
• Console : REPL interactif dans le contexte du breakpoint.

WebStorm peut se connecter au débogueur du navigateur (Chrome, Firefox) pour vous permettre de déboguer le code front-end (React, Vue) directement dans l'IDE.

Workflow (Exemple avec Create React App)

1. WebStorm détecte npm start et crée une configuration "npm".
2. Créez une configuration "JavaScript Debug".
3. URL : Mettez http://localhost:3000 (l'URL de votre app).
4. Lancez d'abord "npm start" (Run).
5. Lancez ensuite "JavaScript Debug" (Debug).

Désormais, un breakpoint posé dans votre code React (JSX) dans WebStorm mettra l'application en pause dans Chrome, et vous pourrez voir les variables et le "Call Stack" dans l'IDE.

Le support de React (et JSX/TSX) est une fonctionnalité centrale de WebStorm.

• Compréhension du JSX : Auto-complétion des composants (ex: <MyComp...), des props, et des attributs HTML.
• Hooks : Compréhension des règles des Hooks (ex: alerte si useState est dans un if).
• Refactoring (Alt+Entrée) :
  • "Extract Component" : Sélectionne du JSX et crée un nouveau fichier .jsx.
  • "Add import" pour les composants.
• Navigation (Ctrl+B) : Saute de l'utilisation d'un composant (<Button />) à sa définition.

WebStorm offre le meilleur support du marché pour Angular (historiquement, Angular est développé avec IntelliJ/WebStorm chez Google).

• Intégration CLI : Outil graphique pour ng generate, ng serve...
• Templates HTML : Compréhension complète des templates Angular (*ngFor, [property], (event)).
• Navigation (Ctrl+B) :
  • Saute du template .html au champ .ts.
  • Saute de templateUrl au fichier .html.
• Refactoring (Shift+F6) : Renommer une variable dans le .ts la renomme dans le .html.

WebStorm (via le plugin Volar ou l'intégration native) supporte pleinement Vue.js (2 et 3).

• Support des SFC (.vue) : Compréhension des blocs <template>, <script setup>, et <style scoped>.
• Auto-complétion : Complétion des props, de l'API (ref, computed).
• Navigation : Ctrl+B sur un composant dans le template saute à son import.
• Frameworks : Support pour Nuxt.js, Pinia, Vuex.

L'intégration VCS (Git) est identique à celle d'IntelliJ IDEA. Elle est extrêmement complète et visuelle.

Gestion des Branches

En bas à droite, le sélecteur de branche permet de voir la branche actuelle, de créer/changer de branche (Checkout), et de gérer les fusions (Merge) et les conflits visuellement.

WebStorm intègre des "Test Runners" graphiques pour les frameworks de test les plus populaires.

Les raccourcis sont identiques à ceux d'IntelliJ et PyCharm.

1. Shift + Shift
   (Search Everywhere)

2. Alt + Entrée
   (Show Intentions / "Baguette Magique")

3. Ctrl + N
   (Go to Class - ou Symbole JS)

4. Ctrl + Shift + N
   (Go to File)

5. Alt + F7
   (Find Usages)

6. Shift + F6
   (Rename / Refactor)

7. Ctrl + B
   (Go to Definition)

8. F8
   (Step Over - Debug)

9. Ctrl + K
   (Commit - Git)

10. Ctrl + Espace
    (Basic Completion)

Ctrl + W / Ctrl + Shift + W
(Extend / Shrink Selection)

Ctrl + D
(Duplicate Line)

Ctrl + Y
(Delete Line)

Ctrl + /
(Comment / Uncomment Line)

Ctrl + Alt + L
(Reformat Code - Prettier)

Ctrl + Alt + O
(Optimize Imports)

Alt + 1
(Project View)

Alt + 5
(Debug View)

Alt + 9
(Git View)

Alt + F12
(Terminal)

Ctrl + E
(Recent Files)