{"id":3315,"date":"2024-08-01T10:44:56","date_gmt":"2024-08-01T13:44:56","guid":{"rendered":"https:\/\/horatech.shop\/?p=3315"},"modified":"2024-11-29T14:19:39","modified_gmt":"2024-11-29T17:19:39","slug":"como-configurar-o-vs-code-para-programacao","status":"publish","type":"post","link":"https:\/\/horatech.shop\/fr\/comment-configurer-vs-code-pour-la-programmation\/","title":{"rendered":"Comment configurer vs code pour la programmation"},"content":{"rendered":"

Visual Studio Code (VS Code) est l'un des \u00e9diteurs de code les plus aim\u00e9s par les d\u00e9veloppeurs. Votre personnalisation \u00e9lev\u00e9e vous permet d'adapter exactement l'environnement de d\u00e9veloppement \u00e0 vos besoins. <\/p>\n\n\n\n

De l'installation \u00e0 la configuration des th\u00e8mes du clavier, des extensions et des raccourcis, VS Code offre de nombreuses options pour am\u00e9liorer votre productivit\u00e9. <\/p>\n\n\n\n

Cet article vous guidera par les \u00e9tapes essentielles pour configurer VS Code pour la programmation.<\/p>\n\n\n\n

Installation du code vs<\/h2>\n\n\n\n

T\u00e9l\u00e9charger le programme d'installation<\/h3>\n\n\n\n

Pour commencer \u00e0 configurer VS Code, la premi\u00e8re \u00e9tape consiste \u00e0 t\u00e9l\u00e9charger l'installateur. Visitez le site Web officiel vs code et cliquez sur le bouton de t\u00e9l\u00e9chargement. <\/p>\n\n\n\n

Le site identifiera automatiquement son syst\u00e8me d'exploitation et fournira le bon installateur.<\/p>\n\n\n\n

\"\"
Configuration VScode<\/em><\/figcaption><\/figure>\n\n\n\n

Ex\u00e9cution de l'installation<\/h3>\n\n\n\n

Une fois le t\u00e9l\u00e9chargement termin\u00e9, cliquez sur le fichier t\u00e9l\u00e9charg\u00e9 pour d\u00e9marrer l'installation. Suivez les instructions \u00e0 l'\u00e9cran en cliquant sur \u00abSuivant\u00bb dans les \u00e9tapes. <\/p>\n\n\n\n

N'oubliez pas d'accepter les conditions d'utilisation. Choisissez le dossier o\u00f9 le code vs sera install\u00e9 et continuez.<\/p>\n\n\n\n

Configuration du chemin<\/h3>\n\n\n\n

Dans la derni\u00e8re \u00e9tape de l'installation, v\u00e9rifiez l'option \"Ajouter au chemin\". Ceci est essentiel pour vous d'ouvrir le code VS directement via le terminal, en utilisant la commande code<\/code>. <\/p>\n\n\n\n

Apr\u00e8s avoir marqu\u00e9 cette option, cliquez sur \u00abInstaller\u00bb et lorsque l'installation est termin\u00e9e, cliquez sur \u00abTerminer\u00bb pour terminer.<\/p>\n\n\n\n

Pr\u00eat! Maintenant, le code vs est install\u00e9 et configur\u00e9 sur votre syst\u00e8me. Passons \u00e0 l'\u00e9tape suivante et commen\u00e7ons \u00e0 explorer les fonctionnalit\u00e9s de cet outil de programmation puissant.<\/p>\n\n\n\n

Choisir des th\u00e8mes et des sch\u00e9mas de couleurs<\/h2>\n\n\n\n

Acc\u00e8s aux pr\u00e9f\u00e9rences<\/h3>\n\n\n\n

Pour personnaliser le code vs, acc\u00e9dez aux pr\u00e9f\u00e9rences. Aller au menu Fichier> Pr\u00e9f\u00e9rences> Th\u00e8me de couleur<\/code> ou simplement taper Pr\u00e9f\u00e9rences: th\u00e8me de couleur<\/code> Dans la palette de commande. Cela ouvrira une liste de th\u00e8mes disponibles pour que vous puissiez choisir.<\/p>\n\n\n\n

Th\u00e8mes populaires<\/h3>\n\n\n\n

Il existe de nombreux th\u00e8mes populaires qui peuvent personnaliser l'\u00e9diteur \u00e0 votre go\u00fbt. Certains des plus connus sont:<\/p>\n\n\n\n

    \n
  • Un Dark Pro<\/strong>: Un th\u00e8me sombre tr\u00e8s populaire parmi les d\u00e9veloppeurs.<\/li>\n\n\n\n
  • Atome une lumi\u00e8re<\/strong>: Id\u00e9al pour ceux qui pr\u00e9f\u00e8rent un th\u00e8me clair.<\/li>\n\n\n\n
  • Dracula<\/strong>: Un th\u00e8me sombre d\u00e9velopp\u00e9 par Zeno Rocha, un Br\u00e9silien.<\/li>\n\n\n\n
  • Th\u00e8me d'ic\u00f4ne de mat\u00e9riel<\/strong>: En plus des th\u00e8mes de couleur, vous pouvez modifier les ic\u00f4nes de fichier en style de conception de mat\u00e9riau.<\/li>\n<\/ul>\n\n\n\n

    Personnaliser votre th\u00e8me<\/h3>\n\n\n\n

    Si aucun des th\u00e8mes standard ne vous pla\u00eet, vous pouvez personnaliser votre propre th\u00e8me. Acc\u00e9der Fichier> Pr\u00e9f\u00e9rences> Param\u00e8tres<\/code> et cherchez Workbench.colorcustomalisations<\/code>. <\/p>\n\n\n\n

    Ici, vous pouvez ajuster les couleurs de diff\u00e9rents \u00e9l\u00e9ments de l'interface de code vs.<\/p>\n\n\n\n

    Conseil<\/strong>: Vous pouvez ajouter des personnalisations de couleurs au titre et aux barres d'\u00e9tat dans la section Cololomalisations<\/code>.<\/p>\n\n\n\n

    Avec ces conseils, vous pouvez faire du code contre votre chemin et rendre le programme encore plus agr\u00e9able!<\/p>\n\n\n\n

    Installation des extensions essentielles<\/h2>\n\n\n\n
    \"\"
    extensions essentielles<\/em><\/figcaption><\/figure>\n\n\n\n

    Explorer le march\u00e9<\/h3>\n\n\n\n

    Pour installer des extensions sur le code vs, visitez le march\u00e9. Marketplace est l'endroit o\u00f9 vous trouvez toutes les extensions disponibles pour le code vs. Pour y acc\u00e9der:<\/p>\n\n\n\n

      \n
    1. Ouvrez le code vs.<\/li>\n\n\n\n
    2. Cliquez sur l'ic\u00f4ne d'extensions dans la barre lat\u00e9rale gauche ou appuyez sur Ctrl + shift + x<\/code>.<\/li>\n\n\n\n
    3. Utilisez la barre de recherche pour trouver les extensions que vous souhaitez.<\/li>\n\n\n\n
    4. Cliquer sur Installer<\/code> Pour ajouter l'extension \u00e0 votre code VS.<\/li>\n<\/ol>\n\n\n\n

      Extensions recommand\u00e9es<\/h3>\n\n\n\n

      Voici quelques extensions qui peuvent am\u00e9liorer consid\u00e9rablement votre productivit\u00e9:<\/p>\n\n\n\n

        \n
      • TAG TAGNE AUTO<\/strong>: Renommez automatiquement les balises HTML correspondantes lorsque vous en modifiez l'une.<\/li>\n\n\n\n
      • Couleur en surbrillance<\/strong>: Met en \u00e9vidence les couleurs de votre code CSS, ce qui facilite la visualisation des couleurs utilis\u00e9es.<\/li>\n\n\n\n
      • Serveur en direct<\/strong>: Cr\u00e9e un serveur local qui met automatiquement \u00e0 jour votre page de navigateur chaque fois que vous enregistrez un fichier.<\/li>\n\n\n\n
      • Plus joli<\/strong>: Former automatiquement votre code, en assurant un style coh\u00e9rent.<\/li>\n\n\n\n
      • Eslint<\/strong>: Analyse votre code JavaScript \u00e0 la recherche d'erreurs et de probl\u00e8mes de style.<\/li>\n\n\n\n
      • Gitlens<\/strong>: Am\u00e9liore l'int\u00e9gration GIT dans le code VS, montrant des informations d\u00e9taill\u00e9es sur les commits et les auteurs.<\/li>\n<\/ul>\n\n\n\n

        G\u00e9rer vos extensions<\/h3>\n\n\n\n

        Apr\u00e8s avoir install\u00e9 des extensions, vous voudrez peut-\u00eatre les g\u00e9rer. Pour cela:<\/p>\n\n\n\n

          \n
        1. Ouvrez le panneau d'extension (Ctrl + shift + x<\/code>).<\/li>\n\n\n\n
        2. Cliquez sur l'ic\u00f4ne du mat\u00e9riel \u00e0 c\u00f4t\u00e9 de l'extension que vous souhaitez g\u00e9rer.<\/li>\n\n\n\n
        3. Vous pouvez d\u00e9sactiver, d\u00e9sinstaller ou configurer l'extension selon les besoins.<\/li>\n<\/ol>\n\n\n\n

          Souviens-toi<\/strong>: Moins c'est plus. Installez uniquement les extensions que vous utiliserez vraiment pour \u00e9viter de surcharger votre \u00e9diteur.<\/p>\n\n\n\n

          Configuration du formatage du code<\/h2>\n\n\n\n

          Ajustement des pr\u00e9f\u00e9rences de mise en forme<\/h3>\n\n\n\n

          Vous pouvez ajuster vos pr\u00e9f\u00e9rences de formatage de code sur le code vs. Acc\u00e9der aux configurations en appuyant Ctrl (cmd) +,<\/code> Et recherchez \"Formatage lors de la sauvegarde\". <\/p>\n\n\n\n

          Activez cette option afin que le code soit automatiquement format\u00e9 chaque fois que vous enregistrez un fichier.<\/p>\n\n\n\n

          Formatage lors de l'enregistrement<\/h3>\n\n\n\n

          L'une des fonctionnalit\u00e9s les plus utiles du code vs est le formatage automatique lors de l'enregistrement. Cela garantit que votre code est toujours propre et organis\u00e9. <\/p>\n\n\n\n

          Pour activer cette option, ajoutez la ligne suivante \u00e0 votre fichier sets.json<\/code>:<\/p>\n\n\n\n

          {\n    \"Editor.formatonsave\": true\n}<\/code><\/pre>\n\n\n\n
          Utiliser des outils plus jolis et autres<\/h3>\n\n\n\n
          Pittier est un outil de mise en forme de code populaire. Il aide \u00e0 maintenir un style coh\u00e9rent tout au long de votre projet. Pour l'utiliser, suivez ces \u00e9tapes:<\/p>\n\n\n\n
            \n
          1. Installez l'extension plus jolie sur le code vs.<\/li>\n\n\n\n
          2. Ajoutez les param\u00e8tres les plus jolis \u00e0 votre sets.json<\/code>:<\/li>\n<\/ol>\n\n\n\n
            {\n    \"editor.defaultFormter\": \"esbenp.prettier-vscode\",\n    \"[Javascript]\": {\n        \"editor.defaultformatter\": \"esbenp.prettier-vscode\"\n    }\n}<\/code><\/pre>\n\n\n\n
            D\u00e9sormais, chaque fois que vous enregistrez un fichier, plus joli forme le code automatiquement.<\/p>\n\n\n\n
            Le maintien du code bien formel am\u00e9liore non seulement la lisibilit\u00e9, mais aide \u00e9galement \u00e0 \u00e9viter les erreurs inutiles. <\/p>\n\n\n\n
            Essayez diff\u00e9rents outils et trouvez celui qui correspond le mieux \u00e0 votre flux de travail.<\/p>\n\n\n\n
            Personnalisation des raccourcis clavier<\/h2>\n\n\n\n
            Acc\u00e9der aux param\u00e8tres de raccourci<\/h3>\n\n\n\n
            Pour personnaliser vos raccourcis clavier sur le code vs, acc\u00e9dez \u00e0 la palette de commande en appuyant sur Ctrl + shift + p<\/code> et taper Pr\u00e9f\u00e9rences: ouvrir les raccourcis clavier<\/code>. <\/p>\n\n\n\n
            Cela ouvrira un nouvel onglet o\u00f9 vous pouvez voir et modifier tous les raccourcis disponibles.<\/p>\n\n\n\n
            Cr\u00e9ation de nouveaux raccourcis<\/h3>\n\n\n\n
            Cr\u00e9er de nouveaux raccourcis est assez simple. Dans l'onglet Raccourci, cliquez sur l'ic\u00f4ne du crayon \u00e0 c\u00f4t\u00e9 de la commande que vous souhaitez modifier et appuyez sur la combinaison des touches que vous souhaitez utiliser. <\/p>\n\n\n\n
            N'oubliez pas de choisir des combinaisons qui ne sont pas en conflit avec d'autres commandes importantes.<\/p>\n\n\n\n
            Param\u00e8tres d'importation et d'exportation<\/h3>\n\n\n\n
            Si vous utilisez VS Code dans diff\u00e9rentes machines, il peut \u00eatre utile d'exporter vos param\u00e8tres de raccourci. Aller \u00e0 F1> Pr\u00e9f\u00e9rences: Param\u00e8tres ouverts (JSON)<\/code> et copiez les param\u00e8tres souhait\u00e9s. <\/p>\n\n\n\n
            Pour importer, collez simplement ces param\u00e8tres dans le fichier sets.json<\/code> de la nouvelle machine.<\/p>\n\n\n\n
            La personnalisation de vos raccourcis clavier peut augmenter consid\u00e9rablement votre productivit\u00e9, vous permettant de travailler plus efficacement et confortablement.<\/p>\n\n\n\n
            Int\u00e9grer avec Git<\/h2>\n\n\n\n
            Configuration de Git dans VS Code<\/h3>\n\n\n\n
            Visual Studio Code a une int\u00e9gration native avec des syst\u00e8mes de contr\u00f4le de version comme Git. <\/p>\n\n\n\n
            Pour commencer, ouvrez le panneau \u00abContr\u00f4le de la source\u00bb sur le c\u00f4t\u00e9 gauche ou utilisez les commandes sur la barre d'\u00e9tat inf\u00e9rieure. <\/p>\n\n\n\n
            Vous pouvez initialiser un r\u00e9f\u00e9rentiel GIT, effectuer des engagements, pousser et tirer, et afficher et g\u00e9rer les modifications directement dans l'\u00e9diteur.<\/p>\n\n\n\n
              \n
            • Initialiser un r\u00e9f\u00e9rentiel GIT<\/strong>: Cliquez sur l'ic\u00f4ne GIT dans la barre lat\u00e9rale puis le bouton de d\u00e9marrage du r\u00e9f\u00e9rentiel.<\/li>\n\n\n\n
            • Ajouter des fichiers pour commettre<\/strong>: Souris sur les fichiers modifi\u00e9s et cliquez sur \u00ab\u00c9tape\u00bb pour les ajouter pour commettre.<\/li>\n\n\n\n
            • S'engager<\/strong>: Cliquez sur \u00abCommitation en mise en sc\u00e8ne\u00bb pour confirmer les modifications.<\/li>\n\n\n\n
            • Poussez le r\u00e9f\u00e9rentiel distant<\/strong>: Utilisez la commande push git<\/code> dans le terminal int\u00e9gr\u00e9 ou via l'interface graphique.<\/li>\n<\/ul>\n\n\n\n
              Utilisation de gitlens<\/h3>\n\n\n\n
              Gitlens est une extension puissante qui am\u00e9liore l'int\u00e9gration GIT dans le code VS. Avec lui, vous pouvez voir l'histoire des commits, comparer les changements et plus encore.<\/p>\n\n\n\n
              Pour installer des gitlens:<\/p>\n\n\n\n
                \n
              1. Acc\u00e9dez \u00e0 l'onglet Extension de code vs.<\/li>\n\n\n\n
              2. Recherchez les gitlens et cliquez sur Installer.<\/li>\n\n\n\n
              3. Apr\u00e8s l'installation, explorez les nouvelles fonctionnalit\u00e9s disponibles sur le panneau de configuration source.<\/li>\n<\/ol>\n\n\n\n
                Effectuer des engagements et pousser<\/h3>\n\n\n\n
                Pour effectuer des engins et pousser sur le code vs:<\/p>\n\n\n\n
                  \n
                1. Apporter des modifications dans le code: modifiez vos fichiers normalement.<\/li>\n\n\n\n
                2. Ajoutez les modifications \u00e0 l'\u00e9tape: dans le panneau de configuration source, cliquez sur \u00abMettez en sc\u00e8ne tout\u00bb pour ajouter toutes les modifications.<\/li>\n\n\n\n
                3. \u00c9crivez un message \u00e0 partir de commit: Dans le champ Message, d\u00e9crivez les modifications apport\u00e9es.<\/li>\n\n\n\n
                4. Commit Commit: Cliquez sur l'ic\u00f4ne de v\u00e9rification pour confirmer.<\/li>\n\n\n\n
                5. Envoyez les modifications au r\u00e9f\u00e9rentiel distant: utilisez la commande push git<\/code> Dans le terminal int\u00e9gr\u00e9 ou cliquez sur le bouton Push sur l'interface graphique.<\/li>\n<\/ol>\n\n\n\n
                  L'int\u00e9gration de Git avec VS Code facilite consid\u00e9rablement le contr\u00f4le de la version, vous permettant de g\u00e9rer votre code efficacement et organis\u00e9, le tout en un seul endroit.<\/p>\n\n\n\n
                  En utilisant le terminal int\u00e9gr\u00e9<\/h2>\n\n\n\n
                  \"\"
                  En utilisant le terminal<\/em><\/figcaption><\/figure>\n\n\n\n
                  Ouvrant le terminal<\/h3>\n\n\n\n
                  Pour ouvrir le terminal int\u00e9gr\u00e9 du code vs, utilisez le raccourci `ctrl + \\<\/p>\n\n\n\n
                  (Windows \/ Linux) ou<\/code>CMD + `(Mac). Cela ouvrira le terminal en bas de la fen\u00eatre de code vs, vous permettant d'ex\u00e9cuter des commandes sans quitter l'\u00e9diteur.<\/p>\n\n\n\n
                  Commandes de voile et de course<\/h3>\n\n\n\n
                  Le terminal int\u00e9gr\u00e9 fonctionne comme tout autre terminal. Vous pouvez naviguer entre les r\u00e9pertoires, ex\u00e9cuter des scripts, installer des packages et plus encore. Voici quelques commandes utiles:<\/p>\n\n\n\n
                    \n
                  • CD<\/code> Pour changer le r\u00e9pertoire.<\/li>\n\n\n\n
                  • LS<\/code> ou diron<\/code> Pour r\u00e9pertorier les fichiers et les r\u00e9pertoires.<\/li>\n\n\n\n
                  • Installation de NPM<\/code> Pour installer les installations d'un n\u0153ud.js. projet.<\/li>\n\n\n\n
                  • python script.py<\/code> Pour ex\u00e9cuter un script Python.<\/li>\n<\/ul>\n\n\n\n
                    Le terminal int\u00e9gr\u00e9 vous permet d'avoir plus de contr\u00f4le sur votre environnement de d\u00e9veloppement sans changer entre diff\u00e9rentes fen\u00eatres ou applications.<\/p>\n\n\n\n
                    Conclusion<\/h2>\n\n\n\n
                    La d\u00e9finition du code Visual Studio pour la programmation est un processus int\u00e9ressant, car l'\u00e9diteur offre une large gamme de fonctionnalit\u00e9s et d'options de personnalisation. <\/p>\n\n\n\n
                    De l'installation \u00e0 la configuration des th\u00e8mes, des extensions et des raccourcis clavier, chaque \u00e9tape contribue \u00e0 un environnement de travail plus productif et plus agr\u00e9able. <\/p>\n\n\n\n
                    Profitez des conseils et transformez le code vs en votre alli\u00e9 principal lors de la programmation!<\/p>","protected":false},"excerpt":{"rendered":"
                    O Visual Studio Code (VS Code) \u00e9 um dos editores de c\u00f3digo mais queridos pelos desenvolvedores. Sua alta personaliza\u00e7\u00e3o permite que voc\u00ea adapte o ambiente de desenvolvimento exatamente \u00e0s suas necessidades. Desde a instala\u00e7\u00e3o at\u00e9 a configura\u00e7\u00e3o de temas, extens\u00f5es e atalhos de teclado, o VS Code oferece in\u00fameras op\u00e7\u00f5es para potencializar sua produtividade. Este […]<\/p>\n","protected":false},"author":2,"featured_media":3316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacao"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Configuracao-do-VSCode.webp?fit=1200%2C900&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts\/3315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/comments?post=3315"}],"version-history":[{"count":3,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts\/3315\/revisions"}],"predecessor-version":[{"id":3801,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/posts\/3315\/revisions\/3801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/media\/3316"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/media?parent=3315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/categories?post=3315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/fr\/wp-json\/wp\/v2\/tags?post=3315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}