WebStorm est un EDI développé par JetBrains qui permet de créer des applications web, mobiles, côté serveur et desktop avec JavaScript, TypeScript ainsi que CSS et HTML. Il apporte de nombreuses fonctionnalités comme la possibilité et prend en charge des frameworks les plus populaires comme Angular, React, Vue.js, Node.js, Meteor, Ionic, Cordova, React Native, et Electron.L'éditeur a annoncé WebStorm 2020.2 qui s'accompagne de fonctionnalités et améliorations dans ces catégories:
- Frameworks et Technologies: une option pour utiliser Prettier comme outil de formatage par défaut, diverses améliorations pour Vue.js et la prise en charge de Git installé dans WSL 2.
- JavaScript et TypeScript : rendu des commentaires JSDoc, complétion de code assistée par ML et améliorations du débogueur.
- HTML et feuilles de style : meilleure prise en charge du système de modules de Sass, prise en charge de WebP et complétion de code pour les sélecteurs CSS dans les méthodes querySelector.
- Contrôle de version : prise en charge plus avancée des Pull Request GitHub, boîtes de dialogue repensées pour plusieurs actions Git et nouvelle action pour écraser les commits du journal.
- Édition de code : de nouveaux outils pour trouver des problèmes dans votre code et une action pour ajouter des carets à la fin de chaque ligne sélectionnée.
Framework et Technologies
Utilisez Prettier comme outil de formatage par défaut
Vous souhaitez utiliser Prettier au lieu de l'outil de formatage intégré pour mettre de l’ordre dans votre code ? Avec cette mise à jour, c'est encore plus facile qu'auparavant. Cochez simplement la nouvelle case On code reformat dans Preferences/Settings | Languages & Frameworks | JavaScript | Prettier pour que l'EDI utilise Prettier chaque fois que vous reformatez vos fichiers .js, .ts, .jsx et .tsx.
Par défaut, WebStorm appliquera le formatage à tous les fichiers .js, .ts, .jsx et .tsx que vous avez modifiés dans votre projet, comme il le fait lors de l'exécution de Prettier lors de l'enregistrement. Pour appliquer la mise en forme à d'autres types de fichiers ou pour limiter la mise en forme aux fichiers situés uniquement dans des répertoires spécifiques, vous pouvez personnaliser la configuration par défaut à l'aide de modèles glob.
Si vous souhaitez utiliser Prettier comme formateur par défaut dans tous les nouveaux projets, accédez à Fichier | Nouveaux paramètres de projets | Préférences / Paramètres pour les nouveaux projets dans le menu principal et sélectionnez l'option On Code Reformat, puis mettez à jour la liste par défaut des types de fichiers si nécessaire.
Bénéficiez de la prise en charge de Nuxt.js
Laissez WebStorm vous aider à améliorer votre productivité avec Nuxt.js ! Utilisez les fonctionnalités d'assistance au codage dans la section des modèles et le fichier nuxt.config.js.
Tout d’abord, si vous utilisez une version Nuxt à partir de la 2.9.0 et que vous n’avez pas installé le package @ nuxt / types, WebStorm vous en avertit et vous suggère de l’installer en tant que dépendance de développement. Veuillez le faire si vous voulez une meilleure complétion du code dans l'EDI.
Lorsque vous travaillez avec le fichier nuxt.config.js, vous obtenez désormais des suggestions de complétion de code appropriées. En survolant, vous verrez également la fenêtre contextuelle Documentation affichant les informations de type pour les options Nuxt utilisées dans le fichier.
La configuration Webpack spécifique à Nuxt est également prise en charge. À partir de Nuxt.js 2.12.0, WebStorm trouvera automatiquement le fichier de configuration webpack et utilisera les règles de résolution de module de celui-ci pour l'aide au codage. Pour les versions antérieures à 2.12.0, JetBrains met à votre disposition un script que vous pouvez copier ici et pointer WebStorm vers celui-ci pour obtenir le même résultat.
L'EDI reconnaît également les références au magasin Vuex et peut les résoudre et les compléter automatiquement correctement.
Configurez rapidement un style de code spécifique à Vue
Grâce aux paramètres de style de code spécifiques à Vue, vous pouvez choisir quelles balises de premier niveau doivent avoir leur contenu en retrait et si l'indentation doit être la même pour l'ensemble du fichier Vue ou varier selon les paramètres de langage. Vous pouvez également modifier le formatage des interpolations dans votre code Vue.
Paramètres de style de code spécifiques à Vue
WebStorm 2020.2 est livré avec une section dédiée pour configurer les options de formatage de vos fichiers Vue. La nouvelle section se trouve dans Preferences/Settings | Editor | Code Style | Vue.
Avec les paramètres de style de code spécifiques à Vue, vous pouvez rapidement choisir quelles balises de niveau supérieur doivent avoir leur contenu en retrait. Vous pouvez également décider si l'indentation doit être la même pour l'ensemble du fichier Vue, ou dépendante des paramètres du langage, par exemple Spécifique au HTML. Par défaut, seul le contenu <template> est indenté et l'indentation est uniforme pour tout le fichier.
Prise en charge de Git installé dans WSL 2
Comme WSL devient une partie importante du processus de développement sous Windows, JetBrains a travaillé sur l'ajout de la prise en charge de tous les flux de travail nécessaires à ses IDE. Dans les première et deuxième mises à jour de correction de bogues pour WebStorm 2020.1, l'éditeur a corrigé de nombreux problèmes connus liés à Node.js avec WSL. Cette fois-ci, il a implémenté la prise en charge manquante de Git installé dans WSL 2.
L'EDI peut basculer entre les exécutables Git en fonction de l'emplacement du projet. Lorsqu'un projet est ouvert à partir de WSL, l'EDI basculera automatiquement vers Git dans WSL et vous permettra d'utiliser toutes les fonctionnalités liées à Git.
JavaScript et TypeScript
Gagnez du temps avec les nouvelles intentions
De nouvelles intentions ont été apportées pour vous aider à effectuer plus rapidement certaines actions concernant le chaînage optionnel, la coalescence null et les boucles. Par exemple, vous pouvez maintenant convertir rapidement une boucle for avec un index numérique en une méthode de tableau forEach. Comme pour toute autre intention, vous pouvez utiliser la combinaison Alt + Entrée pour voir les intentions disponibles dans le contexte actuel.
Afficher les commentaires JSDoc directement dans l'éditeur
La lecture des commentaires JSDoc peut être compliquée par toutes les balises que vous devez parcourir. Pour faciliter cette opération, il est maintenant possible d'afficher ces commentaires directement dans l'éditeur, en éliminant les distractions inutiles.
Complément de code expérimental assisté par ML
L'année dernière, l'éditeur a commencé à rechercher un moyen d'améliorer la pertinence des suggestions affichées dans la fenêtre contextuelle Complétion à l'aide d'algorithmes d'apprentissage automatique (ML). Bien qu'il s'agisse encore d'un travail en cours, il estime avoir obtenu de bons résultats et propose désormais aux développeurs d'essayer la complétion de code assistée par ML dans cette version.
Pour l'activer, allez dans Preferences/Settings | Editor | General | Code Completion, cochez Rank completion suggestions based on Machine Learning et sélectionnez JavaScript et / ou TypeScript parmi les options disponibles.
HTML et feuilles de style
Meilleure prise en charge des règles @use et @forward dans Sass / SCSS
L'année dernière, JetBrains a introduit un support initial pour les règles @use et @forward utilisées dans Sass et SCSS. Dans WebStorm 2020.2, l'éditeur a étendu cette prise en charge. Vous pouvez désormais vous attendre à obtenir une complétion plus intelligente et une résolution améliorée pour les symboles importés.
Prise en charge du format d'image WebP
À partir de la version 2020.2, vous pouvez prévisualiser les images .webp dans WebStorm, de la même manière que vous pouvez prévisualiser les images .jpeg ou .png. Auparavant, l’EDI ne reconnaissait pas le format .webp, ce qui vous obligeait à passer à une autre application chaque fois que vous deviez jeter un coup d’œil rapide sur ces images.
Pour prévisualiser une image, vous pouvez simplement survoler son lien dans le code. Vous pouvez également double-cliquer dessus dans la fenêtre de l'outil Projet pour le prévisualiser dans l'éditeur ou utiliser la fonction Définition rapide.
Complétion pour les sélecteurs CSS dans les méthodes querySelector
Lorsque vous manipulez le DOM HTML, vous verrez désormais des suggestions de complétion pour les sélecteurs CSS dans les appels document.querySelector, document.querySelectorAll, element.querySelector et element.querySelectorAll.
Contrôle de version
Prise en charge plus avancée des Pull Request GitHub
Dans WebStorm 2020.2, JetBrains a étendu la prise en charge des Pull Request GitHub pour en faciliter la gestion. Vous pouvez désormais afficher et fusionner toutes les requêtes et réviser le code – le tout sans quitter l'EDI.
La première chose que vous remarquerez est la nouvelle mise en page, qui vous permet de voir toutes les informations nécessaires en un coup d'œil. La liste des Pull Request s'ouvre maintenant dans une fenêtre d'outils séparée sur la gauche. En double-cliquant sur une Pull Request dans la liste ou en cliquant sur la flèche à côté, vous pouvez voir tous les détails pertinents à son sujet. Ces détails incluent les messages PR, les noms de branche, les auteurs, les ayants droit, les fichiers modifiés, les validations, les commentaires, etc.
Un autre changement important que vous trouverez dans cette version est la possibilité de démarrer, de demander et de soumettre des requêtes, ainsi que de laisser des commentaires uniques. Vous pouvez afficher, modifier, créer ou supprimer des commentaires au niveau du commit. L'EDI vous permet désormais également d'afficher et d'interagir avec les commentaires au niveau de la ligne de code afin que vous puissiez effectuer une révision de code directement dans l'EDI. Enfin, vous pouvez désormais fusionner les Pull Request depuis l'EDI.
Remaniement des boîtes de dialogue pour les actions Git
WebStorm 2020.2 supprime le superflu dans les boîtes de dialogue pour les actions de fusion, d'extraction et de rebasage. Vous disposez également de nouvelles options, telles que –rebase dans la boîte de dialogue Pull et –no-verify dans la boîte de dialogue Merge.
Utilisez squash depuis le journal des événements pour les commits locaux
Vous pouvez maintenant sélectionner un certain nombre de commits locaux dans l'onglet Log de la fenêtre d'outils Git et les regrouper en un seul avec squash. Cette action est disponible dans le menu contextuel, qui peut être affiché d'un clic droit.
Édition du code
Identifiez plus rapidement les problèmes dans votre code
Grâce au nouveau widget Inspections et à la fenêtre d'outils Problems, vous pouvez obtenir des informations détaillées sur le nombre d'avertissements, d'erreurs et autres problèmes dans le fichier actuel, et naviguer entre eux.
Le widget Inspections est situé dans le coin supérieur droit de l'éditeur. Il vous informe sur le nombre de problèmes dans le fichier actuel et permet de passer facilement de l'un à l'autre. Pour la navigation, vous pouvez utiliser les icônes fléchées ou F2. Vous pouvez également configurer le niveau de mise en évidence directement depuis le nouveau widget: survolez-le et choisissez entre Aucun, Syntaxe et Tous les problèmes.
Ajoutez des carets à la fin de chacune des lignes sélectionnées
La nouvelle action pour travailler avec plusieurs carets (Alt + Maj + G) vous permet de placer rapidement des carets à la fin de chacune des lignes sélectionnées et supprime la sélection dès que tous les carets ont été ajoutés.
Télécharger WebStorm 2020.2Source : En savoir plus sur WebStorm 2020.2