WebStorm 2023.1 est disponible
L'EDI JavaScript de JetBrains vient avec la prise en charge d'Astro, TypeScript dans les mod�les Vue, une am�lioration de la nouvelle interface utilisateur et plus encore

WebStorm 2023.1, la premi�re mise � jour majeure de l'ann�e de l'EDI de JetBrains pour les d�veloppeurs JavaScript, est disponible. Cette version vient avec un bon lot de nouvelles fonctionnalit�s, incluant la prise en charge d'Astro, la prise en charge de TypeScript dans les mod�les Vue, la configuration de Tailwind CSS, la fonctionnalit� zoom sur tous les �l�ments de l'EDI, le perfectionnement de la nouvelle interface utilisateur et de l'int�gration du contr�le de version, et plus encore.

Frameworks et Technologies

Prise en charge d'Astro

La tant attendue prise en charge d'Astro est maintenant disponible dans WebStorm. Pour en b�n�ficier, utilisez le nouveau plugin Astro, dont l'installation se fait via Preferences / Settings | Plugins. Ce plugin fournit les fonctionnalit�s de base comme la mise en �vidence de la syntaxe, la compl�tion de code avec importations automatiques, des refactorisations, la navigation, le formatage, entre autres.

Prise en charge de TypeScript dans les mod�les Vue

JetBrains a ajout� la prise en charge de TypeScript dans les mod�les Vue. Elle est activ�e lorsque l'attribut lang d'une balise script est d�fini sur ts. Auparavant, JavaScript �tait utilis� ind�pendamment de l'attribut lang dans la balise script. WebStorm fournit d�sormais la prise en charge du casting inline, une r�duction des types am�lior�e et des informations correctes sur les types d�duits dans la documentation rapide pour les mod�les de composants de fichier unique Vue.

Compl�tion des �v�nements de composants personnalis�e dans Vue

Une autre am�lioration sp�cifique � Vue m�rite d'�tre mentionn�e : vous b�n�ficiez d�sormais de la saisie semi-automatique du code pour vos �v�nements de composants personnalis�s dans les mod�les Vue. Cela fonctionne de fa�on identique pour JavaScript et TypeScript.

Ajout des importations de composants lors du copier-coller

Lorsque vous copiez-collez du code d'un fichier � un autre, WebStorm ajoute automatiquement toutes les importations requises. C'�tait auparavant le cas pour les langages JavaScript et TypeScript purs et les mod�les React. Dans WebStorm 2023.1, cela fonctionne d�sormais aussi pour les mod�les Vue, Svelte, Astro et Angular.

Informations sur les param�tres pour les props React

JetBrains a ajout� une nouvelle fa�on d'afficher le type attendu pour un prop de composant. En appuyant sur Ctrl+P l� o� des props sont transmises � un composant, une fen�tre contextuelle contenant des informations sur leur type s'affiche. Auparavant, ces informations n'�taient disponibles qu'en survolant les props, ce qui n'�tait pas pratique pour les utilisateurs privil�giant le clavier.


Nouvelles fonctionnalit�s pour Angular

WebStorm ajoute automatiquement une importation pour les symboles globaux et export�s dans vos composants lors de la compl�tion de code lorsque vous travaillez avec des mod�les Angular. L'EDI prend �galement en charge la directive NgoptimizedImage d'Angular 15 en fournissant une inspection qui sugg�re d'utiliser ngSrc au lieu de src pour img.

Possibilit� d'ex�cuter les tests Jest dans les dossiers

Vous pouvez d�sormais ex�cuter tous les tests dans un dossier sp�cifique via le menu contextuel du clic droit. Auparavant, cette fonctionnalit� �tait seulement disponible pour Vitest.

Am�liorations pour Docker

L'onglet Dashboard du n�ud Docker-compose regroupe d�sormais tous les journaux de conteneurs et les affiche au m�me endroit. En outre, vous pouvez d�sormais vous connecter � Azure Container Registry.

