IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

WebStorm 2026.3, l'EDI pour le développement web avec JavaScript et TypeScript, est disponible, avec un nouveau workflow « Conception-Codage-Production »
Et JetBrains Air pour le développement agentique

Le , par Jade Emy

8PARTAGES

1  0 
JetBrains est une société spécialisée dans le développement de logiciels, qui conçoit des outils destinés aux programmeurs (développeurs de logiciels) et aux chefs de projet. JetBrains propose divers environnements de développement intégrés (EDI), tels que IntelliJ IDEA, PyCharm, Rider, WebStorm et CLion. WebStorm est l'EDI pour le développement web avec JavaScript et TypeScript. De nombreux autres EDI de JetBrains intègrent les fonctionnalités de WebStorm via des plugins.

Récemment, JetBrains annonce que WebStorm 2026.3 est désormais disponible. La création d’une fonctionnalité d’interface utilisateur à l’aide d’un agent IA implique souvent davantage de changements d’outils que de codage proprement dit. Vous copiez des valeurs depuis Figma, recherchez la bonne story dans Storybook, rédigez la requête, attendez la réponse de l’agent, puis vérifiez le résultat dans le navigateur avant de recommencer le cycle depuis le début. Cette version intègre cette boucle front-end de bout en bout dans l’EDI et la connecte à vos agents. Figma Connect, désormais doté du panneau « Inspect », affiche les détails de conception directement dans le chat. Storybook Connect vous indique, à vous et à vos agents, quels composants réutiliser. Chrome DevTools Connect permet à votre agent d’effectuer son travail dans le navigateur et de vous renvoyer le résultat pour vérification.

Pour relier ces étapes, JetBrains Air est désormais disponible directement dans WebStorm. Exécutez plusieurs sessions en parallèle avec des agents JetBrains et tiers, ce qui vous permet de continuer à travailler pendant que chaque agent termine ses propres tâches. Vous pouvez également choisir l’agent le plus adapté à chaque tâche sans modifier le mode de fonctionnement de votre équipe.


Voici les points forts de cette version :

JetBrains Air dans WebStorm

Un seul endroit pour exécuter vos agents et vérifier leur travail

À partir de cette version, les EDI JetBrains intègrent Air, une nouvelle couche dédiée au développement agentique. Travaillez avec les agents de codage de votre choix, puis exécutez, suivez et vérifiez des workflows multi-agents au sein même de votre EDI, où l’intelligence du code aide les agents à éviter les erreurs et vous fournit les outils nécessaires pour examiner chaque modification avant sa publication.


Vos agents, vos modèles, vos abonnements

Air fonctionne avec Claude Agent, Codex, Gemini, GitHub Copilot, Junie, OpenCode et d’autres agents compatibles ACP. Il détecte les agents déjà installés sur votre machine afin que vous puissiez les connecter en un clic, et vous pouvez en ajouter d’autres à partir du registre des agents.
Votre configuration existante est également conservée : les abonnements aux fournisseurs, les clés API et même une URL de base personnalisée fonctionnent tous, sans qu’aucun abonnement à l’IA de JetBrains ne soit nécessaire. Exécutez Claude Agent sur votre abonnement Claude dans le terminal ou dans un onglet d’EDI en plein écran, utilisez d’autres abonnements d’agents dans le chat ou le terminal, et passez d’un abonnement à l’autre à tout moment, même en cours de session.

Un espace de travail centralisé pour examiner les modifications et guider l’agent

Examinez les modifications apportées par un agent tout en ayant une vue d’ensemble du code environnant et de vos outils de projet, puis envoyez directement vos commentaires à l’agent. Ancrer une note à une ligne spécifique dans le diff, ou commentez directement depuis le code, afin que l’agent dispose d’un contexte concret concernant la modification que vous souhaitez. Travaillez dans le chat ou dans le terminal, selon ce qui vous convient le mieux.

Agent IA gratuit avec Junie Lite

Air inclut une IA gratuite avec la configuration Junie Lite, ce qui vous permet d’utiliser un agent sans abonnement. Il vous suffit d’un compte JetBrains.

Vous utilisez toujours AI Assistant ? Une notification vous proposera un essai d’Air. Le passage à Air masque AI Assistant. Air migre automatiquement vos compétences EDI, votre configuration MCP, les agents installés via l’ACP, votre authentification et l’historique du chat. L'historique du mode chat n'est pas migré.

Workflow de bout en bout, de la conception à la production

Figma Connect : inspectez vos designs sans quitter WebStorm

