WebStorm, l’EDI qui facilite le développement d’applications avec JavaScript, est disponible en version 2020.1
avec une ergonomie plus soignée, une prise en charge de Vuex et de l'API Composition, une option pour exécuter Prettier lors de l’enregistrement et d'autres améliorations appréciables

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.

Nom : jetbrains-mono.png
Affichages : 320729
Taille : 93,9 Ko

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.

Nom : intellij-light-theme.png
Affichages : 5948
Taille : 90,3 Ko

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.

Nom : lightedit-mode.png
Affichages : 5988
Taille : 116,6 Ko

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.

Nom : docs-on-hover.png
Affichages : 5893
Taille : 83,8 Ko

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.

Nom : customizing-the-status-bar.png
Affichages : 5895
Taille : 101,3 Ko

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.

Nom : vuex-completion-for-cartjs.png
Affichages : 5768
Taille : 77,1 Ko

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.

Nom : vue-composition-api-completion.png
Affichages : 5657
Taille : 87,0 Ko

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.

Nom : insert-import-for-react-memo-components.png
Affichages : 5659
Taille : 66,0 Ko

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.

Nom : material-ui-completion.png
Affichages : 5596
Taille : 114,0 Ko

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.

Nom : information-about-type-and-visibility.png
Affichages : 5577
Taille : 105,4 Ko

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 WebStorm 2020.1, vous pouvez trouver une nouvelle intention qui vous permet de déduire rapidement des annotations de types de paramètre ou des types JSDoc à partir d’appels de fonction. Comme pour toute autre intention, vous pouvez l’utiliser en appuyant sur Alt + Entrée.

Prise en charge des fonctionnalités de TypeScript 3.8

WebStorm 2020.1 est fourni avec TypeScript 3.8 et introduit une prise en charge complète des nouvelles fonctionnalités TypeScript 3.8, telles que les importations/exportations de types uniquement, les champs privés et les opérateurs await de niveau supérieur.

Interface utilisateur retravaillée du refactoring Introduce Field

Avec l’implémentation de la mise à jour du refactoring Introduce Field disponible dans WebStorm 2020.1, il faudra moins de clics pour appliquer le refactoring, annonce l’équipe de WebStorm. En outre, les utilisateurs pourront avoir un aperçu des modifications dans le contexte du code avec lequel ils travaillent.

Nom : introduce-field-refactoring-webstorm-2020.1.png
Affichages : 5502
Taille : 52,1 Ko

Outils

Exécution de Prettier lors de la sauvegarde

Jusqu’à présent, il était difficile d’utiliser l’outil Prettier pour appliquer une mise en forme des fichiers lors de l’enregistrement. Les utilisateurs devaient configurer un observateur de fichiers ou installer un plug-in tiers, ce qui n’était pas vraiment simple, reconnait l’équipe de WebStorm. C’est pourquoi dans WebStorm 2020.1, une nouvelle option a été ajoutée et permet d’exécuter Prettier lors de l’enregistrement.

Nom : run-on-save-for-files-prettier.png
Affichages : 5465
Taille : 58,1 Ko

Affichage côte à côte des sessions de terminal

Pour permettre aux utilisateurs de travailler plus facilement avec l’émulateur de terminal intégré, des améliorations ont été apportées dans WebStorm 2020.1 et permettent désormais de diviser les sessions de terminal verticalement et horizontalement. Avec cette fonctionnalité, les utilisateurs pourront garder un œil sur la sortie de plusieurs outils en cours d’utilisation sans basculer entre les onglets.

Vérificateur d’orthographe fourni

À partir de la version 2020.1, WebStorm est fourni avec Grazie, l’outil intelligent de vérification orthographique, grammaticale et de style. Pour avoir une meilleure idée des capacités de Grazie, il faut noter que cet outil prend en charge plus de 15 langues, dont l’anglais, l’allemand, le russe et le chinois. Avec cette amélioration, les utilisateurs seront moins sujets à faire des erreurs de grammaire lors de l’ajout de commentaires, de messages de validation et de diverses constructions de langage, souligne Jetbrains.

Par défaut, Grazie n’est activé que pour l’anglais et ne vérifie pas tous les types de fichiers pour d’éventuelles erreurs de grammaire. Pour ajouter d’autres langues et modifier le comportement par défaut, il faut aller dans Préférences/Paramètres | Éditeur | Relecture (accéder à la section Grammaire pour ajuster la portée des vérifications, revoir les règles existantes et ajouter des exceptions).

Utilisation de Yarn 2 pour les projets TypeScript

Dans WebStorm 2019.3, l’équipe de Jetbrains avait étendu la prise en charge initiale de Yarn 2. Avec WebStorm 2020.1, tous les symboles sont désormais correctement résolus et peuvent être complétés automatiquement dans les projets TypeScript lorsque les dépendances sont installées à l’aide de Yarn 2 en utilisant le mode Plug'n’Play.

Contrôle de version

Boîte de dialogue remaniée pour le rebasing des commits

Dans la fenêtre de l’outil Git, l’action Interactively Rebase from Here qui est disponible sous l’onglet Journal permet de modifier, combiner et supprimer les validations précédentes. L’objectif est de rendre l’historique des commits plus linéaire et compréhensible.

Dans WebStorm 2020.1, il est devenu beaucoup plus facile de rendre l’historique des commits plus linéaire et plus compréhensible grâce à la mise à jour de la boîte de dialogue Rebasing Commits. Cette boîte de dialogue est maintenant plus interactive et affiche les actions qui peuvent être appliquées à chaque commit. Elle fournit également les détails du commit et permet de voir la différence et de réinitialiser rapidement les modifications appliquées.

Modifications du flux de Commit

Afin de fluidifier le flux des commits, une nouvelle fenêtre d’outil Commit a été intégrée dans cette récente version de WebStorm pour gérer toutes les tâches associées aux commits. Elle est activée par défaut pour tous les nouveaux utilisateurs. Si vous êtes déjà utilisateur et que vous souhaitez l’essayer, il suffit de sélectionner l’option Valider dans les modifications locales sans afficher d’option de dialogue dans Préférences/Paramètres | Contrôle de version | Boîte de dialogue de validation.

Télécharger WebStorm 2020.1

Source : Jetbrains