WebStorm 2019.2 disponible
WebStorm 2019.1 disponible : tour d'horizon des nouveautés de l'EDI de JetBrains
pour les développeurs JavaScript
Une nouvelle version de WebStorm, l'EDI intelligent conçu par JetBrains pour les développeurs JavaScript, a été publiée cette semaine. Cette mise à jour apporte un bon nombre de nouvelles fonctionnalités qu’on pourra remarquer au niveau des langages JavaScript et TypeScript, des frameworks, de HTML et CSS, des tests, des outils JavaScript et au niveau de l’EDI lui-même.
JavaScript et TypeScript
Utilisation de la destructuration 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, accessibles en appuyant sur Alt-Entrée, permettent d'introduire facilement la destructuration dans votre code JavaScript ou TypeScript.
Conversion de fonction avec Promise pour la structure async/await
Vous pouvez automatiquement modifier une fonction renvoyant un objet Promise avec les appels de fonction asynchrone .then() et .catch() 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.
Frameworks
Navigation simplifiée pour les projets Angular
Dans les applications Angular, vous pouvez désormais utiliser la fenêtre contextuelle Related Symbol… (Ctrl-Cmd-Haut/Ctrl+Alt+Home), pour parcourir rapidement les différents fichiers du projet, tels que les fichiers TypeScript, de modèles, 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
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 vous permet de bénéficier de vérifications et d'informations de type plus précises, d'utiliser les correctifs rapides fournis par le service et d'afficher l'ensemble des erreurs TypeScript du fichier ouvert dans la fenêtre d'outils de TypeScript.
Nouvelles inspections pour les applications Angular
Concernant 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 de suggérer des solutions 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.
Nouveautés prises en charge dans React
La refactorisation de la méthode Extract fonctionne désormais avec des fonctions locales et applique la destructuration aux valeurs de retour, ce qui est idéal pour extraire les hooks React personnalisés.
WebStorm offre désormais de meilleures possibilités de saisie automatique du code pour les Props React fusionnées avec l'opérateur spread.
HTML et feuilles de style
Documentation mise à jour et vérification de la compatibilité du navigateur pour CSS
La documentation (F1) des propriétés CSS et des balises et attributs HTML présente désormais des descriptions et des informations à jour de la prise en charge du navigateur à partir de MDN, ainsi que des liens vers la version complète des articles MDN.
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 de compatibilité de navigateur dans vos préférences.
Extraire la variable CSS
Avec la nouvelle refactorisation de variable CSS Extract, vous pouvez remplacer toutes les utilisations d'une valeur dans un fichier .css actif avec une variable en utilisant la syntaxe var (--var-name).
Prise en charge du « camel case » pour les modules CSS
Si vous utilisez des modules CSS dans votre projet, le processus de saisie automatique des classes du fichier JavaScript suggère désormais des versions « camel case » des noms de classe avec des tirets.
Test
Surlignage des lignes erronées en cours de test
Lorsque vous exécutez des tests avec Jest, Karma, Mocha ou Protractor et si certains de ces tests échouent, vous pouvez désormais voir l'emplacement du problème directement dans l'éditeur. 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.
Outils
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. Tapez « node » et l'EDI suggère des noms de fichiers et dossiers. Tapez « npm run » pour afficher la liste des tâches définies dans le fichier actuel.
Nouvelle console de débogage
Découvrez la toute nouvelle console de débogage interactive et améliorée dans les fenêtres d'outils de débogage JavaScript et Node.js ! Elle affiche les objets sous forme d'arborescence et prend en charge l'application de styles aux messages de fichiers journaux avec CSS, ainsi que leur groupement en utilisant console.group() et console.groupEnd(). Vous pouvez également filtrer les différents types de messages de journaux.
Prise en charge de Docker Compose
Si vous utilisez Docker pour le test de votre application Node.js, vous pouvez désormais utiliser la configuration décrite dans le fichier Docker Compose pour facilement exécuter et déboguer l'application à partir de l'EDI.
Test avec Cucumber et TypeScript
Vous travaillez avec Cucumber et TypeScript ? Vous pouvez désormais passer directement des étapes du fichier .feature à leurs définitions dans le fichier .ts et générer les définitions manquantes en utilisant un correctif rapide (Alt-Entrée).
Info-bulle de plages de versions pour les dépendances
Dans package.json, appuyez sur Cmd/Ctrl et survolez la version sur une dépendance pour voir quelles plages de versions peuvent être installées lors de l'exécution de « npm install » ou « yarn install ».
Prise en charge améliorée des linters
WebStorm peut désormais exécuter plusieurs processus pour ESLint et TSLint dans un projet pour s'assurer qu'ils fonctionnent correctement dans les projets monorepo, ainsi que dans les projets ayant plusieurs configurations linter.
EDI
Fenêtre contextuelle Recent Locations
La fenêtre contextuelle Recent Locations (Cmd-Maj-E/Ctrl+Maj+E) offre une nouvelle possibilité de navigation au sein de votre 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.
Nouveaux thèmes pour l'interface utilisateur
Vous pouvez désormais utiliser les nouveaux thèmes d'interface en couleur qui sont accessibles sous forme de plugins. Vous avez le choix entre les thèmes Dark Purple, Gray et Cyan Light, ou vous pouvez créer les vôtres.
Enregistrement du projet en tant que modèle
La nouvelle action « Save as a Template » du menu Tools permet désormais d'utiliser un projet comme base de création de nouveaux projets dans l'écran de bienvenue de l'EDI.
Vous pouvez télécharger WebStorm 2019.1 depuis le site Web de JetBrains. Vous disposez d'une version d'essai de 30 jours gratuite. Précisons également que toutes ces fonctionnalités se retrouvent dans les autres EDI de JetBrains : IntelliJ IDEA Ultimate, PhpStorm, PyCharm Professional, RubyMine et GoLand.
:fleche: Télécharger WebStorm 2019.1
Voir aussi :
:fleche: IntelliJ IDEA, PhpStorm, PyCharm... Il est enfin possible de personnaliser des thèmes en couleur pour les EDI JetBrains grâce à un changement dans la plateforme IntelliJ
:fleche: IntelliJ IDEA 2019.1 EAP5 permet de visualiser les emplacements récents de code et prend en charge les modifications apportées par Android Studio 3.3
:fleche: JetBrains fait le bilan de son année 2018 : six millions de développeurs ont utilisé ses produits, plus d'un million de licences ont été offertes
WebStorm 2019.2 disponible : tour d'horizon des nouveautés de l'EDI de JetBrains
WebStorm 2019.2 disponible : tour d'horizon des nouveautés de l'EDI de JetBrains
Pour les développeurs JavaScript
Fin mars, JetBrains a annoncé la sortie de WebStorm 2019.1, la première mise à jour majeure annuelle de son EDI pour les développeurs JavaScript. Celle-ci apportait un bon nombre de nouvelles fonctionnalités qu’on pouvait remarquer au niveau des langages JavaScript et TypeScript, des frameworks, de HTML et CSS, des tests, des outils JavaScript et au niveau de l’EDI lui-même. WebStorm 2019.2, la deuxième mise à jour majeure de l'année, est maintenant disponible et apporte aussi des améliorations majeures pour la complétion de code et l'édition de manière générale, pour JavaScript et TypeScript, la prise en charge améliorée de Vue.js, la mise en surbrillance de la syntaxe pour plus de 20 langages, de nouvelles intentions pour la déstructuration, etc.
JavaScript et TypeScript
WebStorm 2019.2 vient avec une nouvelle interface utilisateur pour la fenêtre de complétion, rendant la présentation des suggestions de complétion de code dans JavaScript et TypeScript plus claire et plus cohérente. Il est par exemple maintenant plus facile de repérer l'endroit où le symbole est défini et s'il fait partie d'une API de langage standard. Il existe également une nouvelle icône pour les symboles avec plusieurs définitions.
Cette version introduit aussi de nouvelles intentions. Il s'agit entre autres de l'intention "Propagate to destructuring" (Alt-Entrée), qui vous permet de remplacer une variable supplémentaire si cela est possible avec une autre destructuration. Pour information, la destructuration consiste à décomposer les valeurs des tableaux et des objets pour obtenir des variables utilisant une syntaxe très concise.
Pour supprimer complètement une destructuration, vous pouvez utiliser l'intention "Replace destructuring with property or index access". Notons aussi que l'EDI va vous avertir maintenant si une expression booléenne dans une condition comporte des parties inutiles et va suggérer de la simplifier.
Dans cette version de WebStorm, le renommage du refactoring a été amélioré. Lorsque vous renommez un symbole dans un fichier JavaScript ou TypeScript, l'EDI regroupe désormais les utilisations dynamiques et les exclut par défaut du refactoring. Cela rend le refactoring plus précis et vous donne plus de contrôle sur ce qui doit être renommé exactement dans la fenêtre d’outil "Refactoring Preview".
Vue.js
L'EDI de JetBrains offre une meilleure prise en charge des bibliothèques de composants Vue.js. Si vous utilisez Vuetify, BootstrapVue ou Quasar dans votre application Vue.js, la complétion de code pour ces composants (et aussi d'autres bibliothèques de composants Vue.js) et leurs propriétés est maintenant plus précise. Cela a été rendu possible grâce à une nouvelle approche que JetBrains a adoptée pour travailler avec ces bibliothèques dans l’EDI.
Édition de code
Si vous devez parfois consulter certains fichiers PHP ou Python dans WebStorm, alors sachez que la mise en surbrillance de la syntaxe est désormais disponible pour ces langages et de nombreux autres (plus de 20 langages). Aucune configuration supplémentaire n'est requise, grâce à la collection de fichiers de grammaire linguistique de TextMate fournie avec l'EDI.
Comme nouveauté intéressante facilitant l'édition de code, notons également la complétion pour les mots-clés et les noms mal orthographiés. Vous avez peut-être déjà tapé "funtcion" ou "fnction" au lieu de "function" par erreur. Maintenant, la complétion de code peut comprendre ce genre d’erreurs et va suggérer toujours l’option la plus pertinente pour vous. Cela fonctionne dans tous les langages pris en charge et pour tous les symboles : mots-clés, classes, fonctions, composants, etc.
WebStorm 2019.2 prend également en charge des scripts shell. La complétion de code fonctionne dans les fichiers .sh et .bash, une nouvelle configuration d'exécution est disponible et l'EDI s'intègre à ShellCheck pour le linting et shfmt pour le formatage du code. Avec la nouvelle inspection "Duplicated code fragment", l'EDI de JetBrains peut aussi maintenant vous permettre de trouver des doublons de code dans votre projet. Il vérifie votre code à la volée et met immédiatement en surbrillance les doublons potentiels dans l'éditeur. Cela fonctionne pour JavaScript, TypeScript, CSS, Sass, SCSS et Less.
EDI
Il est maintenant possible de définir un style de code pour un dossier spécifique avec EditorConfig. Concrètement, vous pouvez conserver différents styles de code dans différentes parties de vos projets en ajoutant plusieurs fichiers .editorconfig. Il est aussi désormais possible d'ouvrir plusieurs projets dans une fenêtre. Lorsque vous avez un projet ouvert dans WebStorm et que vous souhaitez en ouvrir un autre, vous pouvez maintenant attacher ce deuxième projet au projet ouvert, de sorte que vous puissiez les voir tous les deux dans la même fenêtre. Si vous souhaitez fermer le projet attaché, il suffit de faire un clic droit sur sa racine dans la vue Projet et sélectionner "Supprimer de la vue Projet".
On notera encore une mise à jour de la page de plugins qui rend plus facile de trouver le plugin dont vous avez besoin : la description du plugin apparaît désormais juste à côté de la liste des plugins disponibles. JetBrains a supprimé l'onglet "Mises à jour", mais a ajouté un nouveau bouton "Mettre à jour" à côté du plugin dans la section "Installé". Pour désactiver ou réactiver tous les plugins téléchargés, il suffit de cliquer sur l'icône représentant une roue dentée, puis choisir l'option appropriée.
Autres nouveautés
WebStorm 2019.2 apporte bien d'autres nouveautés, mais parmi celles qui ont été mises en avant par JetBrains, on peut encore citer, au niveau du contrôle de version, la complétion dans les fichiers .gitignore pour les noms de fichiers et de dossiers. Vous pouvez aussi ajouter rapidement un fichier à .gitignore à partir de l'onglet "Modifications locales".
:fleche: Télécharger WebStorm 2019.2
Voir aussi :
:fleche: IntelliJ IDEA 2019.1 est disponible, l'EDI pour Java vient avec les expressions Switch et offre enfin la possibilité de personnaliser les thèmes
:fleche: CLion 2019.1 disponible : l'EDI C/C++ vient avec un meilleur support du développement embarqué, ClangFormat comme formateur de code alternatif et plus
:fleche: Python en 2018, les chiffres clés de la communauté : EDI, frameworks, utilisation, SGBD, ORM, tests...
:fleche: WebStorm 2019.1 disponible : tour d'horizon des nouveautés de l'EDI de JetBrains pour les développeurs JavaScript
:fleche: IntelliJ IDEA, PhpStorm, PyCharm... Il est enfin possible de personnaliser des thèmes en couleur pour les EDI JetBrains grâce à un changement dans la plateforme IntelliJ
:fleche: JetBrains fait le bilan de son année 2018 : six millions de développeurs ont utilisé ses produits, plus d'un million de licences ont été offertes
