Nouveautés de WebStorm 2020.3

Nous avons mis l'écran de Bienvenue à jour ! Vous pouvez non seulement ouvrir et créer des projets à partir de cet écran, mais aussi modifier les paramètres les plus couramment utilisés, comme les thèmes et les polices de l'IDE.

Vous pouvez maintenant synchroniser votre thème WebStorm avec vos paramètres macOS et Windows. Il vous suffit de cliquer sur Preferences / Settings | Appearance & Behavior | Appearance | Theme et de sélectionner l'option Sync with OS. Cliquez sur l'icône engrenage à côté de Sync with OS pour choisir votre thème préféré. Nous projetons d'implémenter cette fonctionnalité pour les utilisateurs de Linux également.

Dans la version 2020.3, le travail avec les onglets offre plus de possibilités. Dorénavant, vous pouvez diviser l'écran de l'éditeur en glissant-déposant des onglets ou avec la nouvelle action Open in Right Split. En outre, les onglets épinglés sont maintenant signalés par une icône spécifique et s'affichent au début de la barre des onglets pour vous permettre de les retrouver plus rapidement.

WebStorm vous permet d'améliorer votre productivité avec Tailwind CSS ! Il complète automatiquement vos classes Tailwind, vous montre un aperçu du CSS qui en résulte au survol de la souris et prend en charge les personnalisations effectuées avec des fichiers tailwind.config.js.

Vous avez un composant React non résolu dans votre code ? Placez le curseur dessus, appuyez sur Alt+Entrée et sélectionnez Create class / function component dans la liste : WebStorm créera la construction de code appropriée.

Les nouveautés telles que la prise en charge de Mermaid.js, la possibilité de reformater vos fichiers .md et le défilement automatique du volet de prévisualisation synchronisé avec l'éditeur ces changements améliorent considérablement l'expérience avec les fichiers Markdown dans WebStorm.

Nous avons intégré le service de langage TypeScript dans la fenêtre d'outils Problems et supprimé la fenêtre d'outils TypeScript. L'objectif de cette modification est de permettre la révision des problèmes dans votre code depuis un seul et même emplacement. Nous avons également déplacé les actions précédemment disponibles dans la fenêtre d'outils TypeScript vers un widget dédié sur la barre d'état.

La version 2020.3 de WebStorm prend correctement en charge la mise en forme du code pour les blocs CSS et HTML multiligne contenant du JavaScript. L'IDE met correctement le code en retrait lorsque vous ajoutez ces littéraux de modèles plus complexes ou que vous reformatez votre code.

Utilisez les instructions interactives et les watches inline pendant le débogage ! Vous pouvez maintenant cliquer sur une instruction pour afficher tous les champs appartenant à une variable. De plus, vous pouvez modifier les valeurs des variables et ajouter des expressions de watches directement à partir de l'instruction.

WebStorm 2020.3 prend en charge Code With Me (EAP), un nouveau service de développement collaboratif et de programmation en binôme. Code With Me permet de partager des projets avec d'autres personnes afin d'y travailler ensemble en temps réel. Pour l'essayer, rendez-vous dans Preferences / Settings | Plugins pour installer le plugin correspondant.

Nous avons développé une formation interactive pour vous aider à vous familiariser avec les principales fonctionnalités de WebStorm. Ce cours porte sur la réalisation des tâches courantes comme la refactorisation de code ou la navigation dans les projets. Il est accessible depuis l'onglet Learn WebStorm de l'écran de Bienvenue et dans Help | IDE Features Trainer dans le menu principal.

Vous pouvez maintenant exporter une requête HTTP vers cURL en appuyant sur Alt+Entrée dans l'éditeur de requêtes HTTP et en sélectionnant l'option Convert to cURL and copy to clipboard.

Vous pouvez maintenant résoudre les problèmes de grammaire et d'orthographe plus rapidement : au survol de la souris, une fenêtre contextuelle vous fournit une explication et une suggestion de correction. Nous avons également ajouté la prise en charge de plusieurs langues et amélioré la qualité des vérifications grammaticales.

Vous pouvez maintenant effectuer le staging de vos fichiers directement depuis WebStorm ! Pour ce faire, allez dans Preferences / Settings | Version Control | Git et sélectionnez l'option Enable staging area. Vous pourrez organiser le staging des modifications à partir de la fenêtre d'outil Commit, ainsi qu'à partir de la gouttière et en utilisant la fonction Show Diff.

La barre Navigation, qui offre une alternative rapide à la vue Project, vous permet de parcourir facilement la structure de votre projet et d'ouvrir des fichiers spécifiques. Avec la version 2020.3, nous avons également rendu possible l'accès instantané à des éléments de code spécifiques dans vos fichiers JavaScript et TypeScript.

Vous pouvez enfin prévisualiser les fichiers dans l'éditeur en les sélectionnant dans la vue Project ! Pour activer cette fonction, cliquez sur l'icône engrenage dans la vue Project et sélectionnez les deux options Enable Preview Tab et Open Files with Single Click.

La fenêtre contextuelle Maj+Maj vous permet désormais d'en faire encore plus. Tout d'abord, vous pouvez l'utiliser pour des calculs mathématiques de base. Les résultats s'afficheront directement dans la fenêtre contextuelle. Elle vous permet également de rechercher des données Git, notamment des informations sur les branches et les commits. En outre, les résultats ne sont plus regroupés en fonction de leur type mais en fonction de leur pertinence par rapport à la requête de recherche.