La mise en œuvre d'un design ne devrait pas impliquer de basculer entre Figma et votre éditeur, de coller des liens et de copier manuellement les valeurs d'espacement et de couleur.

Avec Figma Connect, vous pouvez :

- Ajouter des captures d'écran, des URL et des valeurs de design au contexte sans avoir à faire des allers-retours.
- Parcourir et naviguer parmi les calques Figma depuis l’EDI.
- Inspecter le calque de conception sélectionné tout en travaillant dans JetBrains Air.
- Envoyer le contexte de conception à n’importe quel agent, tel que Claude Code, Codex ou Cursor.


Le panneau « Inspect » vous fournit les détails d’implémentation de la couche sélectionnée : valeurs CSS, couleurs et jetons de conception. Vous obtenez les chiffres exacts dont vous avez besoin pour créer le composant, sans avoir à ouvrir un autre outil ni à retaper quoi que ce soit. Figma Connect nécessite une configuration initiale.

Chrome DevTools Connect : permettez aux agents de vérifier leur travail dans le navigateur

Un code qui se compile n’est pas nécessairement un code qui fonctionne. Grâce au plugin Chrome DevTools Connect intégré, votre agent peut tester ce qu’il développe dans un véritable navigateur et corriger les problèmes avant de vous présenter le résultat. Lorsque vous repérez un élément nécessitant une modification, vous pouvez montrer à votre agent exactement où effectuer le changement.


Grâce à la compétence CLI Chrome DevTools intégrée, un agent peut :

- Ouvrir des pages et parcourir les flux de l’application.
- Inspecter le DOM et l’interface utilisateur rendue.
- Lire les journaux de la console et les requêtes réseau.
- Prendre des captures d’écran et interagir avec les éléments de la page.
- Reproduire les problèmes d’exécution et valider les corrections dans le navigateur.

La première fois qu’un développeur utilise cette fonctionnalité, WebStorm vous invite à installer le package requis. Par la suite, les workflows assistés par le navigateur fonctionneront sans que vous ayez à configurer manuellement une intégration MCP supplémentaire.

Storybook Connect : développez à partir des composants dont vous disposez déjà

Storybook est particulièrement utile lorsque chaque composant dispose d’une « story », et le moins utile lorsque vous devez chercher celle qui convient. Storybook Connect intègre Storybook à WebStorm afin que vous et vos agents puissiez rester dans une seule fenêtre.


Une fenêtre d’outil dédiée vous permet de parcourir et de rechercher des « stories ». Vous pouvez basculer entre une « story » et son code source, et vos modifications restent toujours synchronisées avec l’application Storybook. Démarrez votre propre serveur Storybook local ou configurez-en un en un seul clic.

Storybook Connect analyse les propriétés des composants et identifie ceux qui ne disposent pas de « story » ; ses outils assistés par IA génèrent ensuite les « stories » manquantes sans que vous ayez à fournir d’instructions détaillées. Une interface CLI intégrée et des compétences intégrées mettent ces mêmes fonctionnalités à la disposition des développeurs, des scripts d’intégration continue (CI) et des agents IA :

webstorm storybook-connect component-props ./src/Button.tsx

webstorm storybook-connect possible-stories ./src/Button.tsx

webstorm storybook-connect missing-stories ./src/Button.tsx

webstorm storybook-connect create-missing-stories ./src/Button.tsx

Storybook Connect est distribué sous forme de plugin distinct et nécessite Storybook 10 ou une version ultérieure. Ensemble, ces éléments couvrent tout le parcours, de la conception au code, jusqu’à la page fonctionnelle. Ils s’exécutent tous dans Air, au sein de WebStorm, dans le même contexte et selon le même workflow de révision.

Mises à jour de la plateforme

Signaux sonores pour les événements de l’EDI et les marques de ligne de l’éditeur

JetBrains poursuit son travail visant à rendre les EDI JetBrains accessibles à tous les développeurs. Cette version introduit des signaux sonores, des réponses intégrées aux requêtes qui vous fournissent des informations sans que vous ayez besoin d’avoir le contexte à l’écran.

Les utilisateurs de lecteurs d’écran bénéficient désormais de signaux audio pour les marques de ligne de l’éditeur : erreurs et avertissements, lignes ajoutées, modifiées et supprimées sous contrôle de version, ainsi que le repliement de code. Vous pouvez également entendre quand une opération est terminée. Les compilations, les tests et autres tâches en arrière-plan chronophages signalent leurs résultats à l’aide de sons distincts pour les états de réussite, d’avertissement et d’erreur. Les atteintes de points d’arrêt émettent également un son. Et si vous travaillez avec plusieurs écrans ou sur plusieurs projets à la fois, vous pouvez activer ces sons afin de ne pas avoir à jeter un coup d’œil à l’écran pour vérifier les états.


