{"id":232270,"date":"2023-01-13T15:16:00","date_gmt":"2023-01-13T12:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232270"},"modified":"2022-11-10T08:24:29","modified_gmt":"2022-11-10T05:24:29","slug":"5-extensions-utiles-pour-vs-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/5-extensions-utiles-pour-vs-code\/","title":{"rendered":"5 extensions utiles pour VS Code"},"content":{"rendered":"\n<p>Le succ\u00e8s de VS Code et son adoption rapide par la communaut\u00e9 des d\u00e9veloppeurs ne sont pas seulement dus au fait qu&rsquo;il s&rsquo;agit d&rsquo;un \u00e9diteur tr\u00e8s comp\u00e9tent avec des outils utiles pr\u00eats \u00e0 l&#8217;emploi, mais \u00e0 la communaut\u00e9 dynamique d&rsquo;utilisateurs cr\u00e9ant de multiples outils utiles pour mieux travailler avec. Passons en revue cinq extensions VS Code tri\u00e9es sur le volet pour am\u00e9liorer la vitesse et l&rsquo;efficacit\u00e9 de notre flux de travail.<\/p>\n<h2>Client REST<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame<\/a><\/p>\n<p>Apr\u00e8s \u00eatre pass\u00e9 \u00e0 VS Code depuis PhpStorm, la premi\u00e8re chose qui m&rsquo;a manqu\u00e9 \u00e9tait le client REST int\u00e9gr\u00e9 de PhpStorm o\u00f9 vous pouviez \u00e9crire des requ\u00eates en texte brut. Heureusement, cette extension vous permet de faire des demandes d&rsquo;API REST directement \u00e0 partir d&rsquo;un \u00e9diteur de code VS et d&rsquo;obtenir la r\u00e9ponse. Vous devez simplement d\u00e9marrer un fichier vierge, y ajouter la requ\u00eate, changer sa langue en &quot;http&quot; et vous obtiendrez un bouton en haut du fichier indiquant ENVOYER LA DEMANDE sur lequel vous cliquerez pour envoyer la requ\u00eate API REST de l&rsquo;int\u00e9rieur Code VS.<\/p>\n<h2>Bl\u00e2me Git int\u00e9gr\u00e9<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/marketplace.visualstudio.com\/items?itemName=waderyan.gitblame<\/a><\/p>\n<\/p>\n<p>Cette extension vous permet de voir qui a commis quoi sur chaque ligne de votre \u00e9diteur. Bien que l&rsquo;extension Git Lens soit plus omnipr\u00e9sente, je pr\u00e9f\u00e8re Git Blame car je n&rsquo;aime pas avoir les messages de validation, m\u00eame s&rsquo;ils sont estomp\u00e9s, m\u00e9lang\u00e9s \u00e0 mon code comme le fait Git Lens. Cette extension affichera le committer dans la barre d&rsquo;\u00e9tat en bas, et lorsque vous cliquerez dessus, elle affichera le message de commit avec un lien pour acc\u00e9der au commit sur GitHub. Voici ma propre capture d&rsquo;\u00e9cran montrant le lien\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7f8223fd.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7f8223fd.png\" alt=\"5 extensions utiles pour VS Code\" ><\/a><\/p>\n<h2>Coloriseur de paire de brackets<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=CoenraadS.bracket-pair-colorizer-2\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/marketplace.visualstudio.com\/items?itemName=CoenraadS.bracket-pair-colorizer-2<\/a><\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7f9c0ce9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7f9c0ce9.png\" alt=\"5 extensions utiles pour VS Code\" ><\/a><\/p>\n<p>Il est facile de se perdre dans le code en essayant de d\u00e9terminer quelle parenth\u00e8se correspond \u00e0 laquelle. Cette extension affichera chaque niveau de crochet sur une couleur diff\u00e9rente et tracera m\u00eame une ligne du crochet d&rsquo;ouverture au crochet de fermeture afin que vous soyez toujours conscient du contexte sur lequel vous travaillez.<\/p>\n<h2>Mise en \u00e9vidence de la syntaxe Babel JavaScript<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=mgmcdermott.vscode-language-babel\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/marketplace.visualstudio.com\/items?itemName=mgmcdermott.vscode-language-babel<\/a><\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7fbac30b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7fbac30b.png\" alt=\"5 extensions utiles pour VS Code\" ><\/a><\/p>\n<p>Cette extension mettra non seulement en \u00e9vidence les fonctionnalit\u00e9s ES6 ou ES7, mais mettra \u00e9galement correctement en \u00e9vidence le code React, la syntaxe GraphQL et m\u00eame le CSS en JS \u00e0 la mani\u00e8re de StyledComponents.<\/p>\n<h2>Th\u00e8me de couleur VS Code<\/h2>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=akamud.vscode-theme-onedark\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/marketplace.visualstudio.com\/items?itemName=akamud.vscode-theme-onedark<\/a><\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7fd5409b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157429-61e6b7fd5409b.jpg\" alt=\"5 extensions utiles pour VS Code\" ><\/a><\/p>\n<p>Ne sont-ils pas difficiles \u00e0 trouver des combinaisons de couleurs pour l&rsquo;\u00e9diteur qui correspondent parfaitement \u00e0 nos go\u00fbts? Une fois que nous en avons trouv\u00e9 un, nous ne le l\u00e2cherons pas jusqu&rsquo;\u00e0 ce qu&rsquo;un meilleur se pr\u00e9sente. Le sch\u00e9ma de couleurs que j&rsquo;utilise actuellement et que je trouve tr\u00e8s agr\u00e9able est celui-ci, Atom One Dark, et va bien avec le th\u00e8me d&rsquo;ic\u00f4nes Seti inclus dans VS Code.<\/p>\n<h2>\u00c0 ton tour<\/h2>\n<p>Une extension que vous aimez et que vous souhaitez exprimer publiquement\u00a0? Vous en connaissez un similaire \u00e0 ceux pr\u00e9sent\u00e9s ici? Peut-\u00eatre un que vous avez d\u00e9velopp\u00e9? Faites-moi savoir dans les commentaires!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/startfunction.com\" class=\"external external_icon\">startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cinq extensions tri\u00e9es sur le volet pour VS Code qui am\u00e9lioreront la vitesse et l&rsquo;efficacit\u00e9 de votre flux de travail.<\/p>\n","protected":false},"author":1,"featured_media":157430,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,791],"tags":[1167],"class_list":["post-232270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-visual-studio-code-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=232270"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/232270\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/157430"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=232270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=232270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=232270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}