Pour développer les applications, de nombreuses personnes recommandent les environnements de développement intégré (EDI). Comme avantages, ces EDI permettent par exemple d’augmenter la productivité lorsque l’on sait exploiter tout leur potentiel. Jetbrains, l’entreprise qui met à la disposition des développeurs de nombreux outils de développement de logiciels depuis plusieurs années, vient d’annoncer la sortie de la première mise à jour majeure de l’année 2020 de WebStorm, son EDI qui permet de créer des applications web, mobiles, côté serveur et de bureau avec JavaScript, TypeScript ainsi que CSS et HTML. Pour ceux qui n’ont jamais utilisé WebStorm, il est bon de savoir que cet EDI se distingue des autres outils du marché par de nombreuses fonctionnalités, la possibilité gérer de larges projets, mais surtout sa prise en charge des frameworks les plus populaires comme Angular, React, Vue.js, Node.js, Meteor, Ionic, Cordova, React Native, et Electron. Dans cette nouvelle version de Webstorm portant la référence 2020.1, Jetbrains a apporté plusieurs améliorations au niveau de l'ergonomie, des frameworks, des langages JavaScript et Typescript, des outils et du contrôle de version.
Amélioration de l’apparence et de l’expérience utilisateur
Nouvelle police d’édition par défaut
L’an dernier, Jetbrains s’est appliqué à développer une nouvelle police de caractères open source spécialement conçue pour le codage afin de permettre aux développeurs de coder plus confortablement. Cela a donné lieu à la création de Mono. À partir de cette version 2020.1, Jetbrains s’engage à livrer Webstorm avec Mono intégré par défaut dans l’EDI.
Si, pour une raison ou une autre, vous souhaitez utiliser une police personnalisée dans l’EDI, il est également possible de le faire.
Thème clair unifié pour tous les systèmes d’exploitation
Pour rendre l’interface utilisateur plus cohérente sur tous les systèmes d’exploitation, un thème clair unifié nommé IntelliJ Light a été intégré à Webstorm 2020.1. Ce thème est disponible dans le menu déroulant Thème dans Préférences/Paramètres | Apparence et comportement | Apparence et permet aux développeurs de ne pas perdre leurs repères lorsqu’ils passent d’un système d'exploitation à un autre.
Mode Zen pour un codage sans aucune distraction
Pour aider les développeurs à se concentrer entièrement sur leur code, un nouveau mode nommé mode Zen a été ajouté à la mise à jour de WebStorm qui vient de sortir. Ce mode Zen combine le mode Distraction Free (Sans distraction) et le mode Full Screen (Plein écran) afin que les utilisateurs n’aient pas à faire beaucoup d'efforts à chaque fois qu’ils souhaitent les activer ou les désactiver.
Pour activer ce nouveau mode Zen, il suffit d’accéder à Affichage | Apparence | Accéder au mode Zen dans le menu principal ou de le choisir directement dans la fenêtre contextuelle Switch.
Utilisation de WebStorm pour des modifications rapides
Pour utilisateurs qui souhaitaient jusque-là ouvrir un fichier dans une fenêtre d’édition de type texte sans créer ni charger de projet et n’y parvenaient pas, l’équipe de Jetbrains annonce qu’il est maintenant possible de le faire.
Pour effectuer une modification rapide sans charger ni créer de projet, il faut d’abord s’assurer que WebStorm n’a pas encore été lancé. Ensuite, il faut ouvrir le fichier en utilisant une des trois méthodes décrites ci-dessous :
- Accédez au dossier de projet, cliquez avec le bouton droit sur le fichier que vous souhaitez modifier et sélectionnez WebStorm dans la liste ;
- créez un lanceur de ligne de commande et ouvrez le fichier à partir de la ligne de commande ;
- cliquez sur le bouton Ouvrir sur l’écran de bienvenue de l’EDI, sélectionnez le fichier dont vous avez besoin et appuyez sur Ouvrir.
Enfin, une fois cette étape franchie, il faut sélectionner Fichier | Ouvrir Fichier dans le projet dans le menu principal, ou cliquer avec le bouton droit n’importe où dans l’onglet Éditeur et sélectionner Ouvrir le fichier dans le projet à partir du menu contextuel.
Affichage de la documentation au survol de la souris
Dorénavant, il n’est plus nécessaire d’appeler explicitement la fenêtre contextuelle Documentation. Et pour cause, elle s’affiche automatiquement lorsque l’utilisateur survole un symbole avec le pointeur de la souris. Pour les utilisateurs, cette fonctionnalité peut aider à trouver plus rapidement des informations sur des symboles spécifiques.
Si un utilisateur désire toutefois ne pas utiliser cette amélioration, il est possible de la désactiver dans Préférences/Paramètres | Éditeur | Général, en décochant la case Afficher la documentation rapide lors du déplacement de la souris.
Nouvelles options de personnalisation de la barre d’état
Par défaut, WebStorm affiche la barre d’état en bas de l'EDI afin de permettre aux utilisateurs de consulter rapidement l’état global du projet et de l’EDI. Cette option a aussi pour avantage de faciliter l’accès à divers paramètres tels que l’encodage des fichiers et la mise en évidence des inspections. Si vous n'utilisez cette barre d’état que de temps en temps et qu’elle n’est pas masquée dans votre EDI, il est maintenant possible de sélectionner les éléments qui doivent apparaitre dans cette barre en faisant un clic droit et en décochant tout ce qui ne vous intéresse pas dans la liste qui apparait.
Frameworks
Prise en charge de Vuex et de l’API Composition
Depuis toujours, l’équipe de Webstorm travaille à rendre l’EDI aussi complet qu’utile. Dans cette nouvelle version, Jetbrains n’a pas voulu déroger à sa règle et a ajouté deux améliorations majeures afin de rendre l’aide au codage du framework Vue.js encore plus avancée.
La première amélioration liée à ce framework concerne la bibliothèque Vuex. Vuex est un gestionnaire d’état (« state management pattern ») et une bibliothèque pour des applications Vue.js. Il sert de zone de stockage de données centralisée pour tous les composants dans une application, avec des règles pour s’assurer que l’état ne puisse subir de mutations que d’une manière prévisible. Il s’intègre également avec l’extension officielle de Vue afin de fournir des fonctionnalités avancées comme de la visualisation d’état dans le temps et des exports et imports d’instantanés (« snapshot ») d’état. Dans WebStorm 2020.1, si vous travaillez avec la bibliothèque Vuex, vous obtiendrez désormais des suggestions de complétion de code pour les symboles des modules et du store Vuex lors de la modification des composants de Vue. De plus, cette nouvelle version de WebStorm permet de passer à la définition des getters, des mutations et des actions.
La seconde amélioration relative au framework Vue.js est liée à l’API Composition. Cette API est fortement inspirée de React Hooks. Elle donnera aux utilisateurs la possibilité de créer une logique métier réutilisable et dynamique et de faciliter l’organisation du code associé à la sortie dans la version 3 de Vue.js. Mais déjà, l’équipe de Webstorm annonce que Webstorm 2020.1 prend en charge cette API. Dans la section des modèles du composant, vous aurez désormais des suggestions de complétion de code et une résolution pour les symboles renvoyés par la fonction setup() du composant, y compris les propriétés de l’état réactif, les propriétés calculées et les références.
Améliorations du support de React
Avec WebStorm 2020.1, le support de React a été amélioré. Pour avoir une meilleure compréhension des améliorations apportées, Jetbrains annonce que l’EDI proposera désormais d’ajouter des instructions d’importation pour les composants définis via React.memo si vous placez le curseur sur ces composants et appuyez sur Alt + Entrée. L’EDI permettra également de les ajouter automatiquement lors de la saisie ? Comme il le fait pour tous les autres symboles.
Par ailleurs, si vous utilisez des composants Material-UI dans des projets, vous pouvez désormais vous attendre à voir des suggestions de complétion appropriées lors de la création de styles.
Prise en charge complète d’Angular 9
Pour permettre aux développeurs de travailler facilement, la prise en charge complète avec Ivy et d’autres fonctionnalités d’Angular 9 a été faite dans WebStorm 2020.1. Il est maintenant possible d’utiliser des fonctionnalités telles que la complétion de code et les importations automatiques dans TypeScript ainsi que dans les fichiers de modèle sans configuration.
JavaScript et TypeScript
Amélioration de la documentation rapide pour JavaScript et TypeScript
Pour ce qui concerne JavaScript et TypeScript, la fenêtre contextuelle Documentation affiche désormais des informations plus utiles, notamment des détails sur le type et la visibilité du symbole ainsi que sur la définition de ce symbole. Les informations sur le type proviennent du service du langage TypeScript.
Une autre amélioration liée à ces langages est que WebStorm affichera désormais correctement les informations ajoutées à l’aide de balises JSDoc personnalisées et les utilisera pour la fenêtre contextuelle Documentation
Nouvelles intentions et inspections intelligentes
Dans...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.