Lorsque la prise en charge des lecteurs d’écran est activée, les signaux de marquage de ligne et les sons correspondant aux événements les plus importants (compilations, tests et déclenchements de points d’arrêt) sont activés par défaut. Les agents dans Air disposent de leurs propres signaux sonores, qui sont activés par défaut pour tous les utilisateurs, que vous activiez ou non la prise en charge des lecteurs d’écran. Vous serez averti lorsqu’un agent termine son exécution, s’arrête en raison d’une erreur ou a besoin de votre intervention, ainsi que lorsque la dictée démarre ou s’arrête. Toutes les autres fonctionnalités sont activables à la demande. Vous pouvez découvrir et prévisualiser les sons sur la nouvelle page des paramètres d’accessibilité, et utiliser la case à cocher « Lire le son » sur la page des paramètres de notification pour activer les signaux sonores d’un groupe de notifications spécifique.

Signalement automatique des erreurs et des blocages

WebStorm 2026.3 envoie automatiquement des rapports d’erreurs et de blocages de l’interface utilisateur à JetBrains, ce qui nous aide à identifier les problèmes qui interrompent votre travail et à hiérarchiser les corrections en fonction de leur impact.

Les rapports ne contiennent que des données techniques. Les informations personnelles telles que les chemins d’accès aux fichiers, les URL et les noms d’utilisateur sont supprimées des messages de rapport avant qu’ils ne quittent votre machine. Vous pouvez désactiver le signalement automatique dans Paramètres | Apparence et comportement | Paramètres système | Partage des données.


Mises à jour du framework et de l’écosystème

Prise en charge de TypeScript 7 pour Angular et React, aucune migration requise

La prise en charge de TypeScript 7 est désormais stable dans WebStorm, y compris dans les projets Angular et React. Elle remplace le service de langage basé sur Node.js par un moteur basé sur Go, ce qui réduit la charge liée à l’assistance à la codification dans les projets de grande envergure. Vous pouvez l’activer sans avoir à migrer ni à modifier la version de TypeScript de votre projet. Sur le code source de Kibana, le temps de chargement du projet est passé d’environ 12 secondes à 3 secondes.

Angular

WebStorm déduit désormais les types de modèles corrects lorsque vous travaillez avec Angular dans WSL, au lieu de se rabattre sur « any ». De plus, « @default never; » à l’intérieur de « @switch » n’est plus signalé comme un bloc inconnu.

Sass et CSS

Ils ont également corrigé plusieurs problèmes liés à la prise en charge de Sass et CSS. Les fonctions et variables avec espace de noms à l’intérieur de `calc()` ne déclenchent plus d’erreur « Terme inattendu ». De plus, nous avons supprimé 161 propriétés non distribuées des données de syntaxe CSS. Enfin, les pseudo-sélecteurs ne sont plus signalés comme inconnus lorsque le plugin Images est désactivé.

Tests et outils

L’exécution de tests individuels fonctionne à nouveau dans Vitest 5, et Mocha 12 (ESM) n’affiche plus d’avertissement du reporter à ce sujet. Le serveur de langage Tailwind CSS fonctionne également avec un interpréteur Node distant dans Docker sous macOS.

Améliorations des performances et de la qualité

Recherche d’utilisations dans des bases de code volumineuses

La fonctionnalité « Find Usages » ne bloque plus l’EDI pendant plusieurs minutes dans les très grands monorepos. Nous l’avons testée sur Kibana, qui compte plus de 1 000 fichiers tsconfig.

Performances Angular

La résolution des références ne se bloque plus dans les espaces de travail contenant plusieurs projets Angular. Nous avons également corrigé une fuite de mémoire dans Angular sous TypeScript 7 qui provoquait des pics d’utilisation du processeur de 800 % à 900 %.

Conclusion

Cette version se concentre sur la partie du workflow située entre votre conception et le code déployé. Vos agents travaillent directement à partir de la conception Figma et de vos propres composants, vérifient leurs résultats dans un navigateur réel et restent regroupés au sein de JetBrains Air. Codez à votre façon et déployez en toute confiance.

Téléchargez WebStorm 2026.3

Essayez Air dans WebStorm
Vous avez lu gratuitement 591 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !