Les nouveautés de WebStorm 2019.1

WebStorm 2019.1 apporte de nouvelles intentions intelligentes pour JavaScript et TypeScript, une prise en charge améliorée d'Angular, une mise à jour de la documentation pour CSS et HTML, une console de débogage plus puissante, et bien plus encore !


JavaScript & TypeScript

Utilisation de la déstructuration de JavaScript

Utilisation de la déstructuration de JavaScript

La destructuration consiste à décomposer les valeurs des tableaux et des objets pour obtenir des variables utilisant une syntaxe très concise. Les nouvelles refactorisations et intentions de WebStorm (Alt-Entrée), permettent d'introduire la déstructuration facilement dans votre code JavaScript ou TypeScript.

Conversion de fonction avec Promise en async/await

Conversion de fonction avec Promise en async/await

Vous pouvez modifier automatiquement une fonction qui renvoie un Promise avec des appels .then() et .catch() en une fonction async utilisant la syntaxe async/await. Appuyez simplement sur Alt-Entrée sur le nom de la fonction et sélectionnez Convert to async function (Convertir en fonction asynchrone). Cette opération est possible non seulement pour les fichiers TypeScript, mais aussi dans JavaScript et Flow.

Cadres

Conversion de fonction avec Promise en async/await

Nouvelles inspections pour les applications Angular

Pour les applications Angular, WebStorm ajoute 17 nouvelles inspections qui permettent de détecter les erreurs propres à Angular dans vos applications au cours de la saisie et suggèrent des correctifs rapides. Ces inspections interviennent à la fois dans TypeScript et les fichiers de modèles, afin de vérifier l'utilisation des liaisons, des directives, des composants et bien d'autres choses.

Navigation simplifiée dans les projets Angular

Navigation simplifiée dans les projets Angular

Dans les applications Angular, vous pouvez désormais utiliser la fenêtre contextuelle Related Symbol… (Ctrl-Cmd-Flèche vers le haut / Ctrl+Alt+Accueil) pour naviguer rapidement entre les différents fichiers des composants tels que les fichiers TypeScript, de modèle, de style et de test. Dans le fichier TypeScript, la fenêtre contextuelle donne également la liste des symboles importés dans ce fichier.

Prise en charge améliorée de TypeScript dans les applications Vue

Prise en charge améliorée de TypeScript dans les applications Vue

WebStorm utilise désormais le service de langage TypeScript en complément de sa propre prise en charge de TypeScript pour tout code TypeScript dans les fichiers .vue. Cela signifie que vous obtiendrez désormais des vérifications de types et des informations de types plus précises, que vous pourrez utiliser les correctifs rapides fournis par le service et consulter toutes les erreurs TypeScript du fichier en cours dans la fenêtre de l'outil TypeScript.

Extract Method pour les hooks React

La refactorisation Extract Method fonctionne désormais avec les fonctions locales et utilise la déstructuration pour les valeurs de retour, ce qui en fait l'outil idéal pour extraire des hooks React personnalisés.

Saisie automatique améliorée pour les propriétés

WebStorm fournit désormais une saisie du code automatique améliorée pour les propriétés React fusionnées à l'aide de l'opérateur spread.

HTML et Feuilles de style

Documents et compatibilité du navigateur mis à jour

Mise à jour de la documentation

La documentation (F1) des propriétés CSS et des balises et attributs HTML présente désormais des descriptions à jour et des informations concernant la prise en charge des navigateurs par MDN, ainsi que des liens vers les articles MDN complets.

Vérification de la compatibilité des navigateurs pour CSS

Pour vous assurer que l'ensemble des propriétés CSS que vous utilisez sont prises en charge par la version du navigateur cible, vous pouvez activer la nouvelle inspection Browser compatibility dans les préférences.

Prise en charge du « camel case » pour les modules CSS

Si vous utilisez des modules CSS dans votre projet, le processus de saisie pour les classes dans le fichier JavaScript suggère désormais des versions "camel-cased" des noms de classe avec des tirets.

Extraction de variable CSS

Avec la nouvelle refactorisation Extract CSS variable, vous pouvez remplacer toutes les utilisations d'une valeur dans un fichier .css actif par une variable en utilisant la syntaxe var(--var-name).

Tester

Surlignage de ligne erronée en cours de test

Surlignage de ligne erronée en cours de test

Lorsque vous exécutez des tests avec Jest, Karma, Mocha ou Protractor et que certains tests échouent, vous pouvez désormais voir incorrectement dans l'éditeur où le problème s'est produit. L'EDI reprend les informations de la trace de pile et surligne le code erroné. Survolez l'erreur pour afficher le message correspondant et commencer immédiatement le débogage.

Tester avec Cucumber et TypeScript

Vous travaillez avec Cucumber et TypeScript ? Vous pouvez dorénavant passer des étapes du fichier .feature à leur définition dans le fichier .ts et générer les définitions manquantes à l'aide d'un correctif rapide (Alt-Entrée).

Outils

Nouvelle console de débogage

Nouvelle console de débogage

Découvrez la nouvelle console interactive du débogueur améliorée dans les fenêtres de l’outil de débogage de JavaScript et Node.js ! Elle affiche désormais les objets sous forme d'arborescence et prend en charge le style des messages de journal avec CSS, ainsi que leur regroupement à l’aide de console.group() et console.groupEnd(). Vous pouvez également filtrer les différents types de messages de journaux.

Saisie automatique pour les scripts npm

Saisie automatique pour les scripts npm

Lors de l'ajout de nouveaux scripts au fichier package.json, WebStorm propose désormais des suggestions pour les commandes disponibles fournies par les packages installés. Lorsque vous saisissez node, l'EDI vous suggère des noms de dossiers et de fichiers. Et si vous saisissez npm run, vous verrez une liste des tâches définies dans le fichier actuel.

Prise en charge améliorée des linters

WebStorm peut maintenant exécuter plusieurs processus pour ESLint et TSLint dans un même projet, afin de s'assurer qu'ils fonctionnent correctement dans monorepo-projects et dans des projets à plusieurs configurations de linter.

Prise en charge de Docker Compose

Si vous utilisez Docker pour tester votre application Node.js, vous pouvez dorénavant utiliser la configuration décrite dans le fichier Docker Compose pour exécuter et déboguer l'application facilement à partir de l'EDI.

Infobulle de plages de versions pour les dépendances

Dans package.json, appuyez sur Cmd/Ctrl et survolez la version sur une dépendance pour afficher la gamme des versions pouvant être installées lors de l'exécution de npm install ou yarn install.

EDI

Nouveaux thèmes d'interface utilisateur

Nouveaux thèmes d'interface utilisateur

Vous pouvez désormais utiliser dans WebStorm les nouveaux thèmes d'interface utilisateur en couleur qui sont accessibles sous forme de plugins. Choisissez entre les thèmes Dark Purple, Gray et Cyan Light, ou créez le vôtre.

Fenêtre contextuelle Recent Locations

Fenêtre contextuelle Recent Locations

La fenêtre contextuelle Recent Locations (Cmd-Maj-E / Ctrl+Maj+E) propose une nouvelle façon de naviguer dans le projet. Elle présente la liste des fichiers et des lignes de code que vous avez ouverts récemment dans l'éditeur. Il ne vous reste plus qu'à commencer la saisie pour filtrer les résultats et accéder directement au code voulu.

Enregistrement du projet en tant que modèle

La nouvelle action Save as a Template du menu Tools permet d'utiliser un projet comme base de création pour de nouveaux projets dans l'écran de Bienvenue de l'EDI.

Retours à la ligne pour les types de fichiers sélectionnés

Vous pouvez maintenant activer les retours à la ligne dans l'éditeur pour certains types de fichiers spécifiques. Pour ce faire, ouvrez Preferences/Settings | Editor | General et indiquez les types de fichiers dans le champ Soft-wrap files.