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...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.