{"id":166728,"date":"2021-07-26T14:58:14","date_gmt":"2021-07-26T13:58:14","guid":{"rendered":"https:\/\/blog.jetbrains.com\/webstorm\/2021\/07\/webstorm-2021-2\/"},"modified":"2021-07-27T13:25:36","modified_gmt":"2021-07-27T12:25:36","slug":"webstorm-2021-2","status":"publish","type":"webstorm","link":"https:\/\/blog.jetbrains.com\/fr\/webstorm\/2021\/07\/webstorm-2021-2\/","title":{"rendered":"WebStorm 2021.2\u00a0: rechargement des pages lors de l&#8217;enregistrement, importation automatique pour Require, et plus encore"},"content":{"rendered":"<p>WebStorm 2021.2, la deuxi\u00e8me mise \u00e0 jour majeure de l&#8217;ann\u00e9e, est disponible\u00a0! Cette mise \u00e0 jour regorge de nouvelles fonctionnalit\u00e9s, notamment le rechargement des pages dans le navigateur lors de la sauvegarde, l&#8217;auto-importation pour <code>require()<\/code>, une refactorisation Rename pour les hooks useState de React.<\/p>\n<p align=\"center\"><a class=\"jb-download-button\" href=\"https:\/\/www.jetbrains.com\/fr-fr\/webstorm\/download\/\" target=\"_blank\" rel=\"noopener\">T\u00c9L\u00c9CHARGER WEBSTORM 2021.2<\/a><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/07\/Blog-WebStorm2021.2.png\" alt=\"webstorm-2021-2-release-banner\" width=\"800\" \/><\/p>\n<p>Si vous n&#8217;avez que quelques minutes pour d\u00e9couvrir les nouveaut\u00e9s de WebStorm 2021.2, regardez <a href=\"https:\/\/youtu.be\/G5dTw9MknbA\" target=\"_blank\" rel=\"noopener\">cette vid\u00e9o<\/a> dans laquelle <a href=\"https:\/\/twitter.com\/paulweveritt\" target=\"_blank\" rel=\"noopener\">Paul Everitt<\/a>, Developer Advocate chez JetBrains, pr\u00e9sente les changements les plus notables. Si vous avez envie d&#8217;approfondir, poursuivez votre lecture\u00a0!<\/p>\n<p>Voici les cat\u00e9gories dans lesquelles des am\u00e9liorations et nouvelles fonctionnalit\u00e9s ont \u00e9t\u00e9 apport\u00e9es\u00a0:<\/p>\n<ul>\n<li><a href=\"#code_editing\"><strong>\u00c9dition du code<\/strong><\/a>\u00a0: possibilit\u00e9 de recharger les pages dans le navigateur lors de la sauvegarde, actions lors de l&#8217;enregistrement du code, am\u00e9liorations des fichiers temporaires, synchronisation de la compl\u00e9tion de code pour Code With Me.<\/li>\n<li><a href=\"#javascript_and_typescript\"><strong>JavaScript et TypeScript<\/strong><\/a>\u00a0: auto-importation pour <code>require()<\/code>, prise en charge des types TypeScript dans JSDoc, nouveau mod\u00e8le dynamique pour les fonctions fl\u00e9ch\u00e9es et possibilit\u00e9 d&#8217;utiliser l&#8217;onglet d&#8217;aper\u00e7u lors du d\u00e9bogage.<\/li>\n<li><a href=\"#frameworks_et_technologies\"><strong>Frameworks et Technologies<\/strong><\/a>: improvements for React, code completion for private npm packages in <em>package.json<\/em>, better completion for endpoints URLs, and extended support for web-types.<\/li>\n<li><a href=\"#version_control\"><strong>Contr\u00f4le de version<\/strong><\/a>\u00a0: prise en charge des signatures GPG, am\u00e9liorations des contr\u00f4les pr\u00e9-commit et plus encore.<\/li>\n<li><a href=\"#usability\"><strong>Ergonomie<\/strong><\/a>\u00a0: un moyen plus rapide de r\u00e9organiser les fen\u00eatres d&#8217;outils, nettoyage automatique du cache et des journaux et plus encore.<\/li>\n<\/ul>\n<h2 id=\"code_editing\">\u00c9dition du code<\/h2>\n<h3 id=\"reload_pages_in_the_browser_on_save\">Rechargement des pages dans le navigateur lors de l&#8217;enregistrement<\/h3>\n<p>WebStorm lets you preview HTML files in a browser using the built-in web server, and now it will automatically update the pages in a browser as you edit and save your HTML, CSS, and JavaScript files.<\/p>\n<p>Pour commencer, ouvrez un fichier HTML dans l&#8217;\u00e9diteur, survolez-le et cliquez sur l&#8217;ic\u00f4ne du navigateur que vous souhaitez utiliser. <strong>Tous les navigateurs sont pris en charge<\/strong>. Vous pouvez \u00e9galement pr\u00e9visualiser le fichier dans un navigateur en utilisant <em>View | Open in Browser<\/em> dans le menu principal.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/reload-on-save.png\" alt=\"reload-on-save\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/reload-on-save.gif\" \/><\/p>\n<p>La nouvelle fonctionnalit\u00e9 peut sembler similaire \u00e0 la <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/live-editing.html\" target=\"_blank\" rel=\"noopener\">fonctionnalit\u00e9 <em>Live Edit<\/em><\/a> dont WebStorm dispose d\u00e9j\u00e0 depuis un certain temps. You can and may still need to use <em>Live Edit <\/em>if you want to see changes when you can\u2019t open the page on the built-in IDE server. Avec la nouvelle fonctionnalit\u00e9, nous souhaitons offrir une exp\u00e9rience plus simple et rendre le processus de rechargement des pages plus pr\u00e9visible et disponible sur tous les navigateurs.<\/p>\n<h3 id=\"built_in_html_preview_update\">Mise \u00e0 jour de l&#8217;aper\u00e7u HTML int\u00e9gr\u00e9<\/h3>\n<p>L&#8217;<a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2021\/04\/webstorm-2021-1\/#built_in_html_preview\">aper\u00e7u HTML int\u00e9gr\u00e9<\/a> qui a \u00e9t\u00e9 introduit dans la version 2021.1 a maintenant un nouveau workflow. Au lieu de sauvegarder automatiquement le fichier et de recharger la page lors de la saisie, il ne met d\u00e9sormais la page \u00e0 jour que lors de l&#8217;enregistrement, de la m\u00eame fa\u00e7on que pour l&#8217;aper\u00e7u dans le navigateur. Nous ajouterons une option permettant de choisir entre ces comportements lors du prochain cycle de publication.<\/p>\n<h3 id=\"actions_on_save\">Actions lors de l&#8217;enregistrement<\/h3>\n<p>Vous souhaitez que certaines op\u00e9rations soit effectu\u00e9es lorsque vous enregistrez des modifications\u00a0? WebStorm prend maintenant en charge ce workflow correctement. Il \u00e9tait d\u00e9j\u00e0 possible d&#8217;effectuer un certain nombre d&#8217;actions lors de l&#8217;enregistrement des fichiers en configurant leur processus d&#8217;enregistrement dans ce sens. WebStorm permettait notamment d&#8217;ex\u00e9cuter Prettier lors de l&#8217;enregistrement. With this release, we\u2019ve reworked all the existing functionality and collected it in one place, topping it off with the ability to <strong>reformat code<\/strong><strong> and optimize imports on save<\/strong>.<\/p>\n<p>Pour personnaliser le comportement de WebStorm lors de l&#8217;enregistrement allez dans <em>Preferences \/ Settings | Tools | Actions on Save<\/em>. Vous y trouverez une liste d&#8217;actions qui peuvent \u00eatre d\u00e9clench\u00e9es avec <em>\u2318S \/ Ctrl+S.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/open-prettier-settings-from-actions-on-save.png\" alt=\"open-prettier-settings-from-actions-on-save\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/open-prettier-settings-from-actions-on-save.gif\" \/><\/p>\n<p>Pour activer une action, cochez la case situ\u00e9e \u00e0 c\u00f4t\u00e9 de son nom. La plupart des actions seront d\u00e9clench\u00e9es par toute sauvegarde, ce qui inclut les <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/working-with-source-code.html#auto_save\" target=\"_blank\" rel=\"noopener\">sauvegardes automatiques<\/a> et les actions de sauvegarde explicites. Pour les file watchers et l&#8217;action <em>Upload to default server<\/em>, vous pouvez choisir entre deux options pour d\u00e9terminer lorsque vous souhaitez qu&#8217;ils soient activ\u00e9s.<\/p>\n<p>Pour ajuster les param\u00e8tres d&#8217;une action, passez la souris sur celle-ci et un lien vers les options de configuration disponibles s&#8217;affichera. Cliquez dessus pour acc\u00e9der \u00e0 la page concern\u00e9e dans les param\u00e8tres de l&#8217;IDE.<\/p>\n<h3 id=\"improvements_for_scratch_files\">Am\u00e9liorations pour les fichiers temporaires<\/h3>\n<p>Les fichiers temporaires vous permettent de prendre des notes ou de cr\u00e9er un brouillon de code en dehors du contexte du projet. Pour en faciliter l&#8217;utilisation, nous avons inclus deux am\u00e9liorations dans cette version.<\/p>\n<p>Tou d&#8217;abord, vous pouvez maintenant s\u00e9lectionner du code, appuyer sur <em>\u2325\u23ce \/ Alt+Entr\u00e9e<\/em>, puis choisir <em>Create new scratch file from the selection<\/em> pour cr\u00e9er rapidement un nouveau fichier temporaire contenant le m\u00eame code.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/create-new-scratch-file-from-selection.png\" alt=\"create-new-scratch-file-from-selection\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/create-new-scratch-file-from-selection.gif\" \/><\/p>\n<p>De plus, WebStorm supprimera automatiquement les fichiers temporaires vides d\u00e8s que vous les aurez ferm\u00e9s afin de garder votre espace de travail propre.<\/p>\n<h3 id=\"improvements_for_code_with_me\">Am\u00e9liorations pour Code With Me<\/h3>\n<p>Lorsque vous \u00eates en mode <em>Following<\/em> pendant une session <a href=\"https:\/\/www.jetbrains.com\/fr-fr\/code-with-me\/\" target=\"_blank\" rel=\"noopener\">Code With Me<\/a>, vous pouvez d\u00e9sormais suivre les suggestions de saisie semi-automatique de code utilis\u00e9es par la personne que vous suivez.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/synchronized-code-completion-in-cwm-webstorm.png\" alt=\"improved-code-completion-in-code-with-me\" width=\"600\" \/><\/p>\n<p>De plus, Code With Me a maintenant deux nouveaux serveurs relais\u00a0: l&#8217;un sur la C\u00f4te Ouest des \u00c9tats-Unis et l&#8217;autre en Afrique du Sud. Cela a rendu le temp de r\u00e9ponse presque trois fois plus rapide.<\/p>\n<h2 id=\"javascript_and_typescript\">JavaScript et TypeScript<\/h2>\n<h3 id=\"auto_import_for_require\">Importation automatique pour require()<\/h3>\n<p>La prochaine am\u00e9lioration est destin\u00e9e aux d\u00e9veloppeurs Node.js. Comme vous le savez peut-\u00eatre, WebStorm <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/javascript-specific-guidelines.html#ws_js_auto_import\" target=\"_blank\" rel=\"noopener\">ajoute les d\u00e9clarations d&#8217;importation manquantes<\/a> lorsque vous utilisez la saisie automatique des symboles dans les modules ES6. It will now do the same in the CommonJS modules \u2013 <em>require<\/em> statements will be inserted on code completion.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/auto-imports-for-common-js.png\" alt=\"auto-imports-for-common-js\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/auto-imports-for-common-js.gif\" \/><\/p>\n<p>Lorsque l&#8217;IDE n&#8217;est pas s\u00fbr de la syntaxe \u00e0 utiliser dans un fichier, il affiche une fen\u00eatre contextuelle vous permettant de choisir entre la syntaxe ES6 et CommonJS.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/import-popup-webstorm-2021-2.png\" alt=\"import-popup-webstorm-2021-2\" width=\"600\" \/><\/p>\n<h3 id=\"support_for_typescript_types_in_jsdoc_comments\">Prise en charge des types TypeScript dans les commentaires JSDoc<\/h3>\n<p>L&#8217;une des am\u00e9liorations les plus attendues de la version 2021.2\u00a0: WebStorm prend d\u00e9sormais correctement en charge la syntaxe TypeScript utilis\u00e9e dans les commentaires JSDoc de vos fichiers <em>.js<\/em>. Pour cette version, nous avons retravaill\u00e9 et \u00e9tendu la prise en charge existante, afin que WebStorm reconnaisse davantage de constructions syntaxiques. Nous avons \u00e9galement corrig\u00e9 un grand nombre des probl\u00e8mes qui nous ont \u00e9t\u00e9 signal\u00e9 s. Par exemple, les propri\u00e9t\u00e9s optionnelles dans les d\u00e9clarations <em>@typedef<\/em> sont d\u00e9sormais prises en charge.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/typescript-syntax-support-in-jsdoc-2021-2.png\" alt=\"typescript-syntax-support-in-jsdoc-2021-2\" width=\"600\" \/><\/p>\n<h3 id=\"new_action_for_adding_arrow_functions\">Nouvelle action pour l&#8217;ajout de fonctions fl\u00e9ch\u00e9es<\/h3>\n<p>Nous avons introduit un nouveau <a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/generating-code.html#ws_generate_code_create_code_constructs_by_live_templates\" target=\"_blank\" rel=\"noopener\">mod\u00e8le dynamique<\/a> pour vous aider \u00e0 ajouter des fonctions fl\u00e9ch\u00e9es plus rapidement. Vous pouvez entourer un bloc de code d&#8217;une fonction fl\u00e9ch\u00e9e \u00e0 l&#8217;aide de <em>\u2325\u2318J \/ Ctrl+Alt+J<\/em>. Vous pouvez \u00e9galement saisir <em>arf<\/em> et appuyer sur <em>\u21e5 \/ Tab<\/em> pour d\u00e9velopper le mod\u00e8le et ajouter une fonction fl\u00e9ch\u00e9e vide, comme illustr\u00e9 ci-dessous.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/surround-with-arrow-function.png\" alt=\"surround-with-arrow-function\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/surround-with-arrow-function.gif\" \/><\/p>\n<h3 id=\"previewing_files_when_debugging\">Pr\u00e9visualisation des fichiers lors du d\u00e9bogage<\/h3>\n<p><a href=\"https:\/\/www.jetbrains.com\/help\/webstorm\/using-code-editor.html#preview-tab\" target=\"_blank\" rel=\"noopener\">L&#8217;onglet d&#8217;aper\u00e7u<\/a>, auparavant r\u00e9serv\u00e9 aux fichiers de la fen\u00eatre d&#8217;outils <em>Project<\/em>, fonctionne d\u00e9sormais pour les fichiers qui s&#8217;ouvrent pendant le d\u00e9bogage. Cela peut vous \u00e9viter de polluer l&#8217;\u00e9diteur avec de nombreux fichiers s&#8217;ouvrant dans des onglets s\u00e9par\u00e9s lorsque vous \u00eates \u00e0 un point d&#8217;arr\u00eat ou que vous parcourez le code.<\/p>\n<p>Si vous activez l&#8217;aper\u00e7u, ces fichiers appara\u00eetront tous successivement dans un seul onglet. Vous pouvez activer cette fonctionnalit\u00e9 dans <em>Preferences \/ Settings | Editor | General | Editor Tabs<\/em>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/preview-tab-when-debugging.png\" alt=\"preview-tab-when-debugging\" width=\"600\" \/><\/p>\n<h2 id=\"frameworks_and_technologies\">Frameworks et Technologies<\/h2>\n<h3 id=\"code_completion_for_private_npm_packages\">Saisie semi-automatique du code pour les paquets npm priv\u00e9s<\/h3>\n<p>L&#8217;ajout de nouvelles d\u00e9pendances de projet dans <em>package.json<\/em> est encore plus facile car la saisie semi-automatique du code fonctionne d\u00e9sormais pour les paquets npm priv\u00e9s. L&#8217;IDE vous permettra de parcourir les informations sur les derni\u00e8res versions du paquet, tout comme il le fait pour les paquets publics.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/completion-for-private-packages-npm.png\" alt=\"completion-for-private-packages-npm\" width=\"600\" \/><\/p>\n<h3 id=\"rename_refactoring_for_react_usestate_hooks\">Refactorisation Rename pour les hooks useState de React<\/h3>\n<p>Ne perdez plus de temps \u00e0 refactoriser les valeurs et fonctions <em>useState<\/em> une par une dans les hooks React\u00a0: WebStorm peut maintenant les renommer pour vous\u00a0! Pour essayer cela, placez le caret sur une valeur d&#8217;\u00e9tat et appelez la refactorisation <em>Rename<\/em> avec <em>\u21e7F6 \/ Maj+F6<\/em> ou en cliquant sur <em>Refactor | Rename<\/em> dans le menu contextuel.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/rename-react-hooks.png\" alt=\"rename-react-hooks\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/rename-react-hooks.gif\" \/><\/p>\n<h3 id=\"support_for_classnames_and_clsx_libraries\">Prise en charge des noms de classes et des biblioth\u00e8ques clsx<\/h3>\n<p>Nous avons une autre am\u00e9lioration utile pour les utilisateurs de React dans cette version. Webstorm prend d\u00e9sormais en charge les <a href=\"https:\/\/www.npmjs.com\/package\/classnames\" target=\"_blank\" rel=\"noopener\">classnames<\/a> et les biblioth\u00e8ques <a href=\"https:\/\/www.npmjs.com\/package\/clsx\" target=\"_blank\" rel=\"noopener\">clsx<\/a> populaires, ce qui permet de mieux g\u00e9rer les noms de classe CSS. L&#8217;IDE affiche des suggestions de saisie semi-automatique pour vos classes CSS et r\u00e9sout tous les symboles dans les litt\u00e9raux de cha\u00eenes de caract\u00e8res et les propri\u00e9t\u00e9s avec des noms litt\u00e9raux.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/clsx-support-in-webstorm.png\" alt=\"clsx-support-in-webstorm\" width=\"600\" \/><\/p>\n<p>L&#8217;IDE affiche des suggestions pour les cha\u00eenes au fur et \u00e0 mesure de la saisie. Pour voir les suggestions de saisie pour les objets utilis\u00e9s dans vos fonctions <em>classNames<\/em>, utilisez <em>Ctrl+Espace<\/em>.<\/p>\n<h3 id=\"better_completion_for_endpoint_urls\">Saisie semi-automatique pour les URL de points de terminaison am\u00e9lior\u00e9e<\/h3>\n<p>Si vous travaillez avec Express.js, vous pouvez d\u00e9sormais obtenir un aper\u00e7u des gestionnaires de route dans la fen\u00eatre d&#8217;outils <em>Endpoints<\/em>. Cette fen\u00eatre d&#8217;outils n&#8217;est pas disponible par d\u00e9faut dans WebStorm, mais vous pouvez l&#8217;ajouter en installant le <a href=\"https:\/\/plugins.jetbrains.com\/plugin\/16890-endpoints\" target=\"_blank\" rel=\"noopener\">plugin correspondant<\/a> \u00e0 partir de <em>Preferences \/ Settings | Plugins<\/em>. La fen\u00eatre d&#8217;outils peut \u00e9galement s&#8217;av\u00e9rer utile si vous devez <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2020\/08\/working-with-rest-apis-in-webstorm\/\">travailler avec des API<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/07\/endpoints-tool-window-webstorm.png\" alt=\"endpoints-tool-window-webstorm\" width=\"600\" \/><\/p>\n<p>De plus, il est d\u00e9sormais possible de rechercher les d\u00e9clarations de routes Express. Pour ce faire, allez dans <em>Navigate | URL Mapping\u2026<\/em> depuis le menu principal.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/07\/url-mapping-webstorm.png\" alt=\"url-mapping-webstorm\" width=\"600\" \/><\/p>\n<p>Dans votre code c\u00f4t\u00e9 client, les suggestions de saisie pour les routes Express sont d\u00e9sormais plus informatives car WebStorm affiche les d\u00e9tails concernant le type de requ\u00eate.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/07\/completion-suggestion-for-express-routes.png\" alt=\"completion-suggestion-for-express-routes\" width=\"600\" \/><\/p>\n<p>Il y deux autres am\u00e9liorations int\u00e9ressantes pour votre code c\u00f4t\u00e9 client\u00a0:<\/p>\n<ul>\n<li>If you work with AngularJS, you can use completion for the endpoint URLs detected in the project\u2019s <a href=\"https:\/\/docs.angularjs.org\/api\/ng\/service\/$http\" target=\"_blank\" rel=\"noopener\">$http<\/a> methods.<\/li>\n<li>Pour Axios, la saisie semi-automatique fonctionne pour les URL des points de terminaison dans les m\u00e9thodes d&#8217;une nouvelle instance Axios.<\/li>\n<\/ul>\n<h3 id=\"generic_support_for_web_types\">Prise en charge g\u00e9n\u00e9rique pour les web-types<\/h3>\n<p>Nous avons \u00e9tendu la prise en charge des <a href=\"https:\/\/github.com\/JetBrains\/web-types#web-types\" target=\"_blank\" rel=\"noopener\">web-types<\/a>, un standard open source pour la documentation des frameworks web. Elle \u00e9tait auparavant ax\u00e9e sur la prise en charge de Vue, mais vous pouvez maintenant l&#8217;utiliser pour enrichir l&#8217;assistance au codage pour les composants personnalis\u00e9s dans vos fichiers HTML. Visionnez <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2021\/06\/webinar-recording-web-types-for-vue-and-beyond\/\">ce webinaire<\/a> pour en savoir plus.<\/p>\n<h3 id=\"other_notable_improvements\">Autres am\u00e9liorations notables\u00a0<\/h3>\n<ul>\n<li>\u00c0 partir de la version 2021.2, vous ne trouverez plus l&#8217;option <em>Firefox Remote<\/em> dans les configurations Run\/Debug disponibles. Cette configuration Run\/Debug a cess\u00e9 de fonctionner avec la sortie de Firefox\u00a065 en janvier 2019, nous avons donc d\u00e9cid\u00e9 de la supprimer de WebStorm pour \u00e9viter toute confusion (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-50869\" target=\"_blank\" rel=\"noopener\">WEB-50869<\/a>).<\/li>\n<li>Quick fixes suggested by WebStorm are now shown before the fixes like <em>Suppress <\/em><em>for current<\/em><em> file <\/em>suggested by linters. Nous avons effectu\u00e9 ce changement car les actions sugg\u00e9r\u00e9es par l&#8217;IDE sont plus pertinentes dans de nombreux cas. We\u2019ve also removed the <em>Linter settings\u2026<\/em> and <em>Edit linter config file <\/em>quick fixes (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-47440\" target=\"_blank\" rel=\"noopener\">WEB-47440<\/a>).<\/li>\n<li>Nous avons revu la liste des navigateurs affich\u00e9s par d\u00e9faut dans la fen\u00eatre contextuelle de l&#8217;ic\u00f4ne du navigateur et supprim\u00e9 les options les moins populaires. Sur macOS ou Linux, vous ne verrez plus Opera et Edge. Ce dernier est encore affich\u00e9 par d\u00e9faut sous Windows (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-50871\" target=\"_blank\" rel=\"noopener\">WEB-50871<\/a>).<\/li>\n<li>Pour \u00e9viter de potentiels probl\u00e8mes de s\u00e9curit\u00e9, les valeurs des variables stock\u00e9es dans les fichiers <em>.env<\/em> ne seront plus affich\u00e9es par la saisie semi-automatique du code si ces fichiers ont \u00e9t\u00e9 exclus ou ajout\u00e9s \u00e0 <em>.gitignore <\/em> (<a href=\"https:\/\/youtrack.jetbrains.com\/issue\/WEB-46834\" target=\"_blank\" rel=\"noopener\">WEB-46834<\/a>).<\/li>\n<\/ul>\n<h2 id=\"version_control\">Contr\u00f4le de version<\/h2>\n<h3 id=\"gpg_signature_support\">Prise en charge de la signature GPG<\/h3>\n<p>Vous pouvez maintenant signer vos commits avec une cl\u00e9 GPG pour les s\u00e9curiser. Cette fonctionnalit\u00e9 est disponible dans <em>Preferences \/ Settings | Version Control | Git<\/em>. Si c&#8217;est la premi\u00e8re fois que vous utilisez une cl\u00e9 GPG, vous devrez <a href=\"https:\/\/docs.github.com\/en\/github\/authenticating-to-github\/managing-commit-signature-verification\/generating-a-new-gpg-key\" target=\"_blank\" rel=\"noopener\">la configurer<\/a>. Pour utiliser une cl\u00e9 GPG pr\u00e9configur\u00e9e, s\u00e9lectionnez-la simplement dans la liste d\u00e9roulante.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/GPG-key-configuration-in-webstorm-settings.png\" alt=\"GPG-key-configuration-in-webstorm-settings\" width=\"600\" \/><\/p>\n<h3 id=\"enhancements_for_pre_commit_checks\">Am\u00e9liorations pour les v\u00e9rifications pr\u00e9-commit<\/h3>\n<p>WebStorm vous permet d&#8217;effectuer un large gamme d&#8217;actions avant un commit. Avec la version 2021.2, nous avons ajout\u00e9 \u00e0 ces actions la possibilit\u00e9 d&#8217;ex\u00e9cuter des tests. Pour l&#8217;essayer, cliquez sur l&#8217;ic\u00f4ne engrenage dans la fen\u00eatre d&#8217;outils <em>Commit<\/em>, s\u00e9lectionnez l&#8217;option <em>Run Tests<\/em> et choisissez la configuration d&#8217;ex\u00e9cution requise. L&#8217;IDE testera votre fichier et vous fera savoir si quelque chose ne va pas.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/run-tests-pre-commit-check-in-webstorm.png\" alt=\"run-tests-pre-commit-check-in-webstorm\" width=\"600\" \/><\/p>\n<p>De plus, vous pouvez maintenant personnaliser l&#8217;option <em>Cleanup<\/em> en cliquant sur <em>Choose profile<\/em>, tout comme vous pouviez le faire pour <a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2021\/01\/webstorm-2021-1-eap-1\/#configure_a_profile_for_pre_commit_inspections\"><em>Analyze code<\/em><\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/choose-profile-for-cleanup-code-in-webstorm.png\" alt=\"choose-profile-for-cleanup-code-in-webstorm\" width=\"600\" \/><\/p>\n<p>Enfin, la progression et les r\u00e9sultats des v\u00e9rifications pr\u00e9-commit sont d\u00e9sormais affich\u00e9s dans la zone <em>Commit<\/em> afin de ne pas vous d\u00e9ranger avec des bo\u00eetes de dialogue modales suppl\u00e9mentaires.<\/p>\n<h3 id=\"text_search_in_local_history_revisions\">Recherche textuelle dans les r\u00e9visions de l&#8217;historique local<\/h3>\n<p>Nous avons ajout\u00e9 un champ de recherche \u00e0 la bo\u00eete de dialogue <em>Local History<\/em> pour vous aider \u00e0 atteindre rapidement le texte pertinent dans vos r\u00e9visions. Dor\u00e9navant, lorsque vous faites un clic droit sur un fichier modifi\u00e9 et s\u00e9lectionnez <em>Local History | Show History<\/em> dans le menu contextuel, vous pouvez naviguer dans l&#8217;historique du fichier en tapant la requ\u00eate dans ce champ.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/search-in-local-history-webstorm.png\" alt=\"search-in-local-history-webstorm\" width=\"600\" \/><\/p>\n<h3 id=\"unified_behavior_for_the_show_diff_action\">Comportement unifi\u00e9 pour l&#8217;action Show Diff<\/h3>\n<p>\u00c0 compter de la version 2021.2, WebStorm affiche la diff\u00e9rence entre le fichier initial et le fichier modifi\u00e9 dans l&#8217;\u00e9diteur. Peu importe la fa\u00e7on dont vous appelez l&#8217;action <em>Show Diff<\/em> \u2013 via un raccourci, une ic\u00f4ne, depuis le menu contextuel, <em>Log<\/em> ou <em>File History<\/em>, ou en cliquant sur un fichier dans la fen\u00eatre d&#8217;outils <em>Commit <\/em> \u2013 l&#8217;IDE ouvrira le diff dans l&#8217;\u00e9diteur par d\u00e9faut.<\/p>\n<p>Si vous pr\u00e9f\u00e9rez suivre les modifications dans une fen\u00eatre s\u00e9par\u00e9e, vous pouvez faire glisser le fichier souhait\u00e9 depuis l&#8217;\u00e9diteur. Dans ce cas, WebStorm s&#8217;en souviendra et ouvrira les diffs ult\u00e9rieurs dans une fen\u00eatre s\u00e9par\u00e9e.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/open-diff-in-separate-window.png\" alt=\"open-diff-in-separate-window\" width=\"600\" \/><\/p>\n<p>To go back to the default display, click the gear icon and select <em>Show Diff <\/em><em>in Editor<\/em><em> Tab<\/em>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/show-diff-in-editor-tab-webstorm.png\" alt=\"show-diff-in-editor-tab-webstorm\" width=\"600\" \/><\/p>\n<h2 id=\"usability\">Ergonomie<\/h2>\n<h3 id=\"faster_way_to_reorganize_tool_windows\">R\u00e9organiser les fen\u00eatres d&#8217;outils plus rapidement<\/h3>\n<p>Il est d\u00e9sormais plus facile de r\u00e9organiser les fen\u00eatres d&#8217;outils. Survolez le haut de la fen\u00eatre d&#8217;outils que vous souhaitez d\u00e9placer, puis glissez-la jusqu&#8217;\u00e0 l&#8217;endroit souhait\u00e9 pour l&#8217;y d\u00e9poser. Cela fonctionne \u00e9galement si vous voulez d\u00e9tacher une fen\u00eatre d&#8217;outils de la fen\u00eatre principale de WebStorm : il suffit de la glisser en dehors du cadre de l&#8217;IDE.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/07\/drag-drop-tool-windows-in-webstorm.png\" alt=\"drag-and-drop-tool-windows\" width=\"600\" data-gif-src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/07\/drag-drop-tool-windows-in-webstorm.gif\" \/><\/p>\n<h3 id=\"easier_customization_of_project_icons\">Personnalisation des ic\u00f4nes du projet simplifi\u00e9e<\/h3>\n<p>Saviez-vous que vous pouvez modifiez les ic\u00f4nes de vos projets\u00a0? Vous pouvez le faire dans la liste des projets sur l&#8217;\u00e9cran <em>Welcome<\/em>. Upload custom icons by right-clicking on any project and selecting <em>Change Project Icon\u2026<\/em> from the context menu. Nous avons retravaill\u00e9 la fen\u00eatre de dialogue depuis laquelle vous pouvez t\u00e9l\u00e9charger votre ic\u00f4ne SVG afin de simplifier ce processus.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/change-project-icon-webstorm.png\" alt=\"change-project-icon-webstorm\" width=\"600\" \/><\/p>\n<h3 id=\"automatic_cache_and_logs_cleanup\">Nettoyage automatique du cache et des journaux<\/h3>\n<p>D\u00e9sormais, apr\u00e8s chaque mise \u00e0 jour majeure, votre IDE va automatiquement nettoyer tous les r\u00e9pertoires de cache et de journaux dont la derni\u00e8re mise \u00e0 jour remonte \u00e0 plus de 180\u00a0jours. Les r\u00e9pertoires des param\u00e8tres du syst\u00e8me et des plugins resteront inchang\u00e9s. To trigger this process manually, go to <em>Help | Delete Leftover IDE Directories\u2026<\/em> in the main menu.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/clear-webstorm-cache-and-logs.png\" alt=\"clear-webstorm-cache-and-logs\" width=\"600\" \/><\/p>\n<p>Pour en savoir plus sur les r\u00e9pertoires utilis\u00e9s par l&#8217;IDE et leur emplacement, consultez <a href=\"https:\/\/intellij-support.jetbrains.com\/hc\/en-us\/articles\/206544519-Directories-used-by-the-IDE-to-store-settings-caches-plugins-and-logs\" target=\"_blank\" rel=\"noopener\">cet article<\/a>.<\/p>\n<h3 id=\"improvements_for_the_preferences_settings_dialog\">Am\u00e9lioration de la bo\u00eete de dialogue Preferences \/ Settings<\/h3>\n<p>Votre bo\u00eete de dialogue <em>Preferences \/ Settings<\/em> comporte d\u00e9sormais un n\u0153ud pour les param\u00e8tres avanc\u00e9s. Vous y trouverez de nouvelles options de configuration, notamment la possibilit\u00e9 de d\u00e9finir une marge gauche en mode <em>Distraction-free<\/em>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/05\/advanced-settings.png\" alt=\"advanced-settings\" width=\"600\" \/><\/p>\n<p>De plus, vous pouvez d\u00e9sormais naviguer en avant et en arri\u00e8re entre les sections ouvertes dans <em>Preferences\/Settings<\/em>. Pour ce faire, utilisez les fl\u00e8ches situ\u00e9es en haut \u00e0 droite de la fen\u00eatre.<\/p>\n<h3 id=\"new_features_for_the_built_in_terminal\">Nouvelles fonctionnalit\u00e9s pour le terminal int\u00e9gr\u00e9<\/h3>\n<p>Nous avons ajout\u00e9 trois nouvelles fonctionnalit\u00e9s \u00e0 notre terminal int\u00e9gr\u00e9. Tout d&#8217;abord, vous pouvez maintenant s\u00e9lectionner la forme du curseur. Choisissez celle que vous pr\u00e9f\u00e9rez\u00a0!<\/p>\n<p>Par ailleurs, WebStorm prend d\u00e9sormais en charge <em>Use Option as Meta key<\/em>, de mani\u00e8re similaire \u00e0 l&#8217;option du m\u00eame nom dans le Terminal natif sur macOS. Cela permet \u00e0 la touche <em>\u2325<\/em> d&#8217;agir comme un m\u00e9ta-modificateur pouvant \u00eatre utilis\u00e9 en combinaison avec d&#8217;autres touches plut\u00f4t que comme une simple touche <em>\u00c9chap<\/em>. Vous pouvez par exemple utiliser les raccourcis suivants\u00a0:<\/p>\n<ul>\n<li><em>\u2325F<\/em> \u2013 passer au mot suivant<\/li>\n<li><em>\u2325B<\/em> \u2013 revenir un mot en arri\u00e8re<\/li>\n<li><em>\u2325D<\/em> \u2013 supprimer le mot suivant<\/li>\n<\/ul>\n<p>Vous pouvez trouver les nouvelles options dans <em>Preferences \/ Settings | Tools | Terminal<\/em>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/new-configuration-options-for-terminal-webstorm.png\" alt=\"new-configuration-options-for-terminal-webstorm\" width=\"600\" \/><\/p>\n<p>Nous avons facilit\u00e9 le travail avec les liens <em>http<\/em> affich\u00e9s dans la sortie du terminal. Vous pouvez maintenant copier ces liens ou les ouvrir dans le navigateur de votre choix. Pour cela, utilisez les actions correspondantes du menu contextuel disponible par un clic droit.<\/p>\n<h3 id=\"update_notifications_from_the_toolbox_app\">Notifications de mise \u00e0 jour depuis Toolbox App<\/h3>\n<p>Dor\u00e9navant, vous ne manquerez plus aucune mise \u00e0 jour produit importante de Toolbox App. WebStorm vous informera si une nouvelle version produit est disponible en t\u00e9l\u00e9chargement et vous proposera de faire la mise \u00e0 jour. Vous aurez besoin de Toolbox App\u00a01.20.8804 ou d&#8217;une version ult\u00e9rieure pour cela.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/06\/update-notification-from-toolbox-in-webstorm.png\" alt=\"update-notification-from-toolbox-in-webstorm\" width=\"600\" \/><\/p>\n<p>Il s&#8217;agit l\u00e0 des nouveaut\u00e9s les plus significatives. Pour prendre connaissance de la liste compl\u00e8te des nouvelles fonctionnalit\u00e9s et am\u00e9liorations de <a href=\"https:\/\/www.jetbrains.com\/fr-fr\/webstorm\/download\/\" target=\"_blank\" rel=\"noopener\">WebStorm 2021.2<\/a>, consultez les <a href=\"https:\/\/confluence.jetbrains.com\/display\/WI\/WebStorm+2021.2+Release+Notes\" target=\"_blank\" rel=\"noopener\">notes de publication<\/a>. Merci de nous faire part de vos commentaires et de nous signaler tout probl\u00e8me via notre <a href=\"https:\/\/youtrack.jetbrains.com\/issues\/WEB\" target=\"_blank\" rel=\"noopener\">outil de suivi<\/a>.<\/p>\n<p><em>L&#8217;\u00c9quipe WebStorm<\/em><\/p>\n\n    <div class=\"about-author \">\n        <div class=\"about-author__box\">\n            <div class=\"row\">\n                <div class=\"about-author__box-img\">\n                    <img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=200&#038;r=g\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\"  class=\"avatar avatar-200 wp-user-avatar wp-user-avatar-200 photo avatar-default\">\n                <\/div>\n                <div class=\"about-author__box-text\">\n                                                        <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n","protected":false},"author":813,"featured_media":161689,"comment_status":"closed","ping_status":"closed","template":"","categories":[907],"tags":[91,6579],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm\/166728"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/webstorm"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=166728"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm\/166728\/revisions"}],"predecessor-version":[{"id":166751,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/webstorm\/166728\/revisions\/166751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/161689"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=166728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=166728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=166728"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=166728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}