Quoi de neuf dans WebStorm 2020.1

Apparence et ergonomie

Nouvelle police d'édition par défaut

Au cours de l'année écoulée, nous avons développé une police de caractères pour vous permettre de coder plus confortablement, sans trop vous fatiguer les yeux. Réservez votre meilleur accueil à JetBrains Mono, une nouvelle police de caractères open source spécialement conçue pour le codage ! WebStorm 2020.1 est livré avec cette nouvelle police de caractères sélectionnée par défaut.

Mode zen pour se concentrer sur le codage

Codage sans aucune distraction

Nous avons ajouté un nouveau mode d'affichage Zen pour vous aider à vous concentrer totalement sur votre code. Utilisez-le quand vous voulez travailler dans un éditeur en plein écran avec le code source au centre et les éléments de l'interface utilisateur masqués pour minimiser les distractions.

Documentation rapide au survol de la souris

Affichage de la documentation au survol de la souris

Il n'est plus nécessaire d'appeler explicitement la fenêtre contextuelle Documentation. Elle s'affiche désormais lorsque vous survolez un symbole, afin que vous puissiez trouver la documentation associée plus rapidement. En cas de problème dans votre code, la fenêtre contextuelle propose également un correctif rapide à appliquer pour le résoudre.

Utilisation de l'IDE pour des modifications rapides

Vous est-il déjà arrivé de vouloir utiliser l'IDE pour modifier un fichier rapidement ? Avec le nouveau mode LightEdit, vous pouvez ouvrir un fichier individuel dans la fenêtre de l'éditeur de texte sans avoir à charger tout le projet.

Personnalisation de la barre d'état

Si la barre d'état n'est pas masquée et que vous l'utilisez de temps en temps, vous pouvez maintenant décider précisément de ce que vous souhaitez y voir. Effectuez un clic droit sur la barre d'état et supprimez les éléments dont vous n'avez pas besoin.

Cadres

Saisie semi-automatique du code de l'API Composition de Vue

Travailler avec l'API Composition

Dans WebStorm 2020.1, vous trouverez une prise en charge des composants définis à l'aide de l'API Composition de Vue 3. Dans la section modèle du composant, l'IDE résoudra et complètera automatiquement les symboles retournés par la fonction setup() du composant, y compris les propriétés à l'état réactif, les propriétés calculées et les références.

Assistance au codage pour Vuex

Si vous travaillez avec la bibliothèque Vuex, vous obtiendrez désormais des suggestions de saisie semi-automatique pour les symboles du magasin Vuex lors de la modification de composants Vue. De plus, WebStorm vous permet d'accéder directement à la définition des getters, des mutations et des actions.

Prise en charge complète d'Angular 9

Pour vous aider à travailler avec Ivy et d'autres fonctionnalités d'Angular 9, nous avons ajouté une prise en charge complète de ces fonctions dans WebStorm 2020.1. Vous pouvez utiliser des fonctionnalités telles que la saisie semi-automatique de code et les importations automatiques dans TypeScript et les fichiers des modèles sans configuration.

Prise en charge améliorée de React

Ajoutez des instructions d'importation pour les composants définis via React.memo en plaçant le curseur sur un composant et en appuyant sur Alt+Entrée. Et si vous utilisez des composants Material-UI dans votre projet, vous verrez désormais des suggestions de saisie semi-automatique lors de la création de styles.

JavaScript & TypeScript

Nouvelles intentions et inspections intelligentes

Utilisez de nouvelles intentions et inspections intelligentes (Alt + Entrée) pour gagner du temps lors du codage ! Par exemple, convertissez rapidement le code existant en chaînage facultatif et/ou en coalescence nulle, la syntaxe introduite dans les dernières versions de JavaScript et TypeScript.

Documentation TypeScript au survol de la souris

Amélioration de la pertinence de la documentation rapide

Pour JavaScript et TypeScript, la fenêtre contextuelle Documentation affiche maintenant des informations plus utiles, notamment le type et la visibilité du symbole ainsi que l'emplacement où ce symbole est défini.

Remaniement de l'interface utilisateur de la refactorisation Introduce Field

Grâce à la refactorisation Introduce Field mise à jour, vous pouvez afficher un aperçu des modifications dans le contexte du code sur lequel vous travaillez. De plus, l'application de la refactorisation nécessite désormais moins de clics.

Prise en charge des fonctionnalités de TypeScript 3.8

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

Outils

Exécution de Prettier lors de la sauvegarde

La nouvelle option Run on save for files permet à WebStorm d'appliquer la mise en forme Prettier à tous les fichiers spécifiés dans les paramètres de l'IDE et modifiés dans le projet dès que vous enregistrez ces fichiers. Inutile d'avoir recours à des surveillants de fichiers ou des extensions tierces pour cela désormais.

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

Pour faciliter le travail avec l'émulateur de terminal intégré, WebStorm vous permet désormais de fractionner les sessions de terminal verticalement et horizontalement. Surveillez la sortie de plusieurs outils actuellement utilisés sans avoir à basculer entre les onglets.

Vérificateur d'orthographe intégré

À partir de la version 2020.1, WebStorm sera fourni avec Grazie, notre outil intelligent de vérification orthographique, grammaticale et stylistique. Cela devrait vous aider à éviter les erreurs de grammaire lors de l'ajout de commentaires, de messages de commit et de constructions de langage JavaScript.

Partage plus souple des configurations d'exécution

Vous avez des collègues qui ont besoin de travailler sur votre projet ? Partagez votre configuration d'exécution avec eux. WebStorm 2020.1 vous offre encore plus de liberté sur ce point car vous pouvez maintenant stocker vos configurations d'exécution dans le dossier de projet de votre choix.

Utilisation de Yarn 2 dans les projets TypeScript

Nous avons étendu la prise en charge initiale de Yarn 2, introduite dans WebStorm 2019.3. Désormais, tous les symboles sont correctement résolus et peuvent être saisis automatiquement dans les projets TypeScript lorsque les dépendances sont installées en utilisant Yarn 2 avec le mode Plug'n'Play.

Contrôle de version

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

Vous voulez rendre votre historique de commit plus linéaire et plus compréhensible ? Cela est devenu beaucoup plus facile grâce à la mise à jour de la boîte de dialogue Rebasing Commits, maintenant plus interactive. Elle affiche les actions qui peuvent être appliquées à chaque commit, et vous permet de consulter les détails et le diff du commit ainsi que de réinitialiser rapidement les modifications appliquées.

Modifications du flux de commit

Afin de fluidifier le flux des validations, nous avons développé une nouvelle fenêtre d'outil Commit pour gérer toutes les tâches associées aux commits. Cette fonction est activée par défaut pour les nouvelles installations. Si vous êtes déjà utilisateur, vous verrez une invitation dans la boîte de dialogue modale Commit vous permettant de passer rapidement à la nouvelle interface utilisateur.