Rechargement des pages dans votre navigateur lors de l'enregistrement, importation automatique pour require, refactorisation rename pour les hooks useState de React, complétion pour les paquets npm privés et amélioration de l'ergonomie.
Vous nous avez demandé d'améliorer la fonctionnalité Live Edit, c'est chose faite ! WebStorm peut maintenant actualiser automatiquement les pages dans un navigateur lorsque vous modifiez et enregistrez vos fichiers HTML, CSS et JavaScript. Pour commencer, ouvrez un fichier HTML dans l'éditeur, survolez-le et cliquez sur l'icône du navigateur que vous souhaitez utiliser. Tous les navigateurs sont pris en charge.
Vous souhaitez que certaines opérations soient effectuées lorsque vous enregistrez vos modifications ? WebStorm 2021.2 prend désormais ce workflow en charge correctement ! Nous avons remanié toutes les fonctionnalités existantes, les avons rassemblées dans un même emplacement et enrichies de nouvelles options, notamment la possibilité de remettre le code en forme et d'optimiser les importations lors de la sauvegarde.
Vous voulez travailler sur du code en dehors du contexte de votre projet ? Sélectionnez-le code dans l'éditeur, puis appuyez sur Alt+Entrée et choisissez Create new scratch file from selection. Cela créera un fichier temporaire avec le code souhaité.
Lorsque vous êtes en mode Following pendant une session Code With Me, vous pouvez désormais suivre les suggestions de saisie semi-automatique du code utilisées par la personne que vous suivez.
require()
Saviez-vous que WebStorm peut ajouter les déclarations d'importation manquantes à mesure que vous complétez les symboles ES6 ? La même chose est maintenant possible pour les modules CommonJS : les importations require peuvent être insérées lors de la saisie du code.
WebStorm prend désormais correctement en charge la syntaxe TypeScript utilisée dans les commentaires JSDoc de vos fichiers .js
. Nous avons repensé et étendu la prise en charge existante et corrigé un grand nombre de problèmes qui nous ont été signalés.
Vous avez besoin d'ajouter rapidement une fonction fléchée à votre code ? Vous pouvez maintenant entourer un bloc de code d'une fonction fléchée avec Ctrl+Alt+J. Vous pouvez également saisir arf et appuyer sur Tab pour développer le modèle et ajouter une fonction fléchée vide.
L'onglet d'aperçu (preview), auparavant réservé à la vue Project, fonctionne maintenant aussi lorsque vous déboguez votre application. Pour l'activer, allez dans Preferences / Settings | Editor | General | Editor Tabs et cochez la case Enable preview tab. Cela vous permettra d'éviter d'encombrer l'éditeur avec plusieurs fichiers car WebStorm ouvrira les fichiers successivement dans un même onglet.
Ne perdez plus de temps à refactoriser les valeurs et fonctions useState une par une dans les hooks React : WebStorm peut désormais les renommer pour vous ! Placez le curseur sur une valeur d'état et appuyez sur Maj+F6 ou allez dans Refactor | Rename dans le menu contextuel.
L'ajout de nouvelles dépendances de projet dans package.json
est encore plus facile avec la complétion de code pour les paquets npm privés. WebStorm vous permet de vérifier les informations sur les dernières versions du paquet, tout comme il le fait pour les paquets publics.
To help you work more efficiently with CSS classes in your React projects, we’ve added support for popular classnames and clsx libraries. WebStorm affiche des suggestions de saisie semi-automatique pour vos classes CSS et résout tous les symboles dans les littéraux de chaînes de caractères et les propriétés avec des noms littéraux.
Nous avons étendu la prise en charge des web-types, un standard open source pour la documentation des frameworks web. Il était auparavant centré sur la prise en charge de Vue. Vous pouvez maintenant l'utiliser pour enrichir l'assistance au codage des composants personnalisés dans vos fichiers HTML. Visionnez ce webinaire pour en savoir plus.
Vous voulez lancer des tests pour vérifier votre code avant de le valider ? Nous avons ajouté une nouvelle option pour vous y aider. Cliquez sur l'icône engrenage dans la fenêtre d'outils Commit, sélectionnez Run Tests et choisissez la configuration d'exécution souhaitée. WebStorm testera vos fichiers et vous avertira de tout problème.
Vous pouvez maintenant sécuriser vos commits en les signant avec une clé GPG. Pour activer cette fonctionnalité, utilisez Configure GPG Key… dans Preferences / Settings | Version Control | Git.
La navigation dans les révisions de Local History est maintenant plus facile. Faites un clic droit sur un fichier modifié, puis allez dans Local History | Show History et utilisez le champ de recherche pour naviguer dans vos révisions.
Il est désormais plus facile de réorganiser les fenêtres d'outils. Survolez le haut de la fenêtre d'outils que vous souhaitez déplacer, puis glissez-la jusqu'à l'endroit souhaité et déposez-la. Cela fonctionne également si vous voulez détacher une fenêtre d'outils de la fenêtre principale de WebStorm : suffit de la glisser en dehors du cadre de l'IDE.
Saviez-vous que vous pouvez attribuer des icônes personnalisées à vos projets ? Nous avons simplifié ce processus. Faites un clic droit sur un projet dans l'écran de Bienvenue de WebStorm, puis cliquez sur l'option Change Project Icon… et téléchargez le fichier SVG que vous souhaitez associer à ce projet.
Vous ne manquerez plus aucunes des mises à jour produit envoyées par l'application Toolbox App. Dorénavant, WebStorm vous informe si une nouvelle version est disponible en téléchargement et vous propose de faire la mise à jour. Assurez-vous simplement d'avoir la version 1.20.8804 ou une version plus récente de Toolbox App.
La boîte de dialogue Preferences / Settings comprend désormais un nœud avec paramètres avancés. Vous y trouverez de nouvelles options de configuration, notamment la possibilité de définir une marge gauche en mode Distraction-free. Vous pouvez aussi basculer plus rapidement entre des nœuds récemment ouverts. Utilisez simplement les flèches en haut à droite dans la boîte de dialogue.
Après chaque mise à jour majeure, WebStorm va nettoyer tous les répertoires de cache et de journaux dont la dernière mise à jour remonte à plus de 180 jours. Les répertoires des paramètres du système et des plugins resteront inchangés. Pour déclencher ce processus manuellement, allez dans Help | Delete Leftover IDE Directories… dans le menu principal.
Nous avons ajouté trois nouvelles fonctionnalités à notre terminal intégré pour améliorer votre expérience. Vous pouvez maintenant changer la forme du curseur et faire en sorte que la touche ⌥ agisse comme un modificateur méta. Ces options sont disponibles dans Preferences / Settings | Tools | Terminal. De plus, il est maintenant plus facile de travailler avec les liens HTTP.