Correctifs de bugs pour Svelte

JetBrains a am�lior� la prise en charge de Svelte disponible via un plugin d�di�. L'�diteur de logiciels a revu la fa�on dont WebStorm �value les $types dans les applications SvelteKit et r�solu le probl�me li� aux mots-cl�s sp�cifiques � TypeScript dans les fichiers svelte.

JavaScript et TypeScript

Conversion automatique des cha�nes en template literals

WebStorm transforme d�sormais automatiquement vos cha�nes entre guillemets simples ou doubles en template literals lorsque que vous saisissez ${. Cela concerne les cha�nes brutes et les propri�t�s JSX.

Meilleure priorisation des biblioth�ques import�es pour l'importation automatique

JetBrains a am�lior� le comportement de l'EDI lors de l'ajout d'importations automatiques provenant de diff�rentes biblioth�ques qui contiennent des �l�ments ayant des noms identiques. L'ajout des importations automatiques tient maintenant compte des importations existantes dans le projet. Si vous devez ajouter une importation pour un �l�ment provenant d'une autre biblioth�que, la d�claration d'importation doit �tre ajout�e manuellement. WebStorm fournira une fen�tre contextuelle comme dans les versions pr�c�dentes.

Harmonisation du comportement d'importation entre TypeScript et JavaScript

JetBrains a harmonis� le comportement d'importation pour TypeScript et JavaScript. Dor�navant, les options d'importation s'affichent dans les actions contextuelles dans TypeScript comme dans JavaScript. Vous pouvez ouvrir les actions contextuelles en appuyant sur Alt+Entr�e. Les param�tres unifi�s se trouvent dans Preferences / Settings | Editor | General | Auto Import.

Prise en charge des fonctionnalit�s de TypeScript

WebStorm inclut la prise en charge des principales fonctionnalit�s de la version TypeScript 5.0 � venir. Il prend �galement en charge l'h�ritage de plusieurs configurations, le modificateur const pour les param�tres de types et l'indicateur allowImportingTsExtensions.

Approche universelle de la gestion des r�f�rences de fichiers

JetBrains a am�lior� la fa�on dont WebStorm g�re les r�f�rences en JavaScript, TypeScript, HTML, CSS et avec divers frameworks. Les r�f�rences sont maintenant trait�es de mani�re plus g�n�rique dans l'ensemble de vos projets. Par exemple, la r�solution des fichiers images, CSS ou HTML fonctionne maintenant avec des alias de chemin d'acc�s.

Langages de balisage et CSS

Configuration de Tailwind CSS

Dans cette version, l'�diteur de logiciels a ajout� la prise en charge d'options de configuration telles que la saisie semi-automatique des noms de classe personnalis�s sous l'option classAttributes, et des options exp�rimentales comme tailwindCSS.experimental.configFile. Vous pouvez d�finir ces options de configuration dans Preferences / Settings | Languages & Frameworks | Style Sheets | Tailwind CSS.

Possibilit� de configurer la saisie semi-automatique de code HTML

WebStorm 2021.3 a introduit la saisie semi-automatique pour HTML, qui vous permet d'afficher les abr�viations ou les noms des balises au fur et � mesure de la saisie. Ce comportement pouvant �tre g�nant lors de la saisie de texte brut en HTML, JetBrains a ajout� une option permettant de le d�sactiver. Vous trouverez cette nouvelle option dans Preferences / Settings | Editor | General | Code Completion.

Am�liorations pour Markdown

Vous pouvez maintenant utiliser un correctif rapide pour le formatage des tableaux Markdown. L'�diteur propose �galement une nouvelle action Fill Paragraph qui permet de diviser facilement de longs morceaux de texte en plusieurs lignes de m�me largeur. Enfin, JetBrains a introduit une page d�di�e aux options de param�tres Markdown dans Preferences / Settings | Editor | General | Smart Keys.


Choix du style des commentaires de lignes dans PostCSS

Une nouvelle option disponible dans Preferences / Settings | Editor | Code Style | Style Sheets | CSS | PostCSS vous permet de sp�cifier le style de commentaires de lignes � utiliser dans vos fichiers PostCSS. Vous pouvez utiliser Ctrl+/ pour commenter une ligne de code avec le style de commentaire de ligne de votre choix.

Nouvelle interface utilisateur

Am�lioration de la nouvelle interface utilisateur (B�ta)

L'ann�e derni�re, JetBrains a inaugur� une nouvelle interface utilisateur plus minimaliste pour WebStorm et ses autres EDI. Gr�ce aux commentaires des utilisateurs, JetBrains l'a perfectionn�e et vous invite � en essayer la nouvelle version. Pour ce faire, allez dans Preferences / Settings | Appearance & Behavior | New UI.

Nouvelle interface utilisateur : division verticale pour les fen�tres d'outils

WebStorm 2023.1 vous permet de diviser l'espace des fen�tres d'outil et de les organiser afin d'en afficher deux � la fois. Il suffit de faire glisser l'ic�ne de fen�tre d'outils � partir de la barre lat�rale et de la d�poser sous le s�parateur. Vous pouvez �galement faire un clic droit sur l'ic�ne de la fen�tre d'outils et lui affecter un nouvel emplacement avec l'action Move to.


Nouvelle interface utilisateur : mode Compact

Afin de faciliter le travail sur de petits �crans, JetBrains propose maintenant un mode Compact � l'apparence plus condens�e avec une barre d'outils et des en-t�tes de fen�tre d'outils affin�s, des espacements et des marges r�duits, et des ic�nes et boutons plus petits. Pour activer ce nouveau mode, allez dans View | Appearance | Compact Mode dans le menu principal.


Nouvelle interface utilisateur : onglets Project sous macOS

JetBrains a impl�ment� l'une des demandes de fonctionnalit� les plus populaires pour cette nouvelle interface : les onglets de projets pour les utilisateurs de macOS. Lorsque vous avez plusieurs projets ouverts, vous pouvez d�sormais passer de l'un � l'autre en utilisant les onglets de projets affich�s sous la barre d'outils principale.


Nouvelle interface utilisateur : widget Run repens�

Suite aux commentaires re�us sur la nouvelle interface, JetBrains a remani� le widget Run dans l'en-t�te de la fen�tre principale pour le rendre moins intrusif et plus agr�able � l'�il.


Nouvelle interface utilisateur : r�impl�mentation de fonctionnalit�s populaires

L'�diteur de logiciels pour d�veloppeurs a ajout� � la nouvelle interface plusieurs fonctionnalit�s populaires qui manquaient aux utilisateurs. Par exemple, l'outil de s�lection Show Hidden Tabs et l'action Fetch de la fen�tre contextuelle Branches sont de retour. JetBrains a apport� des am�liorations aux modes Distraction Free et Zen en masquant les principaux �l�ments de la barre d'outils et en affichant le nom du fichier dans la port�e.


Exp�rience utilisateur

Zoom sur tout l'EDI

Il est d�sormais possible de zoomer dans WebStorm pour augmenter ou diminuer la taille de tous les �l�ments de l'interface utilisateur en m�me temps. Pour ce faire, cliquez sur View | Appearance | Switch Zoom IDE dans le menu principal. Vous pouvez �galement appuyer sur Ctrl+` et ajuster l'�chelle de l'EDI via Zoom.

Param�tre Remember size for each tool window

JetBrains a introduit une nouvelle option de mise en page qui permet d'unifier la largeur des fen�tres d'outils lat�rales ou de conserver la possibilit� d'ajuster leur taille lorsque vous personnalisez votre mise en page. La nouvelle case � cocher Remember size for each tool window est disponible dans Preferences / Settings | Appearance & Behavior | Appearance | Tool Windows.

Param�tre pour configurer Actions on Save pour les nouveaux projets

WebStorm 2023.1 permet de pr�d�finir le comportement d'Actions on Save pour les nouveaux projets. Pour cela, cliquez sur File | New Projects Setup | Preferences / Settings For New Projects | Tools | Actions on Save et s�lectionnez les actions � d�clencher lorsque vous enregistrerez vos modifications dans de futurs projets.


Recherche bas�e sur le Machine Learning pour les classes

JetBrains poursuit ses efforts d'int�gration du classement par machine learning dans la fonctionnalit� Search Everywhere (Double Maj) pour vous permettre d'obtenir des r�sultats de recherche plus pertinents et pr�cis. L'algorithme de tri de l'onglet Classes est d�sormais g�n�r� par machine learning par d�faut, tout comme les r�sultats des onglets Actions et Fichiers.

Possibilit� de restaurer l'ancien comportement du copier-coller

JetBrains a ajout� ici une option pour r�tablir le comportement du copier-coller des versions ant�rieures de WebStorm. Cela permet de coller le contenu du presse-papiers au niveau du curseur, plut�t que sur la ligne pr�c�dente. Cette option se trouve dans le menu d�roulant When pasting a line copied with no selection, dans Preferences / Settings | Advanced Settings | Editor.

Inspecter les fichiers � indexer en mode intelligent

L'�diteur de logiciels a am�lior� l'exp�rience de d�marrage de l'EDI en ex�cutant le processus Scanning files to index� en mode intelligent, en vue de r�duire les d�lais caus�s par l'attente de l'indexation au d�marrage. Lors de l'ouverture d'un projet, WebStorm utilise les caches de la session pr�c�dente et recherche les nouveaux fichiers � indexer. L'EDI sera pr�t � fonctionner s'il ne d�tecte aucun changement lors de l'analyse.

Suggestion de modification des param�tres de Microsoft Defender

WebStorm 2023.1 inclut une nouvelle notification qui se d�clenche lorsque la protection en temps r�el de Microsoft Defender est activ�e. WebStorm sugg�re d'ajouter certains dossiers � la liste des exclusions de Defender, ces contr�les antivirus pouvant impacter consid�rablement la vitesse de l'EDI.

Contr�le de version

Am�lioration du workflow de r�vision du code pour GitHub

JetBrains a repens� la fen�tre d'outils Pull Request pour simplifier le processus de r�vision du code dans l'EDI. Elle comporte d�sormais un onglet d�di� pour chaque requ�te pull que vous ouvrez. L'onglet affiche instantan�ment la liste des fichiers modifi�s et un bouton d�di� permet d'ex�cuter l'action la plus pertinente en fonction de l'�tat de la requ�te pull.


Saisie semi-automatique dans la fen�tre contextuelle Create New Branch

WebStorm 2023.1 fournit la saisie semi-automatique dans la fen�tre contextuelle Create New Branch. Lorsque vous commencez � saisir le nom de votre nouvelle branche, l'EDI vous propose des pr�fixes pertinents bas�s sur les noms des branches locales existantes.

Am�lioration de la fen�tre contextuelle Branches

JetBrains a am�lior� l'ergonomie de la fen�tre contextuelle Branches. Pour faciliter la navigation entre les branches, celles-ci sont maintenant regroup�es et stock�es dans des listes que vous pouvez d�velopper.

Indications de couleur pour l'�tat du VCS dans la vue Structure

JetBrains a ajout� des indications de couleur � la fen�tre d'outils Structure pour faciliter le suivi des modifications apport�es aux fichiers. Les noms des objets modifi�s deviennent bleus, tandis que ceux des objets ajout�s r�cemment s'affichent en vert dans la fen�tre d'outils.

V�rifications des commits en arri�re-plan

JetBrains a aussi repens� le comportement des v�rifications de commits Git et Mercurial afin d'acc�l�rer l'ensemble du processus de commit. Les v�rifications sont d�sormais effectu�es en arri�re-plan, apr�s le commit mais avant le push.

Nouveaut�s et t�l�chargement de WebStorm 2